盒子模型为border-box的时候，特定情况下内容宽度为0，宽度不是预想中的设置的width

NGU7180

已于 2024-08-23 10:16:06 修改

阅读量875

点赞数 13

文章标签： javascript 前端开发语言 css3

于 2024-08-22 10:40:46 首次发布

本文链接：https://blog.csdn.net/ngu7180/article/details/141418866

版权

我好像在面试中只被问过一两次，有这样一道题：介绍一下CSS的盒子模型

CSS的盒子模型有哪些:

标准盒子模型、IE盒子模型

CSS的盒子模型区别:

标准盒子模型:margin、border、padding、content

IE盒子模型:margin、content(border+padding+content)

通过CSS如何转换盒子模型:

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，现代浏览器和IE9+默认值是content-box。
box-sizing:content-box;/*标准盒子模型*/

box-sizing:border-box;/*IE盒子模型*/

border-box的时候，特定情况下内容宽度为0，宽度不是预想中的设置的width：

复现步骤：

创建一个html文件，查看下面的li元素大小。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            overflow: hidden;
            list-style: none;
        }

        .u1 li{
            float:left;
            margin:10px;
            padding: 50px;
            width: 100px;
            height: 100px;
            border: 5px solid #000;
        }
        

        .gap {
            height: 20px;
        }

        .u2 li{
            float:left;
            box-sizing: border-box;
            margin:10px;
            padding: 50px;
            width: 50px;
            max-width: 50px;
            height: 100px;
            border: 5px solid #000;
        }
    </style>
</head>

<body>
    <ul class="u1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="gap"></div>
    <!-- <hr> -->
    <ul class="u2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

</html>

效果图：

我在上面中设置的width是50px，但是这里展示的是110px，这里就有问题了，不符合我们平常的计算方式，这说明有其他标准在影响着计算。

查阅MDN：

border-boxhttps://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#border-box

The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide, with the area for content being 330px wide. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
width和height属性包括内容、内边距和边框，但不包括边距。请注意，填充和边框将位于框内。例如， .box {width: 350px; border: 10px solid black;}渲染一个 350px 宽的框，内容区域为 330px 宽。内容框不能为负数，并且被下限为0，因此无法使用border-box使元素消失。

这里的描述还是不够清楚，为什么内容框下限为0呢？当下限为0的时候，宽度怎么计算呢。继续查阅。

查阅思否：

有这样一段回答：

这是一个特殊情况，当你的最小宽度大于你设置的宽度的时候，容器会使用最小宽度。

好，那么这个是从哪里来的呢？最小宽度是如何定义的呢？

显然需要继续寻找。

查阅w3c：

CSS Basic User Interface Module Level 3 (CSS3 UI)https://www.w3.org/TR/css-ui-3/#box-sizing在这里有关于最小宽度的描述，可以解决这个问题。

这里是content宽度最小为0的这个解释。

Visual formatting model detailshttps://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins

If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.
如果结果宽度小于'min-width' ，则再次应用上述规则，但这次使用'min-width'的值作为'width'的计算值。

这是最小宽度和结果宽度的影响。