发表于： 2019-11-01 19:28:18
1 972
CSS总结
+ 样式类型: 浏览器默认样式、带有样式的标签、内联样式、style标签、link引入样式文件
+ 选择器:
2、标签选择器 (div等)
3、class选择器 (.)-->用的较多
4、id 选择器 (#)-->顾名思义: id值只有一个
2.2组合选择器：1、多组选择器 div, span, a.on
2、后代选择器 div span-->选中div标签中的所有span标签(谨慎使用)
3、子元素选择器 div > span
4、兄弟元素选择器 div + span, div ~ span 表示 div 后所有 span 兄弟节点
2.3属性选择器:input[type],input[type=”text”],input[type~=],input[type|=]
input[type=], input[type^=], input[type$=] -->表单元素
2.4伪类和伪对象：伪类选择器，一般常用于a标签例如a:link,a:visited,a:hover,a:active；伪对象选择器, :after, :before 等
+ 优先级
!important > 内联样式 > #ID > .class > TAG | [attr] | 伪类 > 伪对象 > 通配符 > 继承
3.1 !important: 谨慎使用
3.2 对于组合的选择,可以使用加法原则,
+ 盒模型: 内容,padding,border,margin
当你给容器增加padding时,会撑大盒子,使用时要注意,当你改变padding时,要注意你的布局不要被改变
当你给div增加box-size: border-box的属性时,你想要设置的边框和内边距的值是包含在width内的
这个属性有利于你的布局
+ inline,block和inline-block
•与其他元素依次排列在一行内, 直到遇到右边界才换行
•不可设置宽和高, 设置了 width 和 height 也无效
•可以设置水平方向的 padding 和 margin, 垂直方向的 padding 和 margin 不会影响布局(可以设置并且可以生效, 但是对其他元素没有影响)
•扩展说明, 可以设置 line-height, 并且会影响布局(可以对其他元素的位置产生影响)
•常见的inline元素: a,span,br,i,em,strong,label,q,var,cite,code
5.2、bloock块级元素•自己独占一行
•可以设置宽,高, 默认情况下, 宽度自动填满整个父元素, 但即使设置了宽度, 仍是独占一行
•可以设置任意方向上的margin,padding, 并都对布局产生影响
•常见的block元素：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form
5.3、inline-block内联块级元素 ( img,input )拥有上面两种元素的特性
•inline-block 元素虽好, 但是有样式问题, 即在元素间产生几像素的水平空隙(不同浏览器下不同), 原因是换行符,空格符和制表符转换成空白符, 在 字体大小不为0的情况下, 占据一定空间造成的
6.1、浮动的使用：元素水平排列、文字环绕图片、对比inline-block:a--实现原理不同, float 元素已经脱离了普通流, inline-block 元素仍在普通流中.b--都能水平排列元素, 但是 float 浏览器兼容性更好.c--float 可以做文字环绕, 而 inline-block 只能做水平排列.
6.2、清除浮动
在当前元素使用Css属性 clear : left|right|both|none, 使元素清除浮动元素的影响:•被浮动元素覆盖、•跟在浮动元素后
eg--.clear{clear:both;height:0;overflow:hidden;}
6.3、闭合浮动
浮动元素后添加带 clear 属性的额外标签
a) 添加额外标签
b) 使用伪对象 :after | :before
+ 定位
绝对定位(absolute) : 对于父级而言 (子绝父相)
相对定位(relative)
相对于浏览器的定位(fixed)
+ flex布局
返回列表
评论