一天搞定CSS：盒模型content、padding、border、margin--06

小咪咪 2022-06-16 05:17 208阅读 0赞

# **1.盒模型** #

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
    
    这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

# **2.盒模型分为：标准盒模型和非标准盒模型** #

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

--------------------

**两者区别：计算宽高的方式不一样**

**1）标准盒模型：除IE以外的所有浏览器都是标准盒模型**

> **width=content的宽；**  
> **height=content的高；**

![这里写图片描述][SouthEast]

**2）非标准盒模型：又称怪异盒模型，只有IE是使用该模型**

> **width=content的宽+padding\*2+border\*2；**  
> **height=content的高+padding\*2+border\*2；**

![这里写图片描述][SouthEast 1]

# **3.盒模型体系** #

![这里写图片描述][SouthEast 2]

# **4.盒模型详细说明** #

![这里写图片描述][SouthEast 3]

![这里写图片描述][SouthEast 4]

--------------------

# **5.熟练盒模型：做一个如下效果图** #

![这里写图片描述][SouthEast 5]

**代码：**

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .box1{
                    border:dotted;margin:0px auto;padding:25px;width:350px;
                }
                .box2{
                    border:5px solid blue;padding:20px
                }
                .box3{
                    background:#ffa0df;padding:48px;
                }
                .box4{
                    border:1px dotted white;padding:5px;
                }
                .box5{
                    border:1px dotted white;padding:40px;
                }
                .box6{
                    width:100px;height:100px;border:5px solid yellow;background:greenyellow;
                }
            </style>
        </head>
        <body>
            <div class="box1">
                <div class="box2">
                    <div class="box3">
                        <div class="box4">
                            <div class="box5">
                                <div class="box6">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </body>
    </html>

[SouthEast]: /images/20220616/185401920236437e817f49725c69a640.png
[SouthEast 1]: /images/20220616/cdcc2c199a344f9b8f8ae64e31c986a5.png
[SouthEast 2]: /images/20220616/ae9d61623cea446085619847384fcb1e.png
[SouthEast 3]: /images/20220616/454349f557e949eb8e5f89327cf23965.png
[SouthEast 4]: /images/20220616/5847549dd69542b897c38d3930930069.png
[SouthEast 5]: /images/20220616/9232887374fb43e0bf5080123ff72eca.png