標準盒模型與IE盒模型

時間 2019-11-12 標籤標準盒模型盒模型

標準盒模型與IE盒模型

1. 盒模型的組成

全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。css

盒模型是CSS中一個重要概念，文檔中的每一個元素被描繪爲矩形盒子。渲染引擎的目的就是斷定大小，屬性。盒模型屬性有：佈局

- margin：外邊距
- padding：內邊距
- border：邊框
- content：內容

2. 標準盒模型spa

標準盒模型的寬度與高度計算以下：設計

width=margin*2+border*2+padding*2+width;
height=margin*2+border*2+padding*2+height;code

3. IE盒模型blog

IE盒模型的寬度與高度計算以下：文檔

width=margin*2+border*2+padding*2+width;
height=margin*2+border*2+padding*2+height;it

二者的區別在於content的不一樣，IE盒模型的content包括padding和border，看下面的例子：io

css代碼以下：class

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width:400px;
        height: 200px;
        background-color: #269abc;
        border: 50px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;;
        margin-left: -200px;
    }
</style>

HTML代碼：

<body>
    <div class="box" id="box"></div>
</body>

在標準盒模型和IE盒模型下的效果分別以下：

從上面的效果圖能夠明顯的看出兩種盒模型的差異了。