关于CSS浮动定位的问答
2017-03-29 本文已影响0人
ninc
- 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浏览器按html文件顺序一个个摆放元素时，当执行到浮动元素时，会将它从正常的文档流中删除，按照float的要求向左或向右摆放元素，直到碰到父元素的边界。若父元素没有设置宽度，则会一直向左或向右到浏览器窗口的边界。
- 对父元素：如果父元素未设置高度，且子元素都是浮动元素，就会发生父元素高度塌陷的情况，即父元素认为它不包含任何元素，高度变为0。
- 其他浮动元素：其他浮动元素能感受到别的浮动元素的存在，在父元素宽度不够时会发生浮动元素下移现象，如果浮动元素的高度不同,那么向下移动的时候可能被卡住。
- 普通元素：普通元素察觉不到浮动元素的存在，在布局时不考虑浮动元素布局。
- 文字：文字能考虑到浮动元素的存在，在布局时会绕过浮动元素。
- 清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动指的是解决子元素都是浮动元素时父容器高度塌陷问题。 - 可以在父元素的最后加上一句<div style="clear:both;"></div>，优点是有效的清除了浮动，缺点加上了一句无意义的语句，容易使人出现理解困难。
2.可以对父元素设置float为left或right，局限性时是使父元素也成为浮动元素，父元素的父元素可能发生高度塌陷。 - 可以对父元素设置overflow为hidden、auto、scroll其中的值，局限性时当父元素时导航栏或者需要展开的元素时，功能会失效。
- 可以对父元素设置display为table-cell、table-caption、inline-block其中的值，局限性时这样设置时，父元素的宽度如果未设置的话会发生缩短。
- 可以对父元素设置position为absolute或fixed，局限性是改变了父元素的定位方式，使父元素从正常的文档流中删除，位置能人为手动调整。
- 通用的清除浮动方式：
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
- 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit：定位方式从父元素继承
- static：默认的定位方式，由正常的文档流分配位置
- relative：相对定位方式，先由正常的文档流分配位置，而后相对于这个位置偏移，一个萝卜一个坑，坑在原位，萝卜跑路了。一般用来微调图片等。
- absolute：绝对定位方式，从文档流中删除，相对于除static定位以外的第一个祖先元素（如祖先元素都是static定位方式，则相对于html元素）进行定位，当元素设置了top,left（right,bottom同理）的值时，参考点为内边框；若未设置，参考点为内padding。在设置一个精确定位的元素时使用。
- fixed：绝对定位方式，从文档流中删除，相对于浏览器窗口放置元素，不随网页变换改变位置。一般在设置弹窗，“回到顶部”的栏的时候使用。
- z-index 有什么作用? 如何使用?
z-index可用来设置元素z值的大小，可设置正负的z值。z值大的元素会覆盖z值小的元素。一般 z-index会在具有很多绝对定位元素时使用。 - position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
形象的说，一个萝卜一个坑，position:relative是坑没走，萝卜移动了，对其他的元素无影响；而负margin是坑和萝卜一起走了，对其他的元素会有影响。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC是块元素格式化文本，可通过设置float为left或right，设置overflow为hidden、auto、scroll其中的值，设置display为table-cell、table-caption、inline-block其中的值，设置position为absolute或fixed来生成BFC。不同的BFC之间不会发生外边距合并，BFC不会重叠浮动元素且可以包含浮动（清除浮动，防止父容器塌陷），问题2的方法2~5就是通过BFC清除浮动。 -
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
当垂直方向上外边距相互触碰（没有边框和内边距阻隔）时，会发生外边距合并，合并方式为选择两者中更大的那个外边距作为两者共同的外边距。想要不让相邻元素外边距合并可以给其中加上内边框或边框阻隔，也可以使用创建BFC，阻止外边距合并。
范例：
Paste_Image.png
这是当时困惑我好久的问题，“风景如画”明明设置了16px的外边距，下外边距却消失了，但其实是发生了外边距合并，“风景如画”下外边距与整个框的下外边框0发生了合并，见下图。
Paste_Image.png
