day03

今天所学到的如下：

AM

1.盒子模型的传参

<style>
div{
            width: 100px;
            height: 100px;
            background: red;
            margin:100px 200px 300px;
   }
</style>

注释： margin：100px 四个方向全部改变
margin：100px 200px top，bottom--100px;left,right--200px
margin: 100px 200px 300px top--100px;right,left--200px;bottom--300px
margin: 100px 200px 300px 400px 按顺时针转

2.padding

<style>
div{
            width: 100px;
            height: 100px;
            background: red;
            padding:20px 30px 40px;
        }
</style>

注释：传一个参数四个方向都改变
传两个参数第一参数top,bottom;第二参数left,right
传三个参数第一参数top;第二参数left,right;第三个参数bottom
传四个参数 top,right,bottom,left

3.

<style>
*{margin: 0;padding: 0}
        div{
            width: 300px;
            height: 300px;
            background: rebeccapurple;
            padding: 20px;
        }
</style>

注释：元素内容的起始位置，是基于它自身width，height的起始位置

4.标签的分类

<style>
        div{
            width: 100px;
            height: 100px;
            background: rebeccapurple;
            margin-top: 100px;
            margin-bottom: 100px;
        }
        a{
            width: 100px;
            height: 100px;
            background: rebeccapurple;
            margin-top: 100px;
            margin-bottom: 100px;
        }
        input{
            width:100px;
            height:100px;
            /* display:inline-block */
        }
    </style>


<body>
    <!--
        h1,p,div,ul,li,dl,dt,dd块标签
        特点：1.独占一行 2.能设置width,height
    -->
    <h1>h1</h1>
    <p>p</p>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <dl>
        <dt>dt</dt>
        <dd>dd</dd>
    </dl>
    <div>div</div>
    <!--
        内联标签
        特点：1.并排显示 2.不能设置width,height 3.不能设置margin-top,margin-bottom
    -->
    <a href="#"></a> <span>span</span> <i>i</i> <em>em</em> <strong>strong</strong>
    <br>
    <!--
        内联块
        input,img,button
        特点：1.并排显示 2.能设置width,height
    -->
    <input type="text">
    <img src="images/icon1.png" alt="">
    <button>button</button>
</body>

5.

<style>
        /*
          内联元素和内联块元素水平居中
          {
              display:block;
              margin-left: auto;
              margin-right: auto;
          }
        */
        /*
          块标签默认display:block;
          内联默认 display:inline;
          内联块默认 display:inline-block
        */
        span{
            display: block;
            margin-left: auto;
            margin-right: auto;
            background: rebeccapurple;
            width: 100px;
        }
        img{
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>


<body>
    <span>span</span>
    <br>
    <img src="images/icon1.png" alt="">
</body>

6.水平居中

 <style>
        body{
            text-align: center;
        }
    </style>


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

PM

1.分组选择器

<style>
        /*p{
            color:red;
        }
        */
        /*.one{
            color:red;
        }
        */
        /*.#two{
            color:red;
        }
        */
        /*伪装选择器*/
        /*
          p:hover{
              color:firebrick;
          }
        */
        /*分组选择器*/
        p,h1,div{
            color:aqua;
        }
    </style>


<body>
    <p class="one">hello world</p>
    <h1>h1</h1>
    <div>div</div>

2.后代选择器

<style>
        /*
           .parent>p{} 亲儿子
        */
        /*
           .parent>p{
            color: aquamarine;
        }
        */
        /*
           .parent>p{} 选择parent之后的所有p元素
        */
        .parent>p{
            color: aquamarine;
        }
    
    </style>


<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>

3.兄弟选择器

<style>
        /*
          兄弟选择器
          div+p{}-->选中div之后的第一个p元素

          div~p{}-->选中div之后的所有元素
        */
        /*
        div+p{
            color:tomato;
        }
         */
        div~p{
            color:tomato;
        }
        /*
          伪装类选择器
          */
        input:focus{
            background: pink;
        }
    </style>


<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>

4伪元素

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

        }
        div:after{
            content: "后面";
            display: block;
            width: 100px;
            height: 50;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>
        content
    </div>

5.属性

<style>
        /*
          属性选择器
          语法
          element[attr=value]
        */
        [class="one"]{
            color: yellowgreen;
        }
    </style>


<body>
    <p class="one">hello world</p>
</body>

6.选择器的优先级别

 <style>
        /*!important>id>class>p{} */
        p{
            color: red !important;
        }
        .one{
            color: yellow;
        }
        #two{
            color: green;
        }
    </style>

<body>
    <p class="one" id="two">hello world</p>
</body>

7.选择器的权重

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