Box-sizing reset

最新推荐文章于 2022-05-14 18:57:44 发布

原创最新推荐文章于 2022-05-14 18:57:44 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

CSS技巧专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了CSS中box-sizing属性的使用，通过实例对比了border-box和content-box两种不同的盒模型，展示了它们如何影响元素的布局和尺寸计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            /*为元素设定的宽度和高度决定了元素的边框盒。
            就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
            通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。*/
            box-sizing: border-box;
        }
        *,
        *::before,
        *::after {
            box-sizing: inherit;//规定应从父元素继承 box-sizing 属性的值
        }
        .box {
            display: inline-block;
            width: 150px;
            height: 150px;
            padding: 10px;
            background: tomato;
            color: white;
            border: 10px solid red;
        }
        .content-box {
            box-sizing: content-box;//宽度和高度分别应用到元素的内容框在宽度和高度之外绘制元素的内边距和边框

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