CSS | box-sizing的解析与应用场景

最新推荐文章于 2023-05-10 15:23:50 发布

MGsniper

最新推荐文章于 2023-05-10 15:23:50 发布

阅读量2.9k

点赞数 6

分类专栏： CSS3 文章标签： box-sizing content-box border-box padding-box

本文链接：https://blog.csdn.net/qq_36145914/article/details/86579024

版权

CSS3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

box-sizing 定义
- 1.content-box
- 2.border-box
应用场景
- 需求
- 使用border-box
注意
附

box-sizing 定义

box-sizing 属性，定义了一个元素计算总宽高的行为规则。

The box-sizing CSS property defines how the user agent should calculate the total width and height of an element.

目前box-sizing的关键字值只有两个，一个是content-box，另一个是border-box。
我们在absolute定位下宽高的百分比设定一文中还提到了padding-box,但该属性目前已废弃，仅在absolute下宽高百分比计算中，作为父元素参考值使用。

1.content-box

content-box是默认值。box-sizing为content-box的元素。
content-box的宽高计算方法是 width/height = content
content-box的内外边距不包含在width/height当中，而是在实际渲染时附加在原有基础上。
例：

        div {
            width: 100px;
            height: 100px;
            padding: 20px;
            margin: 20px;
            box-sizing: content-box;
        }

在这里插入图片描述

2.border-box

border-box的宽高计算方法是 width/height = content + padding + border。
换言之，当我们规定元素总宽高时，总有 content = width/height - padding - border （注，border和padding在横纵方向各有一对，计算时要注意）
border-box的计算方法与IE盒模型是相同的。（注：IE盒模型在IE6后已停用）
例：

        div {
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 5px;
            margin: 20px;
            box-sizing: border-box;
        }

来自CSDN MGsniper

应用场景

需求

content-box和border-box的定义已解释完全，下面说说应用场景。
因为content-box是默认属性，所以我们重点说border-box的应用场景。

当你希望通过百分比设定整体盒子的宽高，而不是内容宽高时，或者更直接的，你希望子元素整个盒子撑满父元素的内容区域。在这种需求下，默认的content-box就不能满足需求了。在设置完content-box宽高后，padding和border会在原有基础上溢出，如下例所示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            width: 150px;
            height: 150px;
            padding: 20px;
            background: #65a0d1;
        }

        .son {
            width: 100%;
            height: 100%;           
            padding: 20px;
            background: #c5c492;
            border: solid 2px #e76363;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

如下图：
子元素因为padding和boder溢出，导致整个子元素也从父元素溢出。
在这里插入图片描述

使用border-box

如何解决问题呢？
其中一种方法就是，将元素设置为border-box，这样元素的宽高计算就变成了 height/width = content + padding+ border。

        .son {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding: 20px;
            background: #c5c492;
            border: solid 2px #e76363;
        }

如此，子元素就不会出现溢出现象了，并且整体盒子占满了父元素的内容块。
在这里插入图片描述

注意

在使用box-sizing时，我们要注意以下几点
1.absolute定位的元素，使用百分比设定其宽高时，它参考的是其第一个非static祖先节点的padding-box,即 content + padding
2.除去absolute的特例，其它情况下，使用百分比设定宽高时，参考的都是父级的content-box，即内容块宽高。

附

本文的问题场景还可以使用calc()函数解决，box-sizing和calc()均是CSS3追加的内容。

MGsniper

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
CSS | box-sizing的解析与应用场景

文章目录box-sizing 定义1.content-box2.border-box应用场景需求使用border-box注意附box-sizing 定义 box-sizing 属性规定了一个元素用于计算元素宽度和高度的CSS 盒子模型。目前box-sizing的关键字值只有两个，一个是content-box，另一个是border-box。我们在absolute定位下宽高的百分比设定一文...
复制链接

扫一扫

专栏目录