CSS浮动定位和BFC简单讲解
2017-09-18 本文已影响0人
饥人谷_Jack
1. 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素会脱离文档流，不占据原来的空间。
- 如果同一父级元素下的所有元素都有浮动，那么父级元素会出现高度塌陷问题。
- 浮动元素遇到父容器的内边框或者其他浮动元素时暂停浮动。
- 浮动元素会覆盖后面的在浮动元素之前所在空间上的其他普通元素。
- 普通流的文本不回占据浮动元素的空间，文本可以感知到浮动元素所在空间，可能会出现普通流的文本围绕在浮动元素周围的现象。
2. 清除浮动指什么? 如何清除浮动? 两种以上方法。
- 清除浮动就是让此元素上、下、左、右方向没有任何其他浮动元素。
- 给浮动元素后面的元素添加{clear: both}可以清除此元素所有方向的浮动。
- 可以给浮动元素的父元素添加{overflow: hidden/auto/scroll}清除高度塌陷的浮动问题。
- 可以给浮动元素的父元素添加::after{content: '';display: block;clear: both}清除高度塌陷的浮动问题。
3. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- {position: relative}相对定位。相对于自己所在的位置进行定位，自己之前所在的空间还存在，只是视觉上进行了偏移。一般情况和position: absolute配合使用。
- {positon: absolute}绝对定位。如果其父元素有position: static定位以外元素，就以其父元素的边框为参照物，如果父元素没有，就一级一级往上查找，如果都没有就以HTML为参照物。绝对定位会脱离文档流，不占据空间。绝对定位可以使用元素水平垂直居中。
- 如果含有positon: absolute的元素参照物是HTML，要设置其上下左右偏移，偏移参照物是html的边框。
- 当父容器里含有绝对定定位元素时，子元素width:100%时，width宽度等于父元素width+padding的宽度。 当父容器里没有绝对定位元素，子元素width:100%时，width宽度等于父元素width的宽度。
- {positon: fixed}绝对定位。相对于浏览器窗口进行绝对定位。如果想达到不管网站往下拉多少，要让一个页面始终保持的一个固定位置，就可以使用positon: fixed绝对定位。
4. z-index 有什么作用? 如何使用?
- z-index可以使用重叠元素按顺序显示，z-index值越大，显示级别越优先，z-index值大的会覆盖z-index值小的元素。
- 如果要使用z-index，此元素必须含有绝对定位元素。
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative使元素偏移只是视觉上的偏移，元素所占的位置没有发生改变，不会对其他元素位置产生影响。
- margin使元素偏移是本身位置的改变，会对其他元素产生影响。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC(Box Formatting Context)块级格式上下文，是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
-
BFC可以解决浮动元素父元素高度塌陷问题。
image.png
image.png
image.png
- BFC可以解决相邻元素外边距重合问题。如果两元素外边距都是正值，取两者值最大的。
image.png
image.png
- 如果相邻元素外边距上下重合，两元素外边距都是负值，取绝对值最大的负向移动。
image.png
image.png
- 如果相邻元素外边距上下重合，两元素外边距都是一正一负，两数值相加的结果就是两元素之间的距离。
image.png
image.png
-
BFC可以解决父元素和子元素外边距重合问题。
image.png
-
BFC可以解决文字围绕的问题。
image.png
7. 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 在相邻两个块级元素处于同一个BFC的情况下，两个元素之间的外边距会重合，两元素之间的外边距距离是其中margin值最大的哪一个。
- 在父元素和子元素都是块级元素处于同一个BFC情况下，父元素和子元素的上方的外边距会重合，外边距距离是其中margin值最大的哪一个。
- 解决外边距重合问题，只要让两个元素处于像个BFC即可解决此问题。
image.png
