盒模型-web前端必须掌握的重要基础2_外部盒子与内部盒子的距离web-优快云博客

本文详细介绍了盒模型的基础知识，包括外边距margin的叠压现象和塌陷问题，内边距padding的模型面积影响，以及border的特性。通过实例分析了怪异盒模型与标准盒模型的区别，帮助Web前端开发者深入理解盒模型的工作原理。

什么是盒模型呢？

每一个标签都是一个矩形，像有一个盒子，所以HTML页面的布局有时可以理解为多个盒子组合嵌套排列而成。

而最简单的width和height就抛开不提了。以下是我自己学习后整理出的有关笔记。

一、外边距margin和内边距padding

1、外边距：外边距主要注意的知识点为三部分：它有1~4个值、它是由顺时针赋值的且由上开始、第三部分也是最重要的部分就是叠压现象和塌陷问题了。

下面是一些有关的小知识点：

外边距叠压现象：常态下，兄弟标签间的上下间距以大值为准。（）（）

塌陷问题：原因（常态下，父级的第一个子集标签是一个块级标签并且使用了margin或者margin-top）

解决方案：1、在父级使用border

2、不使用margin-top，在父级使用padding-top

overflow：hidden的作用：1、隐藏溢出2、解决塌陷3、清除浮动

2、内边距：内边距也包括三部分：前两个都与外边距一样，第三个则是增加和模型面积问题

相对距离一定要做好减法

具体见代码

<title>内边距padding和外边距margin</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: cyan;
            /* 内边距：会增加盒模型的面积（两个顺序30>50>30>50,三个时顺序30>50>70>50） */
            /* padding: 30px 50px 70px 90px; */
            /* padding-left: 50px; */

            /* 外边距 */
            /* margin: 10px; */
            /* margin-top: 50px; */
        }
        /* 外边距叠压现象：常态下，兄弟标签间的上下间距以大值为准 */
        .d1{
            margin-bottom: 100px;
        }
        .d2{
            margin-top: 150px;
        }
        /* 塌陷问题：原因（常态下，父级的第一个子集标签是一个块级标签并且使用了margin或者margin-top）
                    解决方案：1、在父级使用border
                             2、不使用margin-top，在父级使用padding-top */
        .fa{
            width: 300px;
            height: 300px;
            /* border: 1px solid red; */
            /* padding-top: 50px;(相对距离做好减法) */
            /* overflow: hidden;(溢出：隐藏) */
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: thistle;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <!-- <div class="d1">优快云</div>
    <div class="d2"></div> -->
    <div class="fa">
        <!-- <span style="margin-top: 50px;">123123</span>（行标签不支持margin-top） -->
        <div class="son"></div>
    </div>
</body>
</html>

二、border边框

边框的内容主要是其一些复合属性和增加和模型面积问题

<!-- 盒模型面积(border会增加盒模型的面积)

S=(bl + pl + width + pr + br)*(bt + pt + height + pb + bb) -->

以下增加了关于其圆角和三角问题的一些拓展：

           width: 100px;
            height: 100px;
            background-color: transparent;
            /* border: 10px solid tomato;
            border-top: 5px dashed pink; */
            /* 圆角 */
            /* border-radius: 50px; */
            /* border:20px solid pink;
            border-radius: 70px; */
            /* 为单一角设置(先写上下再写左右) */
            /* border-top-right-radius: 50px; */
            /* 三角形 */
        }
        .s{
            width: 0px;
            height: 0px;
            border: 20px solid pink;
            border-right-color: transparent;
            border-top-color: transparent;
            border-bottom-color: rgba(0, 0, 0 ,0);
            border-radius: 50%;
        }

以下是有关和模型的所有细节，见代码：

    <title>box</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: transparent;
            /* border: 10px solid tomato;
            border-top: 5px dashed pink; */
            /* 圆角 */
            /* border-radius: 50px; */
            /* border:20px solid pink;
            border-radius: 70px; */
            /* 为单一角设置(先写上下再写左右) */
            /* border-top-right-radius: 50px; */
            /* 三角形 */
        }
        .s{
            width: 0px;
            height: 0px;
            border: 20px solid pink;
            border-right-color: transparent;
            border-top-color: transparent;
            border-bottom-color: rgba(0, 0, 0 ,0);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div>不道人间犹有未招魂</div>
    <div class="s"></div>
</body>
</html>
<!-- 盒模型面积(border会增加盒模型的面积)
S=(bl + pl + width + pr + br)*(bt + pt + height + pb + bb) -->

三、怪异盒模型（也称作ie盒模型）

正常盒模型向外拓展，而怪异盒模型向内压缩

由于与正常盒模型只有一点区别，具体见代码：

<title>怪异盒模型</title>
    <style>
        div{
           width: 200px;
           height: 200px;
           background-color: cyan; 
           margin: 10px;
           padding:10px;
           border: 10px solid gold;
        }
        .d2{
            /* 怪异盒模型 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>
</html>