盒子模型的应用

目录

1.盒子模型组成

2.边框的使用

（1）border-color设置边框的颜色

（2）border-width设置边框的粗细程度

（3）border-style用来指定边框样式

（4）边框简写

3.外边距的使用

4.内边距的使用

5.盒子模型的尺寸

6.box-sizing

---

1.盒子模型组成

一个独立的盒子模型由网页内容（content）、边框（border）、内边距（padding）和外边距（margin）四部分组成。

（1）网页内容（content）：位于最中间，是网页主要显示的内容。

（2）边框（border）：位于内边距外面。

（3）外边距（padding）：位于边框内部的空隙，是网页内容与边框的距离。

（4）外边距（margin）：位于边框外部的空隙，是边框与周围事物的距离。

因为盒子是矩形结构，所以其边框、内边距、外边距属性可分别对应上（top）、下（botton）、左（left）、右（right）四条边框。

2.边框的使用

边框有三个属性，分别是颜色（color）、粗细（width）和样式（style）。

（1）border-color设置边框的颜色

border-color: coral;

（2）border-width设置边框的粗细程度

thin：设置细的边框。

medium：默认值，设置中等边框，浏览器一般解析为2px。

thick：设置粗的边框。

像素值：具体数值，用于自定义边框的宽度，例如：5px。

border-width: 3px;

（3）border-style用来指定边框样式

none：表示无边框。

solid：表示实线边框。

dashed：表示虚线边框。

dotted：表示点线边框。

border-style: dotted;

（4）边框简写

border: 5px black solid;

3.外边距的使用

外边距位于盒子之外，是指与其他盒子之间的距离。与边框一样，也分上下左右边距，设置方式如下：

margin: 10px  20px 10px 15px;
        /* 上  右   下   左 */

margin除了可以用像素的方式设置外边距，还可以用auto。

margin: 0 auto; /* 让元素水平居中 */

让元素水平居中的条件为：这个元素必须是块级元素，这个元素必须要设置固定宽度。

4.内边距的使用

内边距用于控制内容与边框的距离，以便精准地控制内容在盒子中的位置。

padding: 10px 20px 10px 15px; /* 上 右 下 左 */

5.盒子模型的尺寸

在css中，width和height指的是内容区域的宽度和高度。增加了边框、内边距和外边距后并不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。

盒子模型内盒总尺寸=border（上下/右左）+padding（上下/右左）+内容宽度

盒子模型外盒总尺寸=border（上下/右左）+padding（上下/右左）+margin（上下/右左）+内容宽度

6.box-sizing

css用于事先定义盒子模型的尺寸解析方式，解决了盒子的总尺寸不包括内容宽度还有内边距边框的问题。

语法如下：

box-sizing: border-box|content-box|inherit

border-box盒子的宽度或高度等于元素内容的宽度或高度。

content-box默认值，盒子的宽度或高度=border+padding+（margin）+width/height。

inherit：元素继承父元素的盒子模型模式。