边框

1
2
3
4
5
border-width/*定义边框粗细,单位px*/
border-style /*边框样式 solid实先 dashed虚线 dotted点线 */
border-color /*边框颜色*/
border: 1px solid red; /*简写*/
border-collapse:collapse; /*表示相邻边框合并*/

内边距

padding内边距,即边框和内容之间的距离

1
2
3
4
5
6
7
padding:5px; /*上下左右都有5像素内边距*/

padding:5px 10px; /*上下5px,左右10px*/

padding:5px 10px 20px; /*上内边距5px,左右10px,下20px*/

padding:5px 10px 20px 30px; /*上5,右10,下20,左30*/

外边距

margin 用于设置外边距,即控制盒子和盒子之间的距离。

块级盒子水平居中

外边距可以让块级盒子水平居中,但是必须满足两个条件:

①盒子必须指定了宽度(width)。

②盒子左右的外边距都设置为auto 。

1
2
3
4
5
6
7
8
9
.header{ width:960px; margin:0 auto;}

/*常见写法:*/

margin-left: auto;margin-right: auto;

margin: auto;

margin: 0 auto;

清除内外边距

1
2
3
4
* {
padding:0;/*清除内边距*/
margin:0;/*清除外边距*/
}

圆角边框

1
border-radius: length; /*参数值可以为数值或百分比的形式*/

盒子阴影

1
box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow1