盒子模型

什么是盒子模型

CSS将网页元素都看成一个个盒子。

image.png

边框

边框有3个属性，分别color、width(粗细)和style(样式)
样式属性必须有。

border-color(边框颜色)属性设置

image.png

border-width（边框的粗细）常用属性值
(1) .thin:细
(2) .medium：默认值
(3) .thick：精
(4) .像素值
它也分为上下左右边框的粗细设置，如下所示：

image.png

border-style（边框类型）的常用属性值
(1) .none
(2) .hidden
(3) .dotted
(4) .dashed
(5) .solid
(6) .double

border简写
同时设置边框的颜色、粗细和样式
注意：这三个属性没有先后顺序，建议的顺序：粗细、颜色和样式

例：border：#000 10px solid；

例：

image.png

外边距

外边距（margin）位于盒子模型边框外，指与其他盒子之间的距离，也就是网页中元素与元素之间的距离。

外边距属性设置方法

属性
margin-top
margin-right
margin-bottom
margin-left
margin
示例
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px; //上下，左右
margin :3px 5px 7px; //上，左右，下
margin :8px;
特别说明
在CSS中，margin除了使用像素值设置外边距之外，还有一个特殊值—auto.这个值通常用在设置盒子在它父容器中居中显示时才使用。

内边距

内边距（Padding）用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置

内边距的属性及设置方法

(1) .padding-left
(2) .padding-right
(3) .padding-top
(4) .padding-bottom
(5) .padding
3.示例
(1) .padding-left:10px;
(2) .padding-right: 5px;
(3) .padding-top: 20px;
(4) .padding-bottom:8px;
(5) .padding:20px 5px 8px 10px ;
(6) .padding:10px 5px;
(7) .padding:30px 8px 10px ;
(8) .padding:10px;

盒子模型的尺寸

盒子模型总尺寸=border-width+padding+margin+内容宽度

image.png