day03

作者: 叶子巨蟹 | 来源:发表于2018-07-11 18:10 被阅读0次

    今天学到了什么

    1.盒子模型的传参

    <style>
             /* 
           margin:100px  四个方向全部改变
           margin:100px   200px;  top,bottom-- 100px   left,right -- 200px
           //传三个参数  top--100 left,right -- 200  bottom --300
           margin:100px 200px  300px;
           //传四个参数
           margin:100px 200px 300px 400px
           top right bottom left
            */
            div{
                width: 100px;
                height: 100px;
                background: greenyellow;
                margin: 100px 200px;
            }
        </style>
    </head>
    <body>
        <div>
    
        </div>
    </body>
    

    2.padding

    <style>
             /* 
            //传一个参数 四个方向都改变
            //传两个参数 第一参数top,bottom 第二个参数left,right
            //传三个参数 
            第一个参数top  第一参数left,right  第三个参数bottom
            //传四个参数 top,right,bottom,left
             */
            div{
                width: 100px;
                height: 100px;
                background: purple;
                padding: 100px 200px 300px;
            }
        </style>
    </head>
    <body>
        <div>
            
        </div>
    </body>
    

    3.元素位置

    <style>
            *{margin:0;padding:0;}
            div{
                width: 100px;
                height: 100px;
                background: yellow;
                padding:20px;
            }
          /*
          元素内容的起始位置,是基于它本身的width,height的起始位置
          */
        </style>
    </head>
    <body>
        <div>
            hello world
        </div>
    </body>
    

    4.标签的分类

     <style>
            h1{
                width: 100px;
                height: 100px;
                background: green;
                margin-top: 100px;
                margin-bottom: 100px;
            }
            a{
                width: 100px;
                height: 100px;
                background: pink;
                margin-top: 100px;
                margin-bottom: 100px;
            }
            input{
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <!--
            h1,p,div,ul,li,dl,dt,dd
            块标签
            特点:1.独占一行
            2.能设置width,height
        -->
        <h1>hello</h1>
        <p>pppp</p>
        <ul>
            <li>1111</li>
            <li>2222</li>
        </ul>
        <dl>
            <dt>tttt</dt>
            <dd>dddd</dd>
        </dl>
        <div>vvvvv</div>
        <!--
            内联标签
            特点:1.并排显示
            2.不能设置width,height
            3.不能设置margin-top,margin-bottom
        -->
        <a href="#">aaaa</a><span>ssss</span><i>iiii</i><em>eeee</em><strong>rrrr</strong>
        <br>
        <!--
            内联块
            input,img,button
            特点:1.并排显示
            2.能设置width,height
        -->
        <input type="text">
        <img src="images/icon1.png" alt="">
        <button>btnbtn</button>
    </body>
    

    5.混合区分

    <style>
            /*内联元素和内联块水平居中
            {
                dispaly:block;
                margin-left:auto;
                margin-right:auto;
            }
             块标签默认 display:block;
             内联默认 dispaly:inline;
             内联块默认 display:inline-black
            */
            span{
                display:block;
                margin-left: auto;
                margin-right: auto;
                background: red;
                width:100px;
            }
            img{
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <body>
        <span>ssss</span>
        <br>
        <img src="images/icon1.png" alt="">
    </body>
    

    6.水平居中

    <style>
            body{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--
            不改变内联和内联块的display属性 实现水平居中
            实现方案:
            parentElement{
                text-align:center;
            }
        -->
        <span>span</span> <br>
        <img src="images/icon1.png" alt="">
        
    </body>
    

    7.选择器

    <style>
            /* p{
                color:red;
            } */
            /* .one{
                color:yellow;
            } */
            /* #two{
                color:green;
            } */
            /* 伪类选择器 */
            /* p:hover{
                color:firebrick;
            } */
            /* 分组选择器 */
            p,h1,div{
                color:red;
            }
        </style>
    </head>
    <body>
        <p class="one" id="two">hello world</p>
        <h1>h1</h1>
        <div>div</div>
    </body>
    

    8.后代选择器

    <style>
            /* 
            .parent>p{}  亲儿子
             */
            /* .parent>p{
                color:red;
            } */
            /* .parent p{} 选择parent之后的所有p元素 */
            .parent p{
                color:red;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <p>hello world</p>
            <p>hello world</p>
            <div>
                <p>hello world</p>
            </div>
        </div>
    
        <div>
            <p>hello world</p>
        </div>
    </body>
    

    9.兄弟选择器

    <style>
            /* 
            兄弟选择器
            div+p{} -->选中div之后的第一个p元素
            div~p{} -->选中div之后的所有p元素
             */
            /* div+p{
                color:red;
            } */
            div~p{
                color:yellow;
            }
            /* 
            伪类选择器
            input:focus{}
             */
            input:focus{
                background: #ff2d51;
            }
        </style>
    </head>
    <body>
        <div>div</div>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <input type="text">
    </body>
    

    10.伪元素

    <style>
            /*
            伪元素-->用css自定义生产的元素
            div:before{
                content:""
            }
             */
            div:before{
                width:100px;
                height:100px;
                background: red;
                content:"前面";
                display: block;
    
            }
            div:after{
                content:"后面";
                display: block;
                width:100px;
                height:50px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div>
            content
        </div>
    </body>
    

    11.属性选择器

    <style>
            /* 属性选择器
            语法
            element[attr=value]{
    
            }
             */
            
            [class="one"]{
                color:red;
            }
        </style>
    </head>
    <body>
        <p class="one">hello world</p>
    </body>
    

    12.选择器的优先级别

      <style>
            /*!important> id>class>p{} */
            p{
                color:red !important;
            }
            .one{
                color:yellow;
            }
            #two{
                color:green;
            }
        </style>
    </head>
    <body>
        <p class="one" id="two">hello world</p>
    </body>
    

    13.选择器的权重

    <style>
            /* 选择器嵌套的层次越深,那么权重越高 */
            .child{
                color:red;
            }
            .parent>.child{
                color:green;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">child</div>
        </div>
    </body>
    

    相关文章

      网友评论

          本文标题:day03

          本文链接:https://www.haomeiwen.com/subject/cmxkpftx.html