了解 CSS 盒模型

一

css盒子模型由两个盒子组成，外盒子，控制是否包裹，内盒子，控制元素的内容。

例如：显示：inline-block，则外框为inline，即不占一行，而block则表示内层元素具有块特性。所以，display:inline实际上是display:inline-inline的缩写，而display:block则是display:block-block的缩写。

两个

所有内盒都有：宽度/高度、padding、border、margin，它们控制盒子的大小。其中，width/height 控制元素内容的大小，padding 元素内容与边框内部之间的距离，border 控制元素外边框的大小，margin 控制与其余部分的距离。元素和背景是透明的。

三

早期，元素占用大小是按照width + 2* padding + 2* border计算的。 Box-sizing：CSS3中推荐使用border-box。该选项使元素的最终宽度高度为设置的宽度/高度，浏览器会根据宽度/高度、填充和边框尺寸自动调整内部元素的大小。