一.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
1.浮动元素会脱离正常的文档流，它会根据float的属性向左或向右移动，直到遇到有边框的或另一个浮动元素才会停止。
2.对父容器的影响：元素的浮动会让没定位高度的父容器失去高度
对其他浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
对普通元素的影响：普通元素会占据浮动元素原来的位置，元素的浮动会脱离正常的文档流，会覆盖住普通元素
对文字：浮动元素不会覆盖文字，会使文字围绕这浮动元素布局
二.清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动指消除浮动元素对其他元素的布局影响，可以用clear属性清除浮动
方法：
1.在浮动元素后面添加一个子元素div，给其设置clear：both属性
也可以用CSS属性完成：clearfix{*zoom: 1;}
.clearfix:after{content: ””; display: block; clear: both;}
2.利用BFC清除浮动：overflow：hidden；auto；scroll
display：table-cell；inline-block
position：absolute；relative；
三. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
1.相对定位：relative 相对于元素原来的位置进行定位
2.绝对定位：absolute 相对于有定位属性的父元素或根元素进行定位，
3.固定定位：fixed 相对于浏览器窗口进行定位
4.inherit：从父元素继承；
四.z-index 有什么作用? 如何使用?
在定位元素中设置标签可以覆盖，z-index就是设置标签在Z轴方向上的位置，数字越大，标签被放置在越上面
通过给元素设置z-index值使用，例如z-index：99
五.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position：relative是相对于元素本身的位置进行偏移，偏移之后不影响别的元素的位置，之后覆盖别的元素，而负margin使元素发生偏移则会影响别的元素的位置，会把别的元素挤开
六.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC是块级格式上下文 。
给元素添加float、display:inline-block/table-cells/table-captions、overflow：hidden/auto、position：absolute/relative会生成BFC
作用：Block Formatting Context提供了一个环境，HTML元素环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
1.它可以清除浮动
2.它可以避免外边距合并
七.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
1.当相邻在垂直方向上都有margin属性时，两个元素的上下margin会合并，合并后外边距的值为margin值较大的那一个值，
2.如何不让相临元素外边距合并：1.设置border属性
2.使用BFC
3.如果是父子元素，可以给父元素添加一个padding属性
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: blue;
margin: 30px;
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
网友评论