盒子模型简介

第一部分、盒子模型简介

如图，一个盒子了可以分为四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

• 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
• 盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

第二部分、盒子模型的相关属性

1.边框属性

border（边框）：即盒子的边框线。

边框属性	样式属性	属性值
边框线的样式	border-style: 上边 [右边 下边 左边]	solid（单实线） dashed（虚线） dotted（点线） double（双实线）
边框线的宽度	border-width: 上边 [右边 下边 左边]	像素值px
边框线的颜色	border-color: 上边 [右边 下边 左边]
综合设置	border:四边宽度 四边样式 四边颜色;
圆角边框	border-radius: 水平半径参数/垂直半径参数;	像素值px或百分比
图像边框	border-images：图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;

2.内边距属性

padding（内边距）：盒子中的内容到盒子边框的距离。

内边距属性	属性值
padding-top	上边距
padding-right	右边距
padding-bottom	下边距
padding-left	左边距
padding	上-右-下-左

注意：

1. padding不可以使用负值
2. 不能同时设置相对的两个边框。例如，不可以同时设置上边框和下边框。

3.外边距属性

margin（外边距）：盒子边框到包含该盒子容器的距离。
属性和属性值规则同上边距。

4.内外边距的清除

    *{
	padding：0
	margin：0
    }

5.背景属性

背景属性	样式属性	属性值
背景颜色	background-color
背景图像	background-image	url（图像路径）
背景图像的平铺属性	background-repeat	①repeat (默认):水平垂直均平铺 ② no-repeat：不平铺 ③ repeat-x(y):水平（垂直）平铺
背景图像的位置属性	background-position	①单位数值（px）②方向（top、left、center、right、bottom）③百分比（%）
背景图像的固定属性	background-attachment	①scroll(默认)：图像随页面元素一起滚动②fixed：固定在屏幕上，不随页面元素滚动
综合设置	background:背景色 url(“图像”) 平铺 定位 固定

6.阴影属性

box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 outset/inset