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

最新推荐文章于 2023-08-24 19:25:34 发布

Java仗剑走天涯

最新推荐文章于 2023-08-24 19:25:34 发布

阅读量2.2k

点赞数 2

分类专栏：前端基础HTML5/CSS3 文章标签： css 标准盒模型怪异盒模型 padding margin

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71272900

版权

前端基础HTML5/CSS3 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

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的高；

这里写图片描述

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

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

这里写图片描述

3.盒模型体系

这里写图片描述

4.盒模型详细说明

这里写图片描述

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>