24、盒子的水平布局

2024-09-30 / 0 评论 / 4 阅读 / 正在检测是否收录...

09/30


<!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>盒子的水平布局</title>
    <style>
        /*
            一、盒子水平宽度
            当一个盒子出现在另一个盒子的内容区时，该盒子的水平宽度“必须”等于父元素内容区的宽度
            盒子水平宽度：
            margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
            水平居中：（margin：0 auto；）
        */

        .father{
            width: 1200px;
            height: 200px;
            border: 5px solid red;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: #c7edcc;
            margin: 0 auto;
        }
    </style>
    
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

css