CSS盒子模型

---

盒子模型

---

CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。

如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。

我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

一个盒子(标签)我们会分成4个部分：
内容区(content)
内边距(padding)
​边框(border)
外边距(margin)

---

内容区

---

如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的;width和height两个属性可以设置内容区的大小而不是整个盒子的大小;width和height属性只适用于块标签或行级块标签。

---

内边距

---

就是内容区到边框之间的距离;

会影响盒子的大小。

padding-left/right/bottom/top; 用这四个属性设置左右下上四个方向的内边距。

例如:padding: 10px;上下左右内边距分别为10个像素;


padding: 10px 5px;上下内边距分别是10个像素； 左右内边距分别5个像素。

padding: 5px 10px 15px 20px; 上方内边距5个像素， 右边内边距10个像素； 下方内边距15个像素； 左边内边距20个像素。

---

边框

---

就是标签的最外层的框 ;也是计算在标签大小内的。

使用border属性来设置盒子的边框：

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。

border-top/left/right/bottom分别指定 四个方向的边框。

边框的样式：dotted（点线） ；dashed （虚线）； solid （实线）； double （双线） ； groove （槽线）。

border-radius设置四个角为圆角边框；

border-top-left-radius设置左上为圆角边框。

标签实际大小 = 内容区 + 内边距 + 边框。

---

外边距

---

外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的 。

margin-top/right/bottom/left；值可以为负值；

margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等.垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。

外边距不会影响盒子的整体大小，但是会影响盒子的位置。

写代码时清除浏览器默认标识：
可使用：

*{

margin: 0;

padding: 0;

}

---