CSS盒模型

记忆：

常用的 border-box 是IE盒模型，padding/border 的变化会修改其 width 内在盒子。

盒模型

页面就是由一个个盒模型堆砌起来的， 每个HTML元素 都可以叫做 盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。

补充：
每个元素的盒子由内容两层组成：外在盒子和容器盒子（内在盒子）

平时：
display: inline-block实际是display: inline-block的简写
display: block实际是display: block-block的简写
display: table实际是display: block-table的简写

问：width/height 作用在哪个盒子上？
答：内在盒子，也就是 content

20190302-12:54于文二路博库书城：
暂时理解盒模型由： margin + 外在盒子 + 容器盒子组成
应该不对吧？

20190302-15:48：
"内在盒子" 又被分成了 4 个盒子，分别是 content box、padding box、border box 和 margin box。

屏幕快照 2019-03-02 下午3.55.19.png

屏幕快照 2019-03-02 下午3.56.11.png

“margin 的背景永远是透明的”!!!

对于块状元素，如果设置width：
1）流动性丢失
对于块状元素，如果 width:auto，则元素会如水流般充满整个容器，而一旦设定了 width
具体数值，则元素的流动性就会被阻断，因为元素给定宽度就像河流中间竖了两个大闸一样， 就没有了流动性。尤其宽度作用在 content box 上，更是内外流动性全无，如图 3-21 所示。
这世界上任何事物，一旦限死了，就丧失了灵活性，其发展潜力及作用范围就会大大 受限。
长江为何生机勃勃数千年，就是因为滔滔江水，奔流不息。CSS 的流动性也是其生机蓬勃 之本，如果直接宽度设死，流动性丢失，在我看来，就是江河变死水，手机变板砖。这就是我 提出 “无宽度准则”的原因— 布局会更灵活，容错性会更强。

屏幕快照 2019-03-02 下午4.06.49.png

(2)与现实世界表现不一致的困扰。
包含 padding 或 border 会让元素宽度变大的这种 CSS 表现往往会让 CSS 使用者困惑: 我设置宽度为 100 像素，其实是希望整个最终的宽度是 100 像素，这样才符合现实理解嘛。

或许是因为 CSS 2.1 是面向内容(图文信息)设计的，所以，width 设计成了直接作用在 content box 上。

屏幕快照 2019-03-02 下午4.22.39.png

问：为何没有box-sizing: margin-box?
答：

• margin-box本身不会改变元素尺寸，其本身没有存在的意义。而border、padding 不一样
• 另外一个原因牵扯到语义。如果 box-sizing 开了先河支持了 margin-box，margin box就变 成 了 一 个“ 显 式 的 盒 子 ”，你 让 background-origin 等 属 性 何 去 何 从 ，支 持 还 是 不 支 持 呢 ?“ margin 的背景永远是透明的”这几个大字可是在规范写得清清楚楚，难道让背景色在所谓的 margin box 中也 显示?

关于“流”的重点：CSS 的默认流是水平方向的，宽度是稀缺的，高度是无限的。

分类

标准盒模型（W3C）
内容大小就是content

image.png

IE盒模型
内容大小是：padding+border+content

image.png

切换

使用box-sizing可以切换两者类型的模型content-box、border-box

JS如何获取和设置Box宽高

1、
兼容性好(非IE)：window.getComputedStyle(dom).width/height
仅限IE：dom.currentStyle.width/height

var obj = document.getElementById("test");

if(window.getComputedStyle){
  // window.getComputedStyle(obj).width
}else{
  // obj.currentStyle.width
}

2、dom.style.width/height（只能用于行内元素）

3、dom.offsetWidth/height（box-sizing：border-box；下）

4、dom.getBoundingClientRect().width/height !!!!!
这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

ps：能获取元素在页面可视区域的坐标

这些盒子如何摆放呢？

根据：块级格式化上下文和行内格式化上下文
盒子在摆放过程中，会通过盒的类型生成格式化上下文。

块级格式化上下文：Block Formtting Content（BFC）
规定了内部的块级盒如何布局，并且使该盒子在页面上形成一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

margin塌陷的解释

所谓的塌陷其实是两个BFC的相邻盒或者父子盒相互作用时产生的。
在形成BFC的两个盒子会取两个盒子相邻边的最大margin作为相邻边的共用margin。

BFC块级格式化上下文如何产生

属性值为下面时，box会产生BFC：

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

元素浮动时BFC的应用

浮动元素会从正常文档流中删除，这也是为什么其它正常元素会看不见浮动的原因，也是为什么有父级塌陷的原因
清除浮动一种方法是使用overflow：auto/hidden，使用后整体形成了BFC，相当于清除了浮动。