CSS的盒子模型

CSS的盒子模型有两种：

标准盒子模型
IE盒子模型

两种盒子模型的区别是什么：

 标准盒子模型：margin,border,padding,content
 IE盒子模型：margin,content(border+padding+content)

代码演示：

css：
    .list1 li{
            box-sizing: content-box;
            float: left;
            width: 200px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px solid skyblue;
        }
        .list2 li{
            box-sizing: border-box;
            float: left;
            width: 200px;
            height: 200px;
            padding: 50px;
            margin: 10px;
            border: 10px solid skyblue;
        }
html：
    <ul class="list1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <hr></hr>
    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

通过CSS如何转换盒子模型：

 box-sizing:content-box(标准盒子模型)
 box-sizing:border-box(IE盒子模型)