CSS盒子模型

在美团搬砖的小陈

于 2024-07-27 10:01:45 发布

阅读量715

点赞数 18

分类专栏： CSS 前端页面布局文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_64294248/article/details/140729818

版权

CSS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端页面布局

7 篇文章 0 订阅

订阅专栏

在网页排版布局时，我们可以将网页的每一个区块看作一个个盒子，我们像拼拼图一样，将这些盒子一个个拼起来，来排版布局页面内容。

盒子模型的定义

盒子模型，实际上就是指标签的外边距、边框、内边距、内容所组成的思维模型，这个模型可以直观的展示标签的尺寸、间距。

盒子的实际大小：边框(border) + 内边距(padding) + 内容(文本/width/height) 。

我们可以通过F12或者鼠标右击检查来观察盒子模型，其中，我们选中某个元素时显示蓝色的区域就是内容，橙色区域是外边距；在选中的元素范围内，蓝色区域以外的绿色区域是内边距。

盒子内容

可以通过设置盒子的宽度和高度来撑开盒子内容大小，记作：

.box-1 {
    width: 100px;
    height: 100px;
}

我们设置一个100px的正方形盒子，并设置背景颜色，便于观察，写入一些文本，我们点击检查，可以发现此时蓝色区域是100px的正方形，文本在蓝色区域的最上方。

边框

边框属性值border，是指元素内容与元素内边距以为的线，一个标签有四个边，每个边可以有大小、线条样式（实线、虚线、点线）、颜色组成，边框可以撑开盒子大小。

可以单独给每个样式进行设置，如下：

.box-3 {
    border-width: 10px;
    border-style: solid;
    border-color: green;
}

等价于以下的写法，也是边框的通常写法：

border: 10px solid green;

还可以将边框按照方向拆分为四条边来写，记作：

/* 上边框 */
border-top: 100px solid blue;
/* 右边框 */
border-right: 100px solid blue;
/* 下边框 */
border-bottom: 100px solid blue;
/* 左边框 */
border-left: 100px solid blue;

还是用之前的盒子，我们加入边框，可以看到下面的形状。

点击检查，可以发现盒子变大了，此时是因为边框撑开了盒子的大小。

我们平时会使用边框，一般会设置一个较小的px值，作为盒子修饰的边，效果如下：

利用边框绘制三角形

在前面我们有一个100px的边框，100px的内容区域，内容区域为正方形，如下图，那么去掉这个正方形的内容区域（将盒子内容区域高度和宽度设为0），想象一下，在盒子内容区域失去宽度和高度，只剩下边框时，会怎么样呢？

答案如下图——盒子会变成只由边框组成的四个三角形。

这个三角形可以让我们绘制出许多图形，在需要一个三角形时，我们可以利用transparent属性值（设置颜色透明），来去掉其他的三角形，注意还需要去掉其他的背景颜色，代码如下：

<body>
    <style>
        .box-1 {
            width: 0px;
            height: 0px;
            /* 上边框 */
            border-top: 100px solid blue;
            /* 右边框 */
            border-right: 100px solid transparent;
            /* 下边框 */
            border-bottom: 100px solid transparent;
            /* 左边框 */
            border-left: 100px solid transparent;
        }
    </style>
    <div class="box-1"></div>
</body>

此时页面中只剩下一个三角形，效果如下：

注意此时其他的边框只是变为了透明色，并不是消失了，他们还占据空间，点击检查，可以看见内容区域还是四个边框围起来的正方形。

外边距

外边距属性值margin，外边距是元素作用于浏览器或其他元素、元素与元素之间的间距，不会撑开盒子大小。

margin有四个值，分别为：

margin-left:属性值;
margin-right:属性值;
margin-top:属性值;
margin-bottom:属性值;

其中，属性值的正负不同，移动的方向也不同

margin-left 正数往右边移动，负数往左边移动；margin-right反之

margin-top 正数往下边移动，负数往上边移动；margin-bottom反之

也可以简记为一行，分别为上右下左，可以写作：

margin:值1,值2,值3,值4;

我们可以设置两个盒子，代码如下：

<body>
    <style>
        .box-1 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .box-2 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <div class="box-1"></div>
    <div class="box-2"></div>
</body>

正常情况下，两个盒子的摆放如下图：

我们给他们设置外边距，给第一个加一行代码，

.box-1 {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-bottom: 10px;
}

两个元素之间产生了外边距，被隔开了，效果如图：

点击检查，可以看见橙色区域就是两个盒子的外边距。

外边距合并问题

垂直方向，并列关系的两个元素，上边元素设置margin-bottom：值，下边元素设置margin-top：值，这两个元素的间距不会相加，而是取属性值较大一个间距。

也就是说，当同时给两个盒子设置与另一个盒子之间的外边距时，这两个外边距并不会相加，而是取较大值，出现外边距合并的问题。

我们给两个盒子同时设置与另一个盒子之间的外边距，也就是上方的盒子的margin-bottom和下方的盒子的margin-top，代码如下：

.box-1 {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-bottom: 10px;
}

.box-2 {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 20px;
}

此时浏览器会选择外边距较大的20px作为外边距，而不是将两个外边距的和加起来，变成30px，效果如图：

解决方案

1. 并列关系的两个元素，要么统一设置margin-top或者统一设置margin-bottom

2. 给并列关系的两个元素嵌套一个父元素，设置overflow:hidden (形成BFC)

第一种解决方案代码如下，同时给盒子设置margin-top，去掉其他属性，此时可以实现外边距30px的目的。

.box-1 {
    width: 100px;
    height: 100px;
    background-color: pink;
}

.box-2 {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 30px;
}

第二种解决方案代码如下，给两个盒子嵌套一个父盒子，并设置overflow:hidden，此时两个边距都能生效。

<body>
    <style>
        .parent {
            overflow: hidden;
        }

        .box-1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-bottom: 10px;
        }

        .box-2 {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 30px;
        }
    </style>
    <div class="parent">
        <div class="box-1"></div>
        <div class="box-2"></div>
    </div>
</body>

外边距塌陷问题

父子关系的盒子，如果直接给子盒子设置外边距，会带动父盒子一起走，导致外边距塌陷的问题。

我们先设置两个父子关系的盒子，代码如下：

<body>
    <style>
        body {
            margin: 0;
        }

        .parent {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

    <div class="parent">
        <div class="child"></div>
    </div>
</body>

此时这两个盒子位于浏览器最左上角，效果如图：

给子盒子设置一个外边距，加一行margin-top，其余代码不变，代码如下：

.child {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 100px;
}

此时可以发现父盒子也被带动向下走了，效果如下：

解决方案：把父元素设置成BFC(块级格式化上下文、独立的渲染区域)

1. 给父元素设置overflow:hidden (形成BFC)

2. 给子盒子设置浮动属性，使其脱离文档流

第一种给父盒子设置overflow:hidden属性，其余不变，代码如下：

.parent {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
}

效果如下：

也可以给子盒子设置浮动属性，使其脱离文档流

.child {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 100px;
    float: left;
}

效果如下：

第二种方法设置需要清除浮动，以免影响后续元素，清除浮动的方法在之前的文章有提及：http://t.csdnimg.cn/3wuk5

内边距

内边距属性值为padding，是作用于元素边框与元素内容之间的间距，内边距不会影响元素内容本身的大小，可以撑开盒子大小。

padding有四个值，分别为：

padding-left:属性值;
padding-right:属性值;
padding-top:属性值;
padding-bottom:属性值;

其中，属性值的正负不同，移动的方向也不同

padding-left 正数往右边移动，负数往左边移动；padding-right反之

padding-top 正数往下边移动，负数往上边移动；padding-bottom反之

也可以简记为一行，分别为上右下左，可以写作：

padding:值1,值2,值3,值4;

我们设置一个盒子，并设置一个较大的内边距撑开盒子的大小，代码如下：

<body>
    <style>
        body {
            margin: 0;
        }

        .parent {
            width: 20px;
            height: 20px;
            background-color: green;
            padding: 300px;
        }
    </style>

    <div class="parent"></div>
</body>

蓝色区域是盒子的内容大小，蓝色区域外是内边距，内边距撑开了盒子的大小，效果如下：

盒子模型的大小计算

在一个盒子模型中，盒子实际大小的计算：边框 +内边距 + 内容。

我们只设置盒子的边框，其余设置为0，可以发现盒子的大小是边框的大小，也就是前面绘制三角形的问题。

我们设置盒子较大的内边距，可以发现内边距撑开了盒子的大小。

我们设置一个较大的边框，去掉内容的大小，可以发现边框撑开了整个盒子。

于是，我们可以发现，盒子的大小与边框、内边距和内容三者均有关系，我们设置一个盒子来观察，代码如下：

<body>
    <style>
        body {
            margin: 0;
        }

        .parent {
            width: 20px;
            height: 20px;
            background-color: green;
            padding: 100px;
            border: 20px solid red;
        }
    </style>

    <div class="parent"></div>
</body>

效果如下：

点击检查，查看各个属性：

我们也可以在控制台的右侧查看这个盒子模型，可以看到每个属性以及属性值。

我们可以看到每个属性四个方向的值

在美团搬砖的小陈

关注

18
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型

盒子模型，实际上就是指标签的外边距、边框、内边距、内容所组成的思维模型，这个模型可以直观的展示标签的尺寸、间距。盒子的实际大小：边框(border) + 内边距(padding) + 内容(文本/width/height)。我们可以通过F12或者鼠标右击检查来观察盒子模型，其中，我们选中某个元素时显示蓝色的区域就是内容，橙色区域是外边距；在选中的元素范围内，蓝色区域以外的绿色区域是内边距。
复制链接

扫一扫

专栏目录