1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
-
浮动元素特征：
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
浮动元素后面的内联元素会向此浮动元素的外边距靠齐 -
影响：
对父容器：由于脱离了正常流，所以无法撑开父元素
对其他浮动元素：
浮动方向相同：会紧跟在靠前的浮动元素后面
浮动方向相反：互不影响
当空间不足时，后来的浮动元素会被挤到下一行去
对普通元素：
块级元素：会覆盖块级元素，但是元素内的文字是可以看到浮动元素的，将环绕在浮动元素周围
行内元素：元素会环绕浮动元素排列,文字并不会收到浮动影响
2、清除浮动指什么? 如何清除浮动? 两种以上方法
- 浮动会造成父容器高度坍塌，对父元素后边的元素造成定位模糊，因此要清理浮动。
- 清除浮动：
（1），使用带clear属性的空元素，在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
（2），给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
（3），给浮动元素的容器一个添加伪元素::after,设置content为空，设置清除浮动，display设为block。
3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
（1）静态定位：position:static
默认参数，默认布局方式；
（2）相对定位：position: relative
相对自己默认位置定位；一般作为绝对定位的元素参考点，或者页面图片的小偏移。
使用场景：在自身基础上调整位置；
（3）绝对定位：position: absolute
绝对定位元素脱离正常文档流，相对其设置了position为static以外的参数的父元素，若没有，就相对于页面左上角；
使用场景：部分账户头像红点提示角标、元素的水平垂直居中。
（4）固定定位：position: fixed
相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。
使用场景：一些网站常用的“返回顶部”，某些广告。
（5）粘性定位：position: sticky
是相对定位和固定定位的结合。默认情况下表现为相对定位，当浏览器窗口顶端与元素的距离等于 top 属性的值时，转变为固定定位。
使用场景：产品类网站购物导航条/介绍导航条。
4、z-index 有什么作用? 如何使用?
z-index 属性设置元素在Z轴方向上的堆叠顺序。兄弟元素之间数值越大，元素越靠前；父元素设置z-index时，先比较父元素。可设置负的 z-index 属性值。Z-index 仅能在定位元素（position:relative/absolute/fixed）上奏效。
5、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
- 负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。
6、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 可以生成BFC的场景：根元素；float属性不为none；position为absolute或fixed；display为inline-block, flex, 或者inline-flex；overflow不为visible。
- BFC作用：清除内部浮动；防止内部垂直margin重叠；内部浮动元素与正常元素不重叠。
7、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 同属于一个BFC时，两个元素可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
- 解决margin重叠问题：使它们不在同一个BFC，对于两个相邻元素来说，意义不大；对于嵌套元素来说，把父元素设为BFC，子元素的margin就不会和父元素的margin发生重叠。
父子外边距合并如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
border:1px solid;
}
.ct {
width: 300px;
height: 200px;
background: yellow;
margin: 30px;
}
.child {
width: 100px;
height: 100px;
background: red;
margin: 50px;
}
</style>
<body>
<div class="ct">
<div class="child"></div>
</div>
</body>
</html>
测试01.png
解决父子外边距合并：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
border:1px solid;
}
.ct {
width: 300px;
height: 200px;
background: yellow;
margin: 30px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
background: red;
margin: 50px;
}
</style>
<body>
<div class="ct">
<div class="child"></div>
</div>
</body>
</html>
测试02.png
网友评论