本文笔记基于「千古壹号」的GitHub项目:https://github.com/qianguyihao/web
1.问题
谈一谈你对CSS盒模型的认识?
延伸:
- 基本概念
- 标准盒模型与IE盒模型的区别
- CSS如何设置上述两种模型?
- JS如何设置、获取盒模型对应的宽和高?(难点)
- 根据盒模型解释边距重叠(难点)
- BFC(边距重叠解决方案:难点)
总结:知识点逐条递增,从理论、css、js又回到css理论
2.解决方法
2.1 基本概念
- width( [wɪdθ] )和height:内容的宽度、高度(不是盒子的宽度、高度)。
- padding( [ˈpædɪŋ] ):内边距。
- border:边框。
- margin( [ˈmɑːrdʒɪn]):外边距。
标准盒模型与IE盒模型的区别:
- 标准盒子模型:width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
- IE盒模型:width 和 height 指的是内容区域+border+padding的宽度和高度。
2.2 如何设置两种盒模型
- 除了IE浏览器外,盒子默认为标准盒模型
- 通过box-sizing( [bɑːks ˈsaɪzɪŋ] )设置:
/* 设置当前盒子为 标准盒模型(默认) */
box-sizing: content-box;
/* 设置当前盒子为 IE盒模型 */
box-sizing: border-box;
2.3 JS如何设置、获取盒模型对应的宽和高
1.通过DOM节点的 style 样式获取:只能获取行内样式,有局限性
2.通用型:.getComputedStyle()方法,能兼容 Chrome、火狐。
window.getComputedStyle(element).width/height;
3.IE独有:currentStyle ([ˈkɜːrənt] )
element.currentStyle.width/height;
4.获取一个元素的绝对位置(视窗 viewport 左上角的绝对位置。)
element.getBoundingClientRect().width/height;
2.4 margin塌陷/margin重叠
- margin塌陷:标准文档流中,竖直方向的margin不叠加,只取较大的值作为margin(水平方向的margin是可以叠加的,即水平方向没有塌陷现象)。
- 解决方法:善于用父亲的padding,而不是儿子的margin
<div>
<p></p>
</div>
尝试通过给儿子p一个margin-top:50px;的属性,让其与父亲保持50px的上边距,但结果却是父亲距离网页顶部50px距离
- 原因:父亲没有border,那么儿子的margin实际上踹的是“流”,踹的是这“行”。所以,父亲整体也掉下来了。
- 解决办法:给父盒子(div)加一个border属性
2.5 边距重叠解决方案
1.BFC:Block Formatting Context,块级格式化上下文,可以把它理解成一个独立的区域。
2. 原理(渲染规则):
- BFC 内部的子元素,在垂直方向,边距会发生重叠。
- BFC在页面中是独立的容器,外面的元素不会影响里面的元素,反之亦然。
- BFC区域不与旁边的float box区域重叠。,可以用来清除浮动
- 计算BFC的高度时,浮动的子元素也参与计算。
3.如何生成BFC?
- 设置overflow属性是 hidden或auto。【最常用】
- 设置浮动
- 设置定位属性absolute([ˈæbsəluːt] )或fixed( [fɪkst])
- display为inline-block, table-cell, table-caption, flex, inline-flex
4.解决margin重叠
当父元素和子元素发生 margin 重叠时,解决办法:给子元素或父元素创建BFC。(原理2)
5.清除浮动:将第2个盒子设置BFC.(原理3)
6.儿子浮动了,但由于父亲没有设置高度,导致看不到父亲的背景色(此时父亲的高度为0)
给父亲创建BFC(增加 overflow=hidden属性)即可(原理4)