一、题目:谈一谈你对CSS盒模型的认识
专业的面试,一定会问 CSS 盒模型。对于这个题目,我们要回答一下几个方面:
(1)基本概念:content、padding、margin。
(2)标准盒模型、IE盒模型的区别。不要漏说了IE盒模型,通过这个问题,可以筛选一部分人。
(3)CSS如何设置这两种模型(即:如何设置某个盒子为其中一个模型)?如果回答了上面的第二条,还会继续追问这一条。
(4)JS如何设置、获取盒模型对应的宽和高?这一步,已经有很多人答不上来了。
(5)实例题:根据盒模型解释边距重叠。
前四个方面是逐渐递增,第五个方面,却鲜有人知。
(6)BFC(边距重叠解决方案)或IFC。
如果能回答第五条,就会引出第六条。BFC是面试频率较高的。
总结:以上几点,从上到下,知识点逐渐递增,知识面从理论、CSS、JS,又回到CSS理论。
二、接下来,我们把上面的六条,依次讲解。
问题(1)
content就是内容区域,padding是内边距,margin是外边距,width和height则要根据是什么模型决定
问题(2)标准盒模型和IE盒子模型
CSS盒模型和IE盒模型的区别:
在 标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。问题(3)CSS如何设置这两种模型
备注:我们通常说的盒子默认为标准盒模型。
问题(4)JS如何设置、获取盒模型对应的宽和高
方式一:通过DOM节点的 style 样式获取
缺点:通过这种方式,只能获取行内样式,不能获取内嵌的样式和外链的样式。
这种方式有局限性,但应该了解。
方式二(通用型)
```
// window.getComputedStyle(element).width/height;
111
222
var oDiv1 = document.getElementById("div1");
console.log( window.getComputedStyle(oDiv1).width ) ;
```
这种方式能兼容 Chrome、火狐。是通用型方式。
方式三(IE独有的)
```
//element.currentStyle.width/height;
var oDiv1 = document.getElementById("div1");
console.log( oDiv1.currentStyle.width);
```
和方式二相同,但这种方式只有IE独有。获取到的是运行完之后的宽高(三种css样式都可以获取)。
方式四
```
// element.getBoundingClientRect().width/height;
var oDiv1 = document.getElementById("div1");
console.log(oDiv1.getBoundingClientRect().width);
```
这种方式获得到的宽度是内容content+padding+border
此 api 的作用是:获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。
此 api 可以拿到四个属性:left、top、width、height。
上面的四种方式,要求能说出来区别,以及哪个的通用型更强。
问题(5)margin塌陷/margin重叠
只有在标准文档流中,而且是竖直方向的margin不叠加,只取较大的值作为margin
其他情况比如说,标准文档流的水平方向的margin是可以叠加的,即水平方向没有塌陷现象,and 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有margin重叠的现象的。
1.兄弟元素之间
2.子元素和父元素之间
对于上面那段代码,儿子设了个上外边距10px,那儿子不应该在父元素里面往下窜10px嘛,而且父元素由于上面没给高,所以搞应该是子元素100+margin10 =110px才对呀?然而,现实却是子元素带着父元素一块往下窜了10px,而且父元素高度和子元素一样是100px而不是110px,为啥子嘞?
因为儿子和父亲在竖直方向上,共一个margin,margin塌陷
如果我们给父元素加个边框border
或者我们给父元素设置一个属性:overflow: hidden都可以避免这个问题
此时父亲的高度是110px,这个用到的就是BFC(下一段讲解)。
综上
margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。
所以,如果要表达父子之间的距离,我们一定要善于使用父亲的padding,而不是儿子的margin。
问题(6)BFC(边距重叠解决方案)
1.BFC的概念
BFC(Block Formatting Context):块级格式化上下文。你可以把它理解成一个独立的区域。
另外还有个概念叫IFC。不过,BFC问得更多。
2.BFC 的原理/BFC的布局规则【非常重要】
BFC 的原理,其实也就是 BFC 的渲染规则(能说出以下四点就够了)。包括:
(1)BFC 内部的子元素,在垂直方向,边距会发生重叠。
(2)BFC在页面中是独立的容器,外面的元素不会影响里面的元素,反之亦然。(稍后看举例1)
(3)BFC区域不与旁边的float box区域重叠。(可以用来清除浮动带来的影响)。(稍后看举例2)
(4)计算BFC的高度时,浮动的子元素也参与计算。(稍后看举例3)
3.如何生成BFC
有以下几种方法:
方法1:overflow: 不为vidible,可以让属性是 hidden、auto。【最常用】
方法2:浮动中:float的属性值不为none。意思是,只要设置了浮动,当前元素就创建了BFC。
方法3:定位中:只要posiiton的值不是 static或者是relative即可,可以是absolute或fixed,也就生成了一个BFC。
方法4:display为inline-block, table-cell, table-caption, flex, inline-flex
5.BFC 原理解释说明
(1)解决 margin 重叠
当父元素和子元素发生 margin 重叠时,解决办法:给子元素或父元素创建BFC。
应用原理第二条:BFC区域是一个独立的区域,不会影响外里面的元素。
(2)清除浮动
上图中,由于左侧的小绿块浮动了。所以下面的红色块就上去了,有一部分在绿块下面
如果要解决这个问题,可以将右侧的元素创建BFC,应用原理第三条:BFC区域不与float box区域重叠。解决办法如下:(将right区域添加overflow属性)
(3)清除浮动
现在有下面这样的结构:
上面的代码中,儿子浮动了,但由于父亲没有设置高度,导致看不到父亲的背景色(此时父亲的高度为0)。正所谓有高度的盒子,才能关住浮动。
如果想要清除浮动带来的影响,方法一是给父亲设置高度,然后采用隔墙法。方法二是 BFC:给父亲增加 overflow=hidden属性即可, 增加之后,效果如下:
为什么父元素成为BFC之后,就有了高度呢?这就应用到了原理第四条:计算BFC的高度时,浮动元素也参与计算。意思是,在计算BFC的高度时,子元素的float box也会参与计算。