盒子边框

语法：

border:border-width    border-style   border-color
边框属性-设置边框样式 

none：没有边框即忽略所有边框的宽度
solid：边框为单实线（最常用）
deshed：边框为虚线
dotted：边框为点线

		div {
			width: 200px;
			height: 200px;
			border-width: 1px;   /*边框宽度  粗细*/
			border-color: skyblue;   /*边框颜色*/
			/*border-style: solid;      边框样式 实线 */
			/*border-style: dashed;  边框样式  虚线 */	
			/*border-style: dotted; 	边框样式  点线*/
			border-style: double;   /* 边框样式  双线*/ 
		}

表格的细线边框

		table {
			border-collapse: collapse;   /*合并相邻边框*/
		}

圆角边框（css3）

语法格式：

border-radius: 左上角 右下角; 右上角  左下角 
/* radius 半径（距离）*/

		div {
			width: 200px;
			height: 200px;
			border: 1px solid blue;
		}
		div:first-child {  /*结构伪类选择器 选亲兄弟*/
			border-radius: 10px;  /*一个数值表示4个角都是相同的 10px的弧度*/
		}
		div:nth-child(2) {
			/*border-radius: 100px;   取宽度和高度的一半则会变成圆*/
			border-radius: 50%;
		}
		div:nth-child(3) {
			border-radius: 10px 40px;    /*左上角和右下角是10px 右上角和左下角40px 对角线*/
		}
		div:nth-child(4) {
			border-radius: 10px 40px 80px;    /*左上角10  右上角和左下角40  右下角80*/
		}
		div:nth-child(5) {
			border-radius: 10px 40px 80px 10px;     /*左上角10  右上角40  右下角80  左下角100  顺时针 */
		}

盒子内边距（padding）

指边框与内容之间的距离
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

		div {
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			/*padding-left: 20px;   左内边距
			padding-top: 30px;*/
			/*padding: 10px 30px;   上下10   左右30*/
			/*padding: 10px 30px 50px;    上10  左右30 下50*/
			/*padding: 10px 20px 30px 40px;   上右下左  顺时针*/
			padding: 20px; /* padding如果只写一个值表示上下左右都是20像素*/
		}

外边距

margin属性用于设置外边距。设置外边距会在元素之间创建"空白"，这段空白通常不能放置其他内容
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin:上 右 下 左外边距

外边距实现盒子居中

可以让盒子实现水平居中，需要满足一下两个条件：
1.必须是块级元素
2.盒子必须指定了宽度（width）
然后就给左右的外边距设置auto，就可使块级元素水平居中。
代码如下（常用）：
.header {
width:960px;
margin:0 auto;
}
注意：行内元素无效，必须是块级元素
例:

	
	
	


	

	
头部标签