盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。最典型的盒子标签及DIV标签。CSS盒模型本质上是一个盒子，它包括：边距，边框，填充，和实际内容。

不同部分的说明：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

一、边框

边框宽度：

border-top-width:1px ; /*上边框宽度*/
border-bottom-width:1px ; /*下边框宽度*/
border-left-width:1px ; /*左边框宽度*/
border-right-width:1px ; /*右边框宽度*/
border-width: 1px; /*同时设置上下左右边框宽度*/

边框样式：

border-top-style:solid ; /*上边框样式*/
border-bottom-style:solid ; /*下边框样式*/
border-left-style:solid ; /*左边框样式*/
border-right-style:solid ; /*右边框样式*/
border-style: solid; /*同时设置上下左右边框样式*/

边框样式取值为 none: 默认无边框；dotted: 点线边框；dashed: 虚线边框；solid: 实线边框；double: 双线边框；groove: 3D沟槽边框，效果取决于边框的颜色值。ridge: 3D脊边框，效果取决于边框的颜色值；inset:一个3D的嵌入边框，效果取决于边框的颜色值；outset: 一个3D突出边框， 效果取决于边框的颜色值；

边框颜色

border-top-color:red ; /*上边框颜色*/
border-bottom-color:red ; /*下边框颜色*/
border-left-color:red ; /*左边框颜色*/
border-right-color:red ; /*右边框颜色*/
border-color: red; /*同时设置上下左右边框颜色*/

边框样式简写

我们可以将边框宽度，边框样式和边框颜色一起来设置

border:1px solid red;

以上代码设置上下左右四个边框宽度为1像素，边框样式为实线框，边框颜色为红色。

border-top:1px solid red;

以上代码设置上边框宽度为1像素，边框样式为实线框，边框颜色为红色。如果需要设置其他方向边框，同理可以参照此上边框的写法。

二、外边距

margin-top: 10px; /* 设置上外边距*/
margin-bottom: 10px; /*设置下外边距*/
margin-left: 10px; /*设置左外边距*/
margin-right: 10px;/*设置右外边距*/
margin: 10px;   /*同时设置上下左右外边距*/

如果四个方向的外边距不是相同的数值，可以用如下语法：

margin:10px 20px 30px 40px;  /*四个参数的方向分别是上，右，下，左; 即顺时针方向*/

如果上下外边距相同，左右外边距相同，可以用如下语法：

margin:10px 20px; /*设置上下外边距为10像素，左右外边距为20像素*/

盒子的居中也是使用外边距来实现的，即设置左右外边距自动即可，如下两种写法都行：

margin:10px auto;
margin:10px auto 10px auto;

三、内边距

padding-top: 10px; /* 设置上内边距*/
padding-bottom: 10px; /*设置下内边距*/
padding-left: 10px; /*设置左内边距*/
padding-right: 10px;/*设置右内边距*/
padding: 10px;   /*同时设置上下左右内边距*/

四、盒子模型的尺寸

box-sizing

样式表中box-sizing取值有content-box和border-box。其中content-box是默认值，当盒子的box-sizing:content-box的时候，即默认情况下：盒子模型的尺寸 = 内容尺寸+Padding+Border+Margin。

如果对某个DIV标签有如下样式表设置：

width:100px;
padding:10px;
border-width:5px;
margin:20px;

则此DIV在网页中占用的实际宽度为 = 100+10+5+20

---

当盒子的box-sizing:border-box的时候，可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。盒子模型的尺寸 = 内容尺寸+Margin。

如果对某个DIV标签有如下样式表设置：

box-sizing: border-box;
width:100px;
padding:10px;
border-width:5px;
margin:20px;

则此DIV在网页中占用的实际宽度为 = 100+20

五、圆角边框

使用border-radius样式可以设置盒子为圆角。

border-top-left-radius:20px;   /*设置左上角圆角，圆角半径为20像素*/
border-top-right-radius:20px;  /*设置右上角圆角，圆角半径为20像素*/
border-bottom-right-radius:20px; /*设置右下角圆角，圆角半径为20像素*/
border-bottom-left-radius:20px; /*设置左下角圆角，圆角半径为20像素*/
border-radius: 20px;  /*四个角都是圆角，值一样,圆角半径为20像素*/
border-radius: 20px 10px 50px 30px; /*分开设置圆角，分别是左上，右上，右下，左下*/

六、盒子阴影

box-shadow: 10px 10px 5px red;

四个参数分别为：水平阴影的位置，垂直阴影的位置，模糊距离，阴影的颜色。此写法阴影为外阴影。

box-shadow: 10px 10px 5px red inset;

如果添加第五个参数代表此阴影为内阴影。