标准盒模型、怪异盒模型对比与应用

百度标准盒模型，全部的介绍都是
在标准模式下，一个块的总宽度=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>

效果图