標準盒模型、怪異盒模型對比與應用

百度標準盒模型，全部的介紹都是
在標準模式下，一個塊的總寬度=width+margin(左右)+padding(左右)+border(左右)
在怪異模式下，一個塊的總寬度=width+margin（左右）（既width已經包含了padding和border值）
而後再介紹一下css3新屬性
box-sizing: border-box;

那麼，到底這兩個公式裏提到的總寬度是什麼意思呢？兩種模式最終效果有什麼差異呢？
話很少說，上代碼
html

<div id="parent">
    <div id="box">
        <div id="child"></div>
    </div>
</div>

css

#box {
    width: 400px;
    height: 400px;
    margin: 70px;
    padding: 20px;
    border: 5px solid black;
}
#child {
    width: 100%;
    height: 100%;
}

先看標準模式：
元素

父元素

子元素

標準模式，咱們設置#box的寬高爲400px，其對應的content（內容區）寬高爲400px，
父元素的高度爲#box內容區高度+上下border+上下padding，結果爲450px
子元素的高度爲#box內容區高度

而後咱們再看下怪異模式
css添加代碼

div {
    box-sizing: border-box;
}

元素

父元素

子元素

標準模式，咱們設置#box的寬高爲400px，其對應的content（內容區）寬高倒是
width-上下padding-上下border，結果爲350px;
父元素的高度爲#box內容區高度+上下border+上下padding，結果爲400px
子元素的高度爲#box內容區高度350px

標準盒模型中，css設置width爲x，對應元素content便爲x
而在怪異模式中，元素的content寬度是由x減左右padding，再減左右margin得出的

上面咱們瞭解了標準盒模型和怪異模式的區別，接下來咱們舉個應用的例子，僅供參考
需求：建立一個div，div的左側距屏幕左側20px，div的右側在屏幕中間
標準模式能夠輕鬆實現

position: absolute;
left: 20px;
right: 50%;

若是右側位置改成屏幕中間位置左側30px，如何實現？
能夠設置一個父元素，讓div右側距離父元素30px便可，爲方便展現，這裏使用行內樣式

<div style="width: 50%;position: relative;background-color: black;height:10px;">
    <div id="bod" style="position: absolute; left: 20px; right: 30px; height: 10px; background-color: red;"></div>
</div>

若是需求更進一步，要求元素可以撐起父元素的高度，如何實現？
顯然position已經沒法知足需求
實現方式有不少，這裏咱們只介紹使用怪異模式如何實現

<div style="width: 50%;background-color: black;padding: 0 30px 0 20px;">
    <div id="bod" style="width: 100%; background-color: red;">測試測試測試測試測試測試測試測試測試測試</div>
</div>

效果圖