盒模型在初學(xué)css的時(shí)候就會(huì)接觸到，其實(shí)很容易理解，這里也不多廢話，但是實(shí)際上在布局的時(shí)候還是會(huì)出現(xiàn)很多問題。對(duì)于盒模型的認(rèn)識(shí)不能只停留在知道一個(gè)盒模型由哪些部分構(gòu)成，也要更多的了解如何在不同情況下利用盒模型的特點(diǎn)進(jìn)行布局。
這里討論一下兩種不同的盒模型： W3C盒模型和IE盒模型。
其實(shí)IE的盒模型問題只會(huì)出現(xiàn)在IE5.5及其更早的版本中，因?yàn)樵贗E6及更新的版本在標(biāo)準(zhǔn)兼容模式下使用的是W3C的盒模型標(biāo)準(zhǔn)，但事實(shí)上不僅IE5.5，連IE6的使用率也很少了，這里對(duì)他們進(jìn)行討論只是為了更深刻的理解盒模型。
對(duì)于兩種模型這里有一張圖：
可以看到IE的盒模型與W3C盒模型的區(qū)別在與width的計(jì)算，這說明什么問題呢？我們?cè)谠O(shè)置樣式的時(shí)候經(jīng)常會(huì)用到margin和padding還有width，對(duì)于下面html文件：
<!-- 沒有聲明 -->
<html>
<head lang="ch">
<meta charset="UTF-8">
<title></title>
<style>
.box{
float:left;
width: 100px;
height: 100px;
background-color: #ff9000;
}
.container{
width: 200px;
padding: 10px;
background-color: #f00;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
<script>
</script>
</body>
</html>
不管是不是IE，瀏覽器下顯示的效果都是：
可以看到container正好將兩個(gè)box包裝起來。
但加入給container添加一個(gè)padding如下：
.container{
width: 200px;
background-color: #f00;
overflow: hidden;
padding: 10px;
}
則其在非IE下的樣式為：
但在IE下為：
IE中的box換行了，這就是因?yàn)镮E中的width是包括了padding的，而W3C也就是我們平常使用的盒模型不包括，不管padding加多少內(nèi)容區(qū)域的寬度不會(huì)改變，這也十分合理。
避免觸發(fā)IE盒模型的方法是使用<!DOCTYPE html>聲明，告訴IE采用W3C盒子模型即可。
