-
浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
如果父元素原来的没有加浮动属性的元素撑开的，那么当元素加浮动属性后，父元素的高度为0.
普通文档流中的元素不会让位置给浮动的元素，这时可能会发生普通文档流中的元素被浮动的元素覆盖的情况，
文字会围绕这浮动元素，不和浮动的元素抢地盘。
如果很多个元素都设置向左浮动，他们会排成一列，直到排满一行无法在排列之后，会换行排列。 -
清除浮动指什么? 如何清除浮动? 两种以上方法
当给元素加上浮动属性后，他可能会覆盖其他的元素，或者和其他没有加浮动属性的元素在同一行，如果我们不想让添加了浮动属性的元素影响到其他元素时，就应该使用清除浮动来消除他(浮动的元素)对其他元素的影响。
第一种方法：给浮动元素的周围添加clear:left或者clear:right属性,注意此种方法消除的是左边有向左浮动的元素或者右边有向右浮动的元素。
第二种方法：使用BFC方式消除浮动，给浮动元素周围的其他元素再嵌套一层div，并设置新增加的div的overflow属性为hidden。(其他能够触发BFC的属性皆可)。 -
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
inherit继承：继承父元素的position属性
static无定位：没有定位，元素出现在普通文档流中，设置top, right, bottom, left不起任何作用。
absolute绝对定位：生成绝对定位的元素，相对于第一个position的值不是static的父元素定位
relative相对定位：生成相对定位的元素，相对于自己正常应该所处的位置进行定位
fixd固定定位：固定在浏览器的窗口中，不会随着窗口的滚动和产生位置变化，相对用浏览器窗口进行定位。
sticky混合定位：当元素本身的位置应该在窗口时，采取相对定位。当元素在窗口中不可见时，采取固定定位。 -
z-index 有什么作用? 如何使用?
控制元素层叠顺序，z-index解决重叠时的显示次序问题
所有的层都可以用一个整数(z轴顺序)来表明当前层在z轴的位置。 数字越大， 元素越接近观察者。Z轴顺序用CSS的[z-index]属性来指定。
使用方法：
先设置元素的定位不是static（继承父元素也可以，但是不能为static），再设置z-index的值。老师说并不是z-index的值越大就一定能显示到最前面，我查阅了一些文章发现，这种情况跟父元素的z-index的值也相关，如果是同级的元素，z-index的值越大显示的越靠近用户。 -
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative是让元素自己的位置发生了变化，脱离了普通文档流，可以遮挡其他元素。
负margin没有使元素脱离普通文档流，不会遮挡其他元素的正常显示。 -
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
块级格式化上下文，是一块页面上独立的区域(容器)，可以是一个block，可以一个inline-block元素，或者是一个具有浮动属性或者绝对定位(绝对定位，固定定位)的元素，overflow属性不是visiable的元素。
如果想创建BFC，有以下几个方法：
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
这几种方法都会引发一些我们不愿意见到的事情，具体的使用针对不同的情况而定。
BFC的作用：
1.阻止垂直外边距折叠
2.不会重叠浮动元素
3.可以包含浮动
4.清除浮动
举例说明作用1:阻止垂直外边距折叠
创建了三个div块并且给他们设置了margin: 20px的属性，但是发现上下的间距重合了，这是我们要给他们设置不同的BFC就可以消除垂直外边距折叠。
一般情况
我们只给AB两个div的外面各自加了一层div，为他们各自创建了一个BFC，使他们不在一个div下。
创建不同BFC之后
原理很简单，我们可以当做每个BFC都有一套自己的规则，不能互相影响，BFC像是一道墙，将他们分隔开。
- 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
会出现外边距合并的场景：
1.同一个BFC中的处于普通文档流中的垂直相邻元素外边距会合并。
2.块级父元素和他的第一个、最后一个子元素
3.空的块级元素。
外边距合并规则：
1.当两边的margin都是正数时，取两者中较大的值；
2.当两边的margin值都是负数时，取其中绝对值较大的负向位移；
3.当两边的margin值有正有负的时候，先取绝对值较大的负值，然后和正的值最大的相加。
4.所有相邻的元素要一起参与运算，不能分步进行。
不让相邻元素外边距合并的方法：为他们各自创建一个BFC，使他们不在一个BFC中。
HTML代码：
<div class="ct">
<div class=box>
<h5>111</h5>
</div>
<div class=box>
<h5>222</h5>
</div>
</div>
CSS代码：
.ct {
width: 600px;
height: 600px;
border: 1px solid;
}
.box {
background-color: #0f0;
/* overflow: hidden; */
margin: 100px;
}
h5 {
background-color: #00f;
margin: 100px;
}
按照我们的设想，h5用100px的外边距，.box也有100px的外边距，上方和下方应该都是100px，而中间应该有200px的外边距才是。
这时我们可以看到，上中下的边距是一致的，这是因为子元素h5和父元素div之间发生了父子外边距合并
网友评论