网站首页 > 技术文章正文

CSS中关于box-sizing你可能需要知道的小知识

hmc789 2024-11-24 16:42:27 技术文章 1 ℃

今天学习了box-sizing的相关知识，解决我心中一直的困扰，理解了这个属性是干什么的，有什么作用，下面我给大家分享一下我学习的一些心得，以及遇到的一些坑。

在CSS中，box-sizing属性定义了用户代理(浏览器)应该如何计算一个元素的总宽度和总高度。

通常情况下，在默认的CSS盒模型定义里，一个元素的宽（width）高（height）只会应用到当前元素的内容区里。如果这个元素有padding（内边距）或border（边框），那么这个盒子在显示的时候，宽高会加上内边距和边框的值。这就意味着我们在布局的时候，需要时刻主要到这个盒子的内边距和边框，尤其是在使用响应式布局的时候，这点非常烦人。因此，w3c给出了一个新属性，box-sizing，它可以被用来调整这些烦人的特点。

box-sizing有两个值：

content-box：默认值，元素的宽高只用到内容区，在该元素的宽高之外绘制内边距和边框。
尺寸计算公式：
width = 内容区的宽度
height = 内容区的高度
宽度和高度的结果值都不包含内边距（padding）和边框（border）
border-box： 元素的内边距和元素宽高都是包含在宽高内的。
尺寸计算公式：
width = 内容区的宽度 + padding + border
height = 内容区的高度 + padding +border

以下是根据box-sizing不同的值渲染出来的元素尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing：不同值渲染的元素</title>
    <style>
        html {
            font-size: 10px;
        }

        div.box {
            width: 20em;
            height: 12em;
            padding: 2em;
            border: 5px solid red;
            background-color: violet;
        }

        .content-box {
            box-sizing: content-box;
            margin-bottom: 5em;
        }

        .border-box {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box content-box"></div>
    <div class="box border-box"></div>
</body>
</html>

效果图：

从上图可以看出，content-box和border-box的总宽高的值是不一样的。当属性值为content-box时的总宽高：

width：200 + 20x2 + 5x2 = 250px
height: 120 + 20x2 + 5x2 = 170px

当属性值为border-box时的总宽高：

width：150 + 20x2 + 5x2 = 200px
height: 70 + 20x2 + 5x2 = 120px

这里有一点值得注意的是，我在写这个demo的时候为了方便区分两个盒模型，我在第一个box上加了一个margin-bottom，但是我发现这个margin-bottom貌似并不影响这个宽高的结果，不论box-sizing的值是哪个。后来我在MDN上得到了结果，确定了我的猜想是正确的。

最后需要注意的是，这个属性是CSS3的属性，并且这个属性是可以从父元素继承的。以后推荐大家使用box-sizing:border-box，可以写成：

* { box-sizing: border-box; }

这样处理元素大小就方便的多了。

以上就是我学习这个属性的心得，欢迎各路大神指正，有兴趣的小伙伴欢迎大家一起交流。

上一篇：轻量图片查看器-imageGlass
下一篇： CSS box-sizing 样式

网站首页 > 技术文章 正文

CSS中关于box-sizing你可能需要知道的小知识

猜你喜欢

网站首页 > 技术文章正文