CSS基础之盒子模型

CSS基础之盒子模型

一、盒子的介绍：

页面中的每个标签都可以看成是一个盒子，以盒子的视角来进行布局。

盒子的组成：

内容、内边距、外边距、边框；

1、内容(content)

内容就是利用宽高设置的内容区域。

2、边框（border）

边框是盒子的边框；可以给边框设置粗细，样式，颜色。可以单个设置，也可以组合设置。

border: 1px solid #000;

3、内边距（padding）

内边距是边框和内容区域之间的距离，可以组合写，也可以单独设置。

padding-top: 14px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 14px;

4、外边距（margin）

外边距是边框以外的距离，设置方式和padding一样，可以组合写，也可以单独设置。

注意：

1、border和padding都会把盒子撑大，如果不想把盒子撑大就给盒子加上下面的属性即可。

box-sizing: border-box;

2、垂直布局时块元素之间的margin会合并，上下两个都设置margin的时候，值大的生效，另一个不起作用。

3、相互嵌套的块元素，子元素设置margin-top会作用在父元素上，导致父元素一起向下移动。

解决方案：给父元素设置overflow:hidden

4、行内元素的margin和padding只有水平方向生效，垂直方向设置行高即可。