CSS盒子模型

1 盒子模型

1.1 边框

 border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色。

语法：

border : border-width || border-style || border-color

边框简写：
border：1px solid red;    没有顺序

边框样式：solid（实线边框）、dashed（虚线边框）、dotted（点线边框）。
可以上下左右单独设置：border-top(bottom/left/right)

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

1.1.1 表格的边框细线

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

语法：

border-collapse：collapse;

表示相邻边框合并到一起。

collapse 单词是合并的意思。

1.1.2 内边距

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

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

1.1.3 外边距

1.1.4 消除有序列表符号

li{
	list-style:none;
}

1.2 圆角边框

1.3 盒子阴影

1.3 文字阴影

2 CSS3盒子模型

 css3中可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box 、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分为两种情况：

1. box-sizing:content-box 盒子大小为width+padding+border（以前默认的）
2. box-sizing:border-box 盒子大小为width

如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）