CSS box-sizing属性

box-sizing属性

• content-box（默认标准盒模型）

width=content_width

			.box{
				width: 100px;
				height: 100px;
				border: 10px solid #FF0000;
				padding: 5px;
				margin: 5px;
				/* 默认width就为内容宽度100px */
				box-sizing: content-box;
				/* content-box;恢复默认 */
				
			}

• border-box（IE盒模型）

width=content_width+padding+border

	.box{
				width: 100px;
				height: 100px;
				border: 10px solid #FF0000;
				padding: 5px;
				margin: 5px;
				/* 默认width就为内容宽度100px */
				
				/* border-box;width=实际内容宽度+2*padding+2*border;所以实际内容宽度为70 */
				box-sizing: content-box;
				/* content-box;恢复默认 */
				
			}

注意：

• box-sizing属性改变的只是content_width、content_height。
• 当box-sizing值为content-box时，设置的width即为content_width
• 当box-sizing值为border-box时，设置的width即为content_width+padding+border;