盒模型

简介

css中的盒模型相当于礼物的外包装盒，封装周围的HTML元素，包括外边距（margin），边框（border），内边距（padding）和实际内容（content），常用的div元素就是一种区块容器标记，可以将网页分隔为不同的部分，以实现网页的规划和布局。

纵深结构来说，盒模型自下而上为：外边距、背景颜色、背景图像、内边距、内容、边框

css代码中的宽和高（width和height）指的是如下部分：

盒子的总宽度=width+左右内边框之和+左右边框宽度之和+左右外边距之和

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

边框（border）

边框主要包括边框宽度、边框样式、边框颜色、此外还有border的综合属性，在CSS3中添加了圆角边距，图片边距属性。

边框宽度（border-width）：用于设置元素边框的宽度值

border-width：上边距宽度[右边距宽度 下边距宽度 左边距宽度];

其中，宽度由数字和单位组成，不可为负数，常以像素（px）为单位，且设定1个值时全部应用，设定2~3个值时，省略的部分将使用对边的样式

边框样式（border-style）：用于设置样式

border-style：上边框样式[右边框样式 下边框样式 左边框样式];

其中，设置时必须按上右下左的顺时针顺序，当设置1个值时为4边，2个值为上下/左右，3个值为上/左右/下，也可以通过形如border-left-style的方式分别设置

样式取值共9种，如下：

属性	含义	属性	含义
none	不显示边框（默认）	groove	边框带有立体感的沟槽
dotted	点线	ridge	边框成脊形
dashed	虚线	inset	使整个方框凹陷
solid	实线	outset	使整个方框凸起
double	双实线

边框颜色（border-color）：用于定义边框的颜色

border-color:上边框颜色[右边框颜色 下边框颜色 左边框颜色];

其中，颜色值符合定义法，有十六进制#RRGGBB和RGB代码、rgb(r,g,b)三种，仅定义几个值的样式应用方式同上两种，可以通过形如border-left-color的方式分别定义，（上使用top，下使用bottom）

边框综合属性（border）

border为复合属性，前三者的简写方式

border<边框宽度>|<边框样式>|<颜色>;

在复合属性中，边框border同时设置4条边，如只需要1条边框应用该样式，需要通过形如border-left的方式分别设置

边距

内边距（padding）

主要用于调整内容在盒子中的值，指内容content和边框border的距离，也被称作内填充。

padding:上内边距值[右内边距值 下内边距值 左内边距值];

边距值为数字和单位组成，不可为负值，常用像素（px）为单位，也可以是百分比，随父元素width变化而变化，和height无关
padding遵循复制原则，也可以通过形如padding-left的方式设置样式

外边距（margin）

margin指元素边框和相邻元素之间的距离（盒子和盒子的距离）

margin:上外边距值[右外边距值 下外边距值 左外边距值];

margin为复合属性，同padding用法类似，但可以使用负值，使相邻元素重叠，若盒元素使用了宽度属性，设margin为auto时，可以实现盒元素居中
margin也遵循复制原则，可通过形如margin-left的方式设置样式