Box-sizing reset

最新推荐文章于 2021-03-26 01:52:28 发布

WebKoalaBoy

最新推荐文章于 2021-03-26 01:52:28 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS技巧

本文链接：https://blog.youkuaiyun.com/hongyu799/article/details/83790009

CSS技巧专栏收录该内容

13 篇文章

订阅专栏

<!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>