box-sizing属性的使用

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

hzjangel

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

阅读量3.9k

点赞数 2

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/hzjanger/article/details/84932374

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

语法：box-sizing: content-box | border-box
默认值： content-box
计算方式：

content-box：盒子的宽度是给定的宽度+padding+border,盒子的高度是给定的高度 + padding + border，设置了padding和border也不会减少内容的宽度和高度。
border-box：盒子的宽度和高度就是给定的宽度和高度，如果设置了padding和border，将减少内容的宽度和高度。

如下实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .layout {
            padding: 20px;
            width: 200px;
            height: 200px;
            border: 2px solid chartreuse;
        }
        .use-box-sizing {
            background: yellow;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            
            margin-bottom: 5px;
        }
        .no-use-box-sizing {
            background: red;
        }
    </style>
</head>
<body>
<div class="layout use-box-sizing">使用box-sizing</div>
<div class="layout no-use-box-sizing">不使用box-sizing</div>
</body>
</html>

显示的结果设这样的
在这里插入图片描述单独看每个盒子的具体布局
这是没有设置box-sizing的div，box-sizing使用的是默认值content-box

这个是设置了box-sizing的div

可以看出如果设置了box-sizing为box-border的div的实际宽度和高度都没有改变，但是内容的宽高减少了，变为了宽：156px，高：156px，没有设置box-sizing的div，实际宽高变了，宽：244px，高：244px，但是内容的宽高没有改变，