CSS 盒子模型box-sizing

最新推荐文章于 2024-08-11 20:00:00 发布

啊逼同学

最新推荐文章于 2024-08-11 20:00:00 发布

阅读量725

点赞数 5

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

本文链接：https://blog.csdn.net/weixin_42055866/article/details/85148837

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS 轻松理解应用box-sizing

box-sizing的含义
1. box-sizing: content-box 默认值
2. box-sizing: border-box
3. box-sizing: inherit

box-sizing的含义

敲黑板划重点：box-sizing——用于定义宽度和高度是否包含padding和border的属性
box-sizing有三种值(content-box, border-box, inherit)，我们一一解说

1. box-sizing: content-box 默认值

width设置不包括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>
        * {
            margin: 0;
        }
        .box1 {
            width: 100%;
            height: 20px;
            /* padding: 20px; */
            border: 10px solid lightcoral;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

此刻会发现我们的border已经超过浏览器窗口的宽度，出现了滚动条！原因就是我们定义了宽度不包括padding和border，所以width 100%就已经跟窗口一样宽，再加上20px边框的宽度，自然也就出现了滚动条。padding的效果也是如此。
content-box效果图

2. box-sizing: border-box

width设置时包括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>
        * {
            margin: 0;
            box-sizing: border-box;
        }
        .box1 {
            width: 100%;
            height: 20px;
            padding: 5px;
            border: 10px solid lightcoral;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

我们可以看到下图效果（我们暂时先不管为什么高度会变成30px，后面我会做解释）聪明的你发现已经没有滚动条了，原因是width: 100%等于content的宽度+padding+border（硬生生的把content+padding+border压进去100%的窗口宽度里面），这个效果很实用，麻麻再也不用担心我用了100%后加padding会出现滚动条的现象了n(≧▽≦)n。
现在解释下为什么高度会变成30px，试着加一下padding 5 * 2 + border 10 * 2 是不是刚刚好是30，没错因为我们设置了border-box，所以我们原本设置的height: 20px，装不下，那就会被撑开，所以此刻去掉height的设置，效果也是一样滴。
border-box效果图