1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- CSS的float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素围绕它安放。
- 当元素浮动时，父元素若无设置高度，则不会感知到浮动元素的存在，会发生高度塌陷。
- 多个浮动元素按顺序依次排列，宽度不够时会被排到下一行。
- 普通元素不会感知到浮动元素的存在，会占据浮动元素原来的位置，被浮动元素覆盖。
- 文字可以感知到浮动元素，会挨着浮动元素进行排列，产生字围现象。
2、清除浮动指什么? 如何清除浮动? 两种以上方法
- 在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;
由于在子元素最后添加了空div，并清除了浮动，因此父容器被撑开，实现了在视觉上包围浮动元素的效果。 - 利用BFC来清除浮动。
因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。
可以对父元素设定以下样式之一生成新BFC。
3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- static: 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- relative: 生成相对定位的元素，相对于其正常位置进行定位。还在文档流中，原来所占用的位不会被其它元素所占有。
如，"left:20" 会向元素的 LEFT 位置添加 20 像素。 - absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。如果没有这样的祖先元素，则参照初始块即浏览器视口。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 - fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
4、z-index 有什么作用? 如何使用?
- z-index 属性指定一个元素的堆叠顺序。因为绝对定位的元素脱离了普通流，所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
- z-index有三个属性
auto 默认。堆叠顺序与父元素相等。
number设置元素的堆叠顺序。
inherit规定应该从父元素继承 z-index 属性的值。
5、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative;只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
- margin：除了让元素自身发生偏移还影响其它普通流中的元素。
6、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC是Block Formatting Context （块级格式化上下文）的缩写，它是W3C CSS 2.1 规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
- BFC的作用有：
（1）解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
（2）清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。
7、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 父子元素之间，父元素没有设置border和padding，那么父元素和子元素之间会发生margin合并
- 相邻的块元素之间，同属一个BFC，他们之间也会发生margin合并
- 两个元素不是兄弟元素也不是父子元素，但是他们同属一个BFC，也会发生外边距合并
- 合并规则：
合并的时候取外边距绝对值较大者，如果外边距一正一负，则取他们相加之后的值 - 解决方法：
1、若不想相邻的两个元素margin合并，此时我们只需要把元素放到不同的BFC中。
2、若不想父子元素margin合并，让父元素生成BFC。
![]PPCHRNWT5.png](https://img.haomeiwen.com/i4227224/463ae5460290480e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
网友评论