一.浮动:浮动,就是使元素脱离标准流,移动到其父元素指定的位置的过程:float: left或者right
浮动的子元素无法超出父元素范围,如果父元素有padding,那么子元素无法超出padding
结论:一个父元素下,尽量让所有的子元素都浮动
一个块级元素浮动以后,会产生类似inline-block的特性
一个行内元素浮动以后,会产生类似inline-block的特性
如何清除浮动?
为什么要清除浮动?:在某些情况下,我们不能设定父元素的高度,但是所有的子元素都是浮动的(脱标),父元素的高度为0,父元素后面的元素会上提
清除浮动的四种方法:
1.额外标签法:在最后增加一个额外的div,用clear: both去掉浮动属性
2.overflow: hidden :强制父元素计算子元素高度
3.使用after伪元素
4.使用双伪元素 before,after:
例如:.clearfix:before, .clearfix:after{ content: ""; display: table; }
.clearfix:after { clear: both;}
二.定位:定位方式+偏移
1.static:所有不设定的元素,定位方式都是static(默认)
不脱离标准流
偏移不起作用 ,(top,right,bottom,left)
作用:消除定位
2.relative:相对定位
不脱离标准流
偏移起作用,上右下左 (起始点从元素本来应该所在的位置的左上位)
不破坏标准流,把元素移动到需要的位置
relative+偏移 VS static+margin的区别?
relative只是移动了元素,不破坏标准流
static虽然也能移动,但是破坏了标准流
relative作为absolute的基准
如果同时设定了letf,right,只有left有效;如果同时设定了通top,bottom,只有top有效
3.absolute(绝对定位)
脱离标准流,跟着滚动条一起滚动
偏移起作用,top,bottom,left,right()
设定了position: absolute,没有设定left,top的情况下
如果没有设定left,top,所有对元素能产生作用的因素都会起作用:注意,与top:0;left:0;不等价
不设定left,top的情况下,则被初始化为“应该在”的位置
如果left被设定,top没有:则left按照设定,top在默认位置
如果top被设定,left没有:则top按照设定,left在默认位置
relative作为absolute的基准(父元素relative,子元素absolute)
absolute元素如何居中?
第一步,设定top,left为50%
第二步,通过margin-left,margin-top设定负值
fixed(固定定位)
脱离标准流,不和滚动条一起滚动
偏移起作用:top bottom,left,right
不受父元素的影响,只受浏览器可视区的影响
当一个元素被设定为固定定位时,会产生模式转换=》行内块元素,如果开始没有设定宽度,设定后宽度为最小
面试题:能脱离标准流的:浮动,absolute,fixed
面试题:所有标准流的动作,都会触发模式转换,对应元素变为行内块元素
叠放次序
z-index:用于设定重叠元素的覆盖关系的
设定为一个数值,没有单位
数值越大越靠上
如果没有预先设定z-index,那么缺省是0,后定的元素在最上面
设定z-index只对定位设定为relative,absolute,fixed三种有用,对标准流,浮动无效