记12月9日作业

2016-12-13 本文已影响0人 18K纯帅咸鱼

浮动元素有什么特征？

浮动元素

浮动元素脱离正常的文档流；
设置浮动元素之后，不浮动的元素则不会感知到浮动元素的存在，则会覆盖浮动元素所处的位置。
浮动元素可以安放在父容器的左右俩端。

对父容器、其他浮动元素、普通元素、文字分别有什么影响？

对父容器影响：若是未设置父容器的高度值，则会造成父容器塌陷（原因：父容器是依靠其子元素或内容撑开高度，而浮动元素无法被父容器所感知，则造成塌陷。）
对其他浮动元素影响：若是父容器设置了足够的宽度，则浮动元素会不断依次排列；
对普通元素影响：普通元素无法感知浮动元素的存在，则会挤占浮动元素所在的位置，发生重叠；
对文字的影响：文字可以感知到浮动元素的存在，则会围绕浮动元素。

清除浮动指什么？

清除浮动是指：解决父容器无法感知浮动元素而造成的塌陷。
如何清除浮动？

设置父容器的固定宽高：
如图

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的作用：