浮动元素有什么特征？
浮动元素
- 浮动元素脱离正常的文档流；
- 设置浮动元素之后，不浮动的元素则不会感知到浮动元素的存在，则会覆盖浮动元素所处的位置。
- 浮动元素可以安放在父容器的左右俩端。
对父容器、其他浮动元素、普通元素、文字分别有什么影响？
- 对父容器影响：若是未设置父容器的高度值，则会造成父容器塌陷（原因：父容器是依靠其子元素或内容撑开高度，而浮动元素无法被父容器所感知，则造成塌陷。）
- 对其他浮动元素影响：若是父容器设置了足够的宽度，则浮动元素会不断依次排列；
- 对普通元素影响：普通元素无法感知浮动元素的存在，则会挤占浮动元素所在的位置，发生重叠；
- 对文字的影响：文字可以感知到浮动元素的存在，则会围绕浮动元素。
清除浮动指什么？
清除浮动是指：解决父容器无法感知浮动元素而造成的塌陷。
如何清除浮动？
-
设置父容器的固定宽高：
如图
1.png
缺点：只适用于一些固定模式大小的布局。
2.为父容器添加overflow属性：
如图：
overflow scrool.png
若是设置为scroll，则父容器的宽高小于浮动元素则会出现滚动条 - 父元素添加一个伪元素，然后清除伪元素的浮动：
清除元素添加伪元素.png
4.非浮动块为父元素，在父元素的底部添加新的空标签，设置属性clear: both或者clear: left或者clear: right将伪元素一起设置为浮动元素；
5.设置为BFC模式
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- relative：相对定位，仍处在文档流中；参考点是本身之前的位置。
- absolute：绝对定位，脱离文档流；参考点是相对于除static定位以外的第一个祖先元素进行定位。
- fixed：固定定位，脱离文档流，参考点是浏览器的窗口，不会因上下滚动而改变位置。
z-index 有什么作用? 如何使用?
因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
设置position:relative元素位置产生变化，但是元素在文档流中位置不变，对后面的元素不会产生影响。
设置负margin会是文档发生偏移，而relative不会发生
如何让一个固定宽高的元素在页面上垂直水平居中?
1.使用绝对定位，top/left偏移的百分比是相对于父容器内容的宽高。
2.margin-top/margin-left是相对于自身元素的宽高。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的中文意思是块级格式化上下文，当元素包含以下其中一种元素的时候，就会形成一种新的块级模式，就称为BFC。
当块级元素设置float：left/right或者overflow：hidden/auto/scroll或者display：table-cell/table-caption/inline-block或者position：absolute/fixed时，生成BFC。
BFC的作用：
-
阻止父子元素外边距合并。
-
清除浮动，包裹浮动元素。
BFC包裹浮动元素.png
-
BFC可以阻止外边距合并。
BFC可以阻止外边距合并.png
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
1.兄弟元素之间外边距合并
外边距合并.png
2.父子元素外边距合并：
BFC阻止父子元素外边距合并.png
如何不让相邻元素外边距合
设置BFC
设置BFC使俩个元素外边距不合并.png
网友评论