什么是盒模型
盒模型是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