asd

05_box-sizing

知识点

一、box-sizing的作用

保证了增加 边框、内边距时, 元素的实际宽高不变

二、普通盒子和怪异盒子如何设置，两者实际宽高的区别

  • 普通盒子：box-sizing: content-box;
    实际宽高 = 内容区域 + 内边距 + 边框
  • 怪异盒子：box-sizing: border-box;
    实际宽高 = 内容区域
    (最初设置的宽高; PS: 如果设置的padding和border超出内容区域, 则盒子也会变大)

原文件

<!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>
        div {
            width: 300px;
            height: 300px;
        }
        .box {
            background-color: rgb(231, 64, 50);
            margin-bottom: 50px;
            padding: 20px;
            border: 5px solid black;
            /* 350 × 350 */
        }
        .box1 {
            background-color: rgb( 46,124,238);
            padding: 20px;
            border: 5px solid black;
            /*
                box-sizing:
                    CSS3新增属性 保证了增加 边框 内边距时, 元素的实际宽高不变
                普通盒子:
                    box-sizing: content-box; 实际宽高 = 内容区域 + 内边距 + 边框
                怪异盒子:
                    box-sizing: border-box; 实际宽高 = 内容区域(最初设置的宽高; PS: 如果设置的padding和border超出内容区域, 则盒子也会变大)
            */
            box-sizing: border-box;
            /* box-sizing  */
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>
posted @ 2024-01-22 18:02  瓷禾  阅读(32)  评论(0)    收藏  举报