css盒子模型

盒子模型

1. 盒子模型圖解：（盒模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內邊距），content（內容區域））

2.類型

(1) box-sizing:border-box;

a. css3屬性，ie8以下不兼容，Mozilla需要加上-moz-，Webkit內核需要加上-webkit-，Presto內核-o-，IE8-ms-

b. 邊框盒子：width包括border，padding，margin

(2) box-sizing:content-box; 默認

a. 內容盒子：width只包含content

3.例子

a.

.box{

	box-sizing:content-box;

	width:200px; height:200px; 

	background-color:red; 

	padding:50px;
    	border:10px black solid;
    	margin:30px;

}

.box{

	box-sizing:border-box;

	width:200px; height:200px; 

	background-color:red; 

	padding:50px;
   	 border:10px black solid;
    	margin:30px;

}

b.

用border畫出一個三角形（transparent）

	div{

		width:0px; height:0px; 

		background-color:transparent; 

		border-top:80px transparent solid; 

		border-right:80px transparent solid;

		 border-bottom:80px #00F solid; 

		border-left:80px transparent solid;

	}