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>

 

posted @ 2018-05-03 17:01  心高心低  阅读(190)  评论(0编辑  收藏  举报