html css`盒子模型

选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

　　　　　　　后代选择器
            #box p{
                width: 200px;
                height: 50px;
                background-color: bisque;
            }
            子选择器
            #box1>p{
                width: 100px;
                height: 20px;
                background-color: red;
            }

　　　　　　交集选择器
            p,#div4{
                width: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <!-- 后代选择器 -->
        <div id="box">
            <div id="div1">
                <p>1111111111</p>
            </div>
            <div>
                <p>222222222</p>
            </div>
            <p>0000000000</p>
            <p>0000000001</p>
        </div>
        
        <!-- 子选择器 -->
        <div id="box1">
            <div>
                <p>1111111111</p>
            </div>
            <div>
                <p>2222222</p>
            </div>
            <p>000000000</p>
        </div>
        <!-- 交集选择器 -->
        <p>21111</p>
        <div id="div4"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .c1{
                width: 200px;
                height: 210px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <!--标签选择器 -->
        <div>
            1111111111
        </div>
        <div>
            2222222222
        </div>
        
        <!--类选择器 -->
        <p class="c1">1111</p>
        <p class="c2">2222</p>
        <p class="c1">3333</p>
        
        
    </body>
</html>

盒子模型

内填充距离
当设置padding-left 或padding-right后，会增加元素的宽度，如果要使宽度不变，应该在
原有基础上减去对应的值
设置padding-top 或padding-bottom后，也是如此

外边距
当设置某一个盒子的margin-bottom和另一个盒子的margin-top时，上下距离不是相加，而是取其中的较大值

margin-right 和margin-left时，左右的边距是二者相加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /* 先把默认的内外边距清空 */
            *{
                margin: 0;
                padding: 0;
            }    
            .div1{
                border: 1px solid red;
                width: 280px;
                height: 270px;
                border-top: 10px solid green;
                border-right: 10px solid yellow;
                border-bottom: 10px solid red;
                border-left: 10px solid blue;
                /* 盒子模型向任何一个方向内填充都会撑大宽度，所以需要减少相应的填充宽度 */
                padding-left: 20px;
                padding-top: 30px;
            }
            .div2{
                border: 10px solid black;
                width: 300px;
                height: 300px;
                margin-left: 30px ;
            }
        </style>
    </head>

    <body>
        <div class="div1">
            我是黑子模型
        </div>
        <div class="div2">
            我是盒子2
        </div>
    </body>
</html>

猜你喜欢