CSS3: ボックスサイズ設定の簡単な理解attribute_html/css_WEB-ITnose

定義と使用法:

box-sizing 属性を使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。

デフォルト値: content-box;

継承: none;

css バージョン: css3

構文:
box-sizing: content-box |inherit;

属性値の説明:

content-box

デフォルト値; css2.1 で指定された幅と高さの動作は、要素のコンテンツ ボックスにそれぞれ適用されます。そして高さと境界線。

は次のように理解できます: 要素にボーダーとパディングを設定すると、最終的に要素の幅と高さが変更されます

border-box

要素に設定された幅と高さは、要素の境界ボックスを決定します。

つまり: 指定された要素のパディングとボーダーは、設定された幅と高さ内に描画されます

コンテンツの幅 = 設定された幅と高さ - ボーダーとパディング。

は次のように理解できます: 要素にボーダーとパディングを設定しても要素の幅と高さは変更されません; 要素の設定された幅と高さの範囲内でのみ描画されます

inherit

と規定されていますbox-sizing 属性は親要素の値から継承される必要があること。

この属性値を使用すると、最上位の親要素に box-sizing を設定し、それを子要素に継承させることで、ボックス サイズ設定を簡単に実装できます

例:

html{

box-sizing: border- box;
}
*,*:before,*:after{
box-sizing:inherit;
}

例:

オンラインデモ: 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>

    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;    }

効果を達成する: