CSS3: A simple understanding of the box-sizing attribute_html/css_WEB-ITnose

Definition and Usage:

The box-sizing attribute allows you to define specific elements that match a certain area in a specific way.

Default value: content-box;

Inheritance: none;

css version: css3 ：

box-sizing: content-box | border-box |inherit;

Attribute value description:

content-box

Default value; width-height behavior specified by CSS2.1; width and height are applied to the element's content box respectively; the element's padding is drawn outside the width and height and borders.

can be understood as: setting border and padding on an element will eventually change the width and height of the element

border-box

is set for the element The width and height determine the border box of the element;

That is: any padding and borders specified for the element will be drawn within the set width and height;

The content Width = set width and height - borders and padding.

can be understood as: setting border and padding on an element will not change the width and height of the element; it will only be drawn within the established width and height range of the element

inherit

Specifies that the value of the box-sizing attribute should be inherited from the parent element.

We can use this attribute value to easily implement box-sizing settings by setting box-sizing on the top-level parent element and letting the child elements inherit it.

For example:

html{

box-sizing:border-box;

}

*,*:before,*:after{

box-sizing:inherit;

}



Example:

Online demo: http://codepen.io/anon/pen/LVvrdy

<div class="box box1">	 box-sizing:border-box	 为元素设定的宽度和高度决定了元素的边框盒。     就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。     通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。</div><div class="box box2">	box-sizing:content-box	这是由 CSS2.1 规定的宽度高度行为。	宽度和高度分别应用到元素的内容框。	在宽度和高度之外绘制元素的内边距和边框。</div><div class="box box3">	box-sizing:inherit;	从父元素继承box-sizing属性</div>

　

Realization effect:

    html{    	box-sizing:border-box;    }    *,*:before,*:after{    	box-sizing:inherit;    }    body{     background-color:#eee;    }    .box{    	width: 200px;    	height: 200px;    	padding: 10px;    	margin-left: 25px;    	float: left;    	color:#fff;    	font-size: 13px;    	line-height: 1.5em;    	border:5px solid #fff;     box-shadow:0 1px 4px rgba(0,0,0,.15);    }    /*border-box:在宽度和高度之内绘制元素的内边距和边框*/    .box1{    	-moz-box-sizing:border-box;    	-webkit-box-sizing:border-box;    	box-sizing:border-box;    	background-color: #33475f;    }    /*content-box:在宽度和高度之外绘制元素的内边距和边框 */    .box2{    	-webkit-box-sizing:content-box;    	-moz-box-sizing:content-box;    	box-sizing:content-box;    	background-color: #9d55b8;    }    /*inherit:从父元素继承box-sizing属性*/    .box3{    	-webkit-box-sizing:inherit;    	-moz-box-sizing:inherit;    	box-sizing:inherit;    	background-color: #56abe4;    }