盒模型相关总结

什么是盒模型

盒模型是csss布局的基础，就是把HTML页面中的布局元素看作一个矩形的盒子，也就是一个盛装内容的容器。csss盒模型本质是一个盒子，封装周围HTML元素。csss规定所有的元素可以拥有像盒子一样的外形和平面空间，即都包含边框（border）、边界（margin）、补白（padding）、内容区域，这就是盒模型。

盒模型的相关元素

1、padding的使用方法

说明

填充：padding在设定页面中一个元素内容到元素的边缘（边框）之间的距离。也称补白。

用法

（1）用来调整内容在容器中的位置关系。

（2）用来调整子元素在父元素中的位置关系。（padding属性需要添加在父元素上）

（3）padding的值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加padding属性值

属性值的用法

（1）四个值： padding: 0px 0px 0px 40px;（上 右 下 左）

（2）三个值： padding: 10px 20px 30px;（上 左右 下）

（3）两个值： padding: 10px 20px;（上下 左右）

（4）一个值：padding: 10px;（元素四周填充为2px）

（5）可单独设置一个方向的填充：

​ padding-top: 10px;（上填充）

​ padding-bottom: 10px;（下填充）

​ padding-left: 10px;（左填充）

​ padding-right: 10px;（右填充）

2、margin的使用方法

说明

边界：margin在元素外边的空白区域。被称为边距。

属性值的用法

（1）四个值：margin: 0px 0px 10px 0px;（上 右 下 左）

（2）三个值： marhin: 0px 10px 0px;（上 左右 下）

（3）两个值：margin: 0px 10px;（上下 左右）

（4）一个值：margin: 10px;（元素四边边界为10px）

（5）可单独设置一个方向的填充：

​ margin-top: 10px;（上边界）

​ margin-bottom: 10px;（下边界）

​ margin-left: 10px;（左边界）

​ margin-right: 10px;（右边界）

3、border的使用方法

说明

边框：boader在元素外边框与补白中间的区域

属性值的用法

（1）基本用法：border: 1px solid black;（第一个值为边框四周宽度，第二个值为边框线属性， 第三个值为边框线颜色）

（2）可单独设置一个方向的边框：

​ border-top: 1px solid black;（上边框）

​ border-bottom: 1px solid black;（下边框）

​ border-left: 1px solid black;（左边框）

​ border-right: 1px solid black;（右边框）

（3）常用边框线属性：

​ solid——实线

​ dotted——点线

​ double——双线

​ inset——内嵌3D线

​ outset——外嵌3D线

（4）单独设置边框宽度： border-width: 10px;

（5）单独设置边框线样式： border-style: solid;

（6）单独设置边框线颜色：border-color: blue;

盒子实际大小

宽 = 左右margin + 左右padding + width，

高 = 上下margin + 上下padding + height