重要链接
开始
每个元素被视为一个“盒子”，每个盒子都有这几部分组成：
- content：盒子的内容显示区域，子元素就在这里
- padding：border与content之间的区域
- border：盒子的”边界“，盒子的定义在此止步
- margin：盒子与”外界“的区域
盒子的大小由什么决定
一个盒子的大小，主要由于对盒子自身的”限制“（extrinsic sizing），或者由content内的子元素大小（intrinsic sizing）与行为决定的
其中”限制“指的是：如果盒子明确限制了宽度，高度，无论子元素尺寸多大，都不会撑开这个盒子，而是会溢出（overflow）。 还有一种“限制”是：看似盒子没有给定限制的尺寸，但是由代理样式表默认赋值给一些属性，让这个盒子有了限制的大小，只不过这个大小由父元素决定。例如div，虽没给任何属性，但会默认display为block的，block会导致宽度由父元素决定，高度由盒子子元素的高度决定
如果没有限制父盒子的尺寸（例如width:min-content），那么其大小就会由子元素的大小决定。
溢出行为
在父盒子限制大小，子元素超过父元素的尺寸过后，会溢出父盒子（overflow）如果设置了溢出规则，例如 overflow: auto 或 overflow: scroll，浏览器自动出现的滚动条是会出现在content和padding之外，border之内的。
Controll the box model
每种浏览器都有各种的用户代理样式表（use agent style sheet），这个表用于给每个没有设置样式的盒子设置默认值，
例如他会给使用display的元素设置默认值，div元设置为block，li设置为list-item，span设置为inline
盒子宽度的定义会根据box-sizing的属性不同，而不同
在box-sizing为content-box的时候，盒子定义的width为content的宽度，但实际的宽度为content+padding+border的长度
但在box-siing为border-box的时候，盒子定义的width为content+padding+border，也是实际看到的宽度
用户代理表所设置的默认box-sizing为content-box，但现在常用的是border-box