盒子模型（及Margin,Border,Padding）

盒子模型

​ 盒子模型(Box Modle)，所有的HTML元素都可以看做是一个盒子。CSS盒模型本质上就是一个盒子，然后用这个盒子来封装HTML标签。

盒子的属性

盒子总共有五个属性：

• width,height(元素的高度、宽度)

• Margin(外边距)

• Border(边框)

• Padding(填充)

盒子宽度 = 宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子高度 = 高度 + 顶部填充 + 底部填充 + 上边框 + 下边框 + 上边距 + 下边距

盒子中的区域

Margin

Margin

Margin属性定义了元素周围的空间。可以单独改变元素的上、下、左、右边距，也可以一起改变。Margin没有背景颜色。

• Margin-top

• Margin-right

• Margin-bottom

• Margin-left

值：

• auto - 设置浏览器边距，取决于浏览器

• length - 以px,pt,cm等单位制定

• % - 定义一个百分比的外边距

Margin的简写属性

margin：50px 50px 75px 80px;

• 上外边距：50px

• 右外边距：50px

• 下外边距：75px

• 左外边距：80px

Border

Border

Border(边框),边框有三个要素：粗细、线型、颜色。

Border属性

Border-style

边框的线型：

Border-width

属性制定四个边框的宽度。宽度设置依然是以px,pt,cm,em等长度进行计算。不过增加了以下三个预定值：thin,medium,thick。

同样边框的宽度也可以四条分别设定。

Border-color

属性设置四个边框的颜色。和background一样可以使用：name(制定颜色名),HEX(#fffff),RGB(255,0,0)等方式进行设定。

每一条边框的颜色也是可以单独进行设置的。

Border的简写属性

border: 5px solid black;

Padding

Padding

Padding定义了元素边框与元素内容之间的空间。

填充也可以选择单一方向进行填充。

• padding-top

• padding-right

• padding-bottom

• padding-left

值：

• length - 定义一个固定的填充以px,pt,cm等单位制定。

• % - 定义一个百分比的填充

Padding的简写属性

padding:25px 30px 50px 100px;

• 上填充：25px

• 右填充：30px

• 下填充：50px

Padding的简写属性

padding:25px 30px 50px 100px;

• 上填充：25px

• 右填充：30px

• 下填充：50px

• 左填充：100px