CSS3的box-sizing 属性

最新推荐文章于 2024-01-06 14:27:44 发布

纸短情长的博客

最新推荐文章于 2024-01-06 14:27:44 发布

阅读量2k

点赞数 3

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

本文链接：https://blog.csdn.net/qq_41376345/article/details/112622602

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS3的box-sizing 属性

box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式
box-sizing: content-box; 这是默认属性，盒子的宽度和高度只包含内容，不包含内边距和边框
box-sizing: border-box; 盒子宽度和高度包括了padding 和 border 
如果设置一个盒子

 div{
       width:100px; 
       border:10px solid red; 
       padding:10px;
    }

*那么最终 div 容器的实际宽度为：*
100px(width)+2*10px(padding)+2*10px(border)=140px

所以你会得到一个比你预期（100px）还要更大的容器，结果就是会破坏网页布局。

注意：margin 的尺寸不会被计算入最终容器宽度，因为对他的定义为对这个容器的留白，但不属于容器本身。

如果当我们定义一个容器的 box-sizing 属性为 border-box 时（表达式 div{box-sizing:border-box}）
那么我们创建一个和上段中相同设置的 <div> 容器时，那么他的最终宽度即为 100px,
那么它的内容部分的有效宽度变成了 100px-2*10px-2*10px=60px; 所以你会得到一个你预期大小的盒子容器
但是只是被压缩了内容部分尺寸而已，但是对于整体布局而言益处颇多。

所以要合理利用好这个属性，这个属性十分重要。

<!DOCTYPE html>
<html>
<head>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .bigBox{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            background-color:blue;
        }
        .smallBox{
            width: 500px;
            height: 50px;
            margin: 0 auto;
            background-color: skyblue;
            padding-left: 50px;
            box-sizing: border-box; /*盒子宽度和高度包括了padding 和 border */
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <div class="smallBox">
            我是smallBox中的内容
        </div>
    </div>
</body>

</html>

运行结果
在这里插入图片描述
如果不加 box-sizing: border-box；则运行结果为

纸短情长的博客

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
CSS3的box-sizing 属性

CSS3的box-sizing 属性box-sizing 最主要的用法是规定容器元素的最终尺寸计算方式box-sizing: content-box; 这是默认属性，盒子的宽度和高度只包含内容，不包含内边距和边框box-sizing: border-box; 盒子宽度和高度包括了padding 和 border 如果设置一个盒子 div{ width:100px; border:10px solid red; padding:10px; }
复制链接

扫一扫