CSS整理一盒子模型

文章说明，这篇文章主要是整理自己之前学习的内容：CSS盒子模型构成，盒子模型的一些问题，CSS3 box-sizing 属性。

1、盒子模型

盒子模型：element，内容，位于盒子第一层

padding，内边距，位于盒子第二层

border，边框，位于盒子第三层

margin，外边距，位于盒子最外层

当设置盒子的宽度与高度时，设置的即是内容的宽度与高度。

padding具有padding、padding-top、padding-right、padding-bottom、padding-left属性；padding只有一个值时设置上右下左边距一致；padding有两个值时第一个值代表上下边距，第二个值代表左右边距；padding有三个值时第一个值代表上边距，第二个值代表左右边距，第三个值代表下边距；padding四个值时，分别指代上右下左。

border同样具有border、border-top、border-right、border-bottom、bottom-left属性相应的每一边具有border-style与border-color属性：

border-style：

border-color：接受#与name与RGB设置颜色，设置transparent代表边框颜色为透明(后面利用border属性可以画出形状就是这个透明属性的作用)。

margin是盒子模型之间的距离，是盒子外面的，用于隔开各个盒子，进行合理的布局。

2、盒子模型的一些问题

外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并

当两个盒子上下垂直相邻时：发生合并，取较大者。

当一个盒子包含另一个盒子时，并且里面的盒子没有边距和边框隔开，即与外面的盒子直接相邻，发生合并，取边距较大的作为外边距。

设置元素width与height是设置的内容宽度高度，整个盒子的宽度=内容+内边距+边框。

如果想让整个盒子的宽度等于内容宽度，可设置属性CSS3 box-sizing 属性：设置content-box即是CSS2.1规定的；设置为 "border-box"，这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。