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;

	}