CSS 盒子模型

所谓盒子模型：

• 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

• CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

• 外边距（margin）、

• 边框（border）、

• 内边距（padding）、

• 实际内容（content）四个属性。

1.边框 （border）

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

常用边框样式

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线  
dotted：边框为点线
double：边框为双实线

可以综合设置为  border : border-width || border-style || border-color

例如

border: 1px solid red;  

圆角边框(CSS3)

border-radius: 左上角  右上角  右下角  左下角;

让正方形变成圆的方法

border-radius: 50%;

2.内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距

padding： 后面跟几个数值表示的意思是不一样的。

值的个数
1个	padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个	padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个	padding：上边距 左右边距 下边距
4个	padding：上边距 右边距 下边距 左边距

3.外边距（margin）

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距  下外边距  左外边

 4.css盒子模型大小计算

1.W3C标准盒子（content-box）：

在这种盒模型下，我们所说的元素的 width ，实际上只包含 content

盒子总宽度 = margin + border + padding + width

2.IE盒子（border-box）：

又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

盒子总宽度= margin + width