这是针对新人的 CSS 入门级教程-盒子模型

CSS适合HTML一起使用的，首先你要对 HTML 有一定的了解，知道各个 html 标签的用法，如果对 HTML 还不了解，学习下 HTML 的基础知识，再来看CSS的内容，在这里既可以当做入门教程，也可以用作参考手册。

盒模型（box model）

html页面中任何元素都是一个盒子（box）。学好css的基础是理解盒模型的工作原理。

内容和大小

盒子的大小可以有两种控制方式：

• extrinsic sizing: 显示设置盒子的width和height为固定尺寸，例如设置width和height为400px、600px，那么盒子的大小就固定了。
• intrinsic sizing: 不设置盒子的大小，或者设置盒子的大小为非固定尺寸，例如设置width和height属性值为min-content或者max-content, 此时盒子的大小由浏览器决定，浏览器会根据内容自动调整盒子的大小。

盒模型的区域

盒模型由图中几个区域组成，每个区域都有不同的作用。

盒模型组成：Margin box(外边距)、Border box(边框)、Padding box(内边距)、Content box(内容)

• content box（内容）：子元素放置的地方，前面讲过内容可以控制父元素盒子的大小。
• padding box（内边距）：内边距是环绕在内容外围的一个区域，当你设置盒子的背景background时，内边距区域也会受到影响。当设置overflow: scroll时，并且出现了overflow的情况，滚轮也会占据这一块区域。
• border box（边框）：表示盒子的边框，通过border属性可以设置盒子的边框样式。
• margin box（外边距）：盒子外围的一块区域，通过margin属性可以设置盒子的外边距。outline和box-shadow会占据这块区域，设置外边距的样式并不会影响盒子内部内容。