?? ??

CSS?? ?? ????? ?? ??? ??? ????. ?? ??? ? ???? ??? ?? ???? ??? ?????. CSS? ?? ??? html ? body ?? ??? ??? ?? ?????. ?? ???? ?? ??, ??, ???, ??, ?? ? ??? ?? ??? ???? ?? ?? ??? ??? ?? ??? ?? ? ????. ?? ??? 3D ?????? ?????.

QQ截圖20161021103153.png

From the picture padding ??? content ??? background-image ??? background-color ??? ???? ??? ? ? ???, ?? Z?(?? ?? ??)? ?? ?? ??? ??? ?????. ?, border??, margin??, padding??? ????? ????? ??? ??, Z????? ????? ??? ??? ? ????.

box-sizing:

CSS? ?? ??? ? ?? ???? ??????. ? ??? w3c? ?? ???? ?? ??? IE? ???? ?????. ?, ??? ??, ??, ?? ? ??? ??? ?? ??? ??? ??? ?? ?? ??? ???? ?? ?? ??? ???? ???? ????. ?????, ?? ??? ?? ?????. ??? ?? ?? ??? ?? ?? ??? ??? ?? ?? ?? ??? ?? ?? ?????.

W3C ?? ?? ??

?? ?? ?? ??(?? ?? ??)

?? ?? ?? = ??? ?? + ?? + ??? + ?? ??

?? ?? ?? = ??? ?? + ?? + ??? + ?? ??

?? ?? ?? ??(?? ??)

?? ?? = ??? ?? + ?? + ???(??? ??? ??)

?? ?? = ??? ?? + ?? + ???(??? ??? ??)

2.IE ?? ?? ??(IE6 ??, ??) IE6 ?? ?? "QuirksMode? IE5.5+")

?? ?? ?? ??(?? ?? ??)

?? ?? ?? = ??? ?? + ?? ??(???? ?? ??? ??, ???, ?? ?? ??)

?? ?? = ??? ?? + ?? ??(?? ?? ??? ??, ???, ?? ??)

?? ?? ?? ??(?? ??)

?? ?? = ??? ??(??? ?? ??? ??, ???, ?? ??)

?? width = ??? ??(width ?? ??? ??, ???, ?? ??)

CSS3?? box-sizing ??? ?? ???? ?? ??? ?? ?? ??? ?? ??? ? ????. ?? ??? ??? ????. :

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

???	??? ??
content-box	??? W3C ?? ?? ??? ??? ? ??? ?? ???, ? ??? ??? ??(??/??)? ?? ??? ??(???)? ?? ??? ?? ?? ????. (padding)? ?? ??? ?? ?? ??(??? ??/??)? ?? ?, ? ?? ??/?? = ??? + ?? + ??? ??/??
border-box	??? ??? ??????. ??? ???? CSS2.1 ?? ?? IE? ???? ?? ??(IE6 ? IE6-7 ??? ?? ?? ??)? ?????. ?? ??? ?? ?? ??? ?? ??? ?? ?? ??? ????? ?? ?????. . ?? ?? ?? ???? ? ? ??? ??? ??? ?? ?? ??? ???, ?? ? ??? ??? ?? ?? ??? ?????(??? ??? ?? ?? ?? = ??? ?? ?? ?? - ??? -?).
inherit	??? ?? ??? ?? ?? ??? ????? ????.

?? ??? ?? ?? ?? ???? ??? ??? ??? ??? ?????. ???? ?? ???? ??? ? ????. ?? ??? ?? ??? ??? ??? ????.

QQ截圖20161021103115.png

???? ??

??? ??

<!doctype html> <html> <head> <meta charset="utf-8"> <title>盒子模型</title> <style> h1 { font-size: 20px; margin: 0; color: #fff; } #page:after, #page:before{ content:""; display: table; } #page:after{ clear:both; overflow: hidden; } #page { margin-bottom: 20px; } #header { width: 100%; background: green; margin-bottom: 10px; padding: 20px; } .main { width: 60%; padding: 20px; background: orange; float: left; } .sidebar { width: 38%; float: right; background: #f36; padding: 20px; } #footer { width: 100%; background: #36f; padding: 20px; clear:both; } #header, .main, .sidebar, #footer { -webkit-？; -moz-？; -o-？; -ms-？; ？; } </style> </head> <body> <div id="header"><h1>Header Content</h1></div> <div id="page"> <div class="main"><h1>Main Content</h1></div> <div class="sidebar"><h1>Sidebar Content</h1></div> </div> <div id="footer"><h1>Footer Content</h1></div> </body> </html>

?????? ???

????