描述 CSS 盒子模型布局并简要描述其每一个部分

2018-12-29

CSS 盒子模型（Box Model）布局包含内容（content）、内边距（padding）、边框（border）、外边距（margin）四个部分。

content：盒子内部填充元素内容（例如文本、图像或视频播放器等）的区域。他的大小为 content-box 的宽和高。相关 CSS 属性为 width，min-width，max-width，height，min-height，max-height。
padding：内容周围的区域。他的大小为 padding-box 的宽和高。由 CSS 中的 padding 属性控制。
border：边框，在内边距的外围。他的大小为 border-box 的宽和高。由 CSS 中的 border 属性控制。
margin：最外围的透明区域，即边框外围区域。他可以将 DOM 中相邻的元素分开。他的大小为 margin-box 的宽和高。由 CSS 中的 margin 属性控制。

alt text

在前端面试中这是一个非常常见的问题，他虽然很简单，但你是否知道及掌握却很重要 ⚠️
标准盒模型：属性width / height 只包含content，不包含 border 和 padding
IE 盒模型：属性 width / height 包含 content + padding + border
IE6/7/8 中 DOCTYPE 缺失会触发 IE 盒模型，标准中可使用 box-sizing 属性进行控制：content-box | border-box | inherit
JavaScript 如何设置和获取盒模型对应的宽和高
element.style.width / height 只能取到行内样式的宽和高，style 标签中和 link 外链的样式无法获取
window.getComputedStyle(element).width / height 获取元素的宽或高：content + padding + border + 'px'
dom.getBoundingClientRect().width / height 同上，但返回值为数字类型，不含 px
页面中多个元素的流布局属于格式化上下文（formatting context），这个元素可能是块元素也可能是行内元素。块元素的为 BFC（Block formatting contexts），行内元素的为 IFC（Inline formatting contexts）。常见场景如：垂直块元素 margin 重叠；行内元素高度由 line-height 决定等。BFC 和 IFC 规则不需死记硬背，在编码过程中注意调试和灵活运用即可。

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！