css拾遗(2)盒模型box-sizing:border-box

作者: 姜治宇 | 来源:发表于2022-03-29 11:11 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        ::before,
        ::after {
            box-sizing: border-box;
        }
        body{
            background:green;

        }
        .box{
            float:left;
            height:500px;
            
            padding:20px;
      
            border:10px solid #ccc;
           
        }
        .w-70{
            width:calc(70% - 20px);
            background:red;
            margin-right:20px;
        }
        .w-30{
            width:30%;
            background:yellow;
        }

    </style>
</head>
<body>

    <div class="box w-70">
        11111111111
    </div>
    <div class="box w-30">
        222222222222
    </div>
</body>
</html>

666.png