关于css盒模型的理解

在学习到css3盒模型的时候

<style>
        * {
            padding: 0;
            margin: 0;
        }

        div:nth-child(1) {
            box-sizing: content-box;
            width: 300px;
            height: 300px;
            background-color: orange;
            padding: 50px;
            border: 50px solid red;
            margin: 50px;
        }
        div:last-child {
            box-sizing: border-box;
            width: 300px;
            height: 300px;
            background-color: skyblue;
            padding: 50px;
            border: 50px solid red;
            margin: 50px;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>

　　可以发现content-box的盒模型中width仅仅是指width，但是在border-box的盒模型中width是指width，padding，border的值，共同点都是不包括外边距

posted @ 2020-11-09 22:38  coderLsq  阅读(15)  评论(0)    收藏  举报