- 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浏览器按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,阻止外边距合并。
范例:
这是当时困惑我好久的问题,“风景如画”明明设置了16px的外边距,下外边距却消失了,但其实是发生了外边距合并,“风景如画”下外边距与整个框的下外边框0发生了合并,见下图。