css学习笔记－盒子的box-size

最新推荐文章于 2023-12-21 20:44:59 发布

原创最新推荐文章于 2023-12-21 20:44:59 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

前端开发专栏收录该内容

12 篇文章

订阅专栏

本文通过实例对比了CSS中box-sizing属性的两种值：border-box和content-box的区别。border-box使得元素的实际宽度和高度不受内边距和边框的影响，而content-box则会使元素的实际尺寸随着内边距和边框的增加而增大。

主要有两个参数

border-box和content-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .border-box{
            background-color: crimson;
            width: 100px;
            height: 100px;
            padding: 10px;
            box-sizing: border-box;
        }
        .content-box{
            background-color: aqua;
            width: 100px;
            height: 100px;
            padding: 10px;
            box-sizing: content-box;
        }

    </style>
</head>
<body>
<div class="border-box"></div>
<div class="content-box"></div>
</body>
</html>

代码中写了两个div,两个样式一致，不一样的是，

第一个 box-sizing:border-box，无论怎样，盒子的大小就是宽和高为100px，也就是说，padding也是包含在盒子之中的。

第二个 box-sizing:border-box，盒子的总宽度为 100+10+10

这两个用语言解释起来感觉怎么解释都不对，看以下结果：