1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素会脱离普通文档流,直到碰到父元素边框;
<strong>对父容器影响</strong>:父容器的高度会塌陷,如果子元素全部浮动,视觉上看父容器没有包住浮动元素;
<strong>对其他浮动元素影响</strong>:浮动元素会水平排列,如果包含块太小,浮动元素会向下移动,若浮动元素高度不同会卡住;
<strong>对普通元素影响</strong>:普通元素位置会变化,或者被浮动元素覆盖;
<strong>对文字影响</strong>:文字能感知浮动元素存在,会围绕浮动元素
2.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动是解决元素浮动后出现的问题;
方法:
1.在相同父容器最后添加一个空div,设置clear:both清理;这个方法会增加无意义的标签;
2.BFC清理浮动,利用BFC特性达到清除浮动的效果
局限性:BFC使用float时候会使父容器长度缩短,而且父容器的父容器也需要float;overflow属性会影响滚动条和绝对定位元素;position会改变元素定位方式;display低版本IE不支持问题。
3.利用css特性清除浮动
.clearfix{
zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:both;
}
3.有几种定位方式,分别是如何实现定位的,参考点是什么,使用场景是什么?
- static,默认值,没有定位,元素出现在正常的文档流中(设置top、bottom、left、right、z-index无效),由元素在html中的位置决定位置;
- relate,相对定位,使用position:relation,通过设置垂直或水平位置实现定位,相对元素本身移动,无论元素是否移动都占据原来空间;
- absolute,绝对定位,相对于距离最近的非static祖先元素位置决定,如果没有已定位的祖先元素,那么相对于初始html定位,决定定位元素脱离文档流,不占据空间,可以设置z-index属性控制叠放顺序,值越高,位置越上;
- fixed,生产绝对定位,相对于浏览器窗口定位
4.z-index 有什么作用? 如何使用?
z-index设置元素层叠顺序,如果想让一个元素位置在前面,可以设置z-index值控制,z-index值越高,位置越上。
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
两者都可以使元素偏移,position:relative偏移后元素占据原来空间,不影响其他元素位置而负margin不占据原来空间,脱离普通文档流。
6.BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明
BFC是块级格式化上下文;对元素设置浮动、绝对定位(绝对定位、固定定位)元素、块级容器(如inline-block、 table-cell、table-caption),overflow取值visible以外的块级盒子,会生产BFC。
BFC特性:
1.会阻止外边距折叠;
2.不会重叠浮动元素;
3.包含浮动元素。
因为以上三个特性,BFC可以解决外边距重叠问题,可以清除浮动。
7.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例
当两个垂直外边距相遇时,会形成一个外边距,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。让两个相邻的元素在两个不同的BFC里,这样可以阻止外边距合并。
父子外边距合并:
外边距合并