浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征
- 元素浮动之后不占据原来的位置
- 浮动的盒子在同一行上显示
- 行内元素浮动之后转换为具备有块级元素的特征，可以设置宽高
影响
如果父容器的子元素都是浮动元素，如果父容器没有定义高度，那么父容器会失去高度（即父容器高度坍塌），在浮动元素之外。
对于普通元素，普通元素会感知不到浮动元素当然存在，如果宽高合适，后面的元素会占据浮动元素原来的位置
对于文字来说，能感知到浮动元素的存在，如果位置足够，就能够实现文本绕图的效果
清除浮动指什么? 如何清除浮动? 两种以上方法
方法一：使父元素形成新的BFC，可以使用
overflow：hidden/auto/scroll
display:inline-block
float:left/right等等
方法二：使用伪元素清除浮动,如
.clearfix{zoom:1;}
.clearfix:after{
content:"";
display:block;
visible:hidden;
clear:both;
}
然后在需要清除浮动的元素进行调用。
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
-
inherit 规定应该从父元素继承 position 属性的值
-
static默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
-
relative生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px会使元素以原位置为基础向右偏移20px
-
absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位,元素的位置通过 left, top, right以及 bottom 属性进行规定
-
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
-
stickyCSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置普通流与相对定位
-
CSS有三种基本的定位机制：普通流，相对定位和绝对定位
1.普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
2.相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变
3.绝对定位与固定定位相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样
4.绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位
z-index 有什么作用? 如何使用?
- z-index 属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- z-index有三个属性
1.auto 默认。堆叠顺序与父元素相等。
2.number设置元素的堆叠顺序。
3.inherit规定应该从父元素继承 z-index 属性的值。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置
- margin：除了让元素自身发生偏移还影响其它普通流中的元素
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
-
BFC是指块级元素格式化，在同一个BFC中，元素会遵守一些规则，如从上到下排列，边距合并等，如果是相邻两个元素分别处于两个BFC当中，则一般不会遵循这些规则。
-
生成BFC：
overflow：hidden/auto/scroll
display:inline-block
float:left/right
作用：
（1） 解决margin重叠问题，在同一个BFC中，相邻元素之间的边距会合并，如果把这两个元素分别放在两个BFC中，name他们的边距就不会合并。一般应用于嵌套关系。
（2）清除浮动。BFC不会重叠浮动元素。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 在同一个BFC中，相邻元素之间的外边距会合并，加入分别给两个元素设置同样的外边距，一般会发生重叠，只显示一个元素的外边距大小。若想要时边距不合并，可以把两个元素分别放到不同的BFC中，即在后面的元素构建一个新的BFC。
- html:
<body>
<div class="parent">
<div class="child">绿色</div>
</div>
</body>
- css:
body{
width:300px;
border:1px solid red;
}
.parent{
background:yellow;
margin-top:100px;
}
.child{
background:green;
margin-top:50px;
}
外边距出现合并
我们为父元素添加display:inline-block，这时候就会形成一个新的BFC，边距不会合并。
.parent{
background:yellow;
display:inline-block;
margin-top:100px;
}
网友评论