今天是2018年7月11日

1.盒子模型的傳參

盒子模型中需要給top/bottom/left/right值。

div{
     margin: 100px ;
     //四個方向都改變
     margin: 100px 200px ;
     //上下100 左右200
     margin: 100px 200px 300px ;
     //上100 左右200 下300
     margin: 100px 200px 300px 400px ;
     //上100右200下300左400 
     // padding同理
        }

2.元素的起始位置

元素內容的起始位置是基于其自身width，height的起始位置

3.標簽的分類

3.1塊標簽

塊標簽的特點是：獨占一行，可以設置width和height屬性，常用的快標簽有h1-h6 p ul-li dl-dt-dd div

3.2內聯(lián)標簽

內聯(lián)標簽的特點是：并排顯示，不能設置width和height屬性，不能設置margin-top，margin-bottom屬性，重用的內聯(lián)標簽有 a span i em strong b

3.3內聯(lián)塊標簽

內聯(lián)塊標簽的特點是可以并排顯示也可以設置width和height屬性，常用的內聯(lián)塊標簽有input button img

4.內聯(lián)元素的居中

雖然內聯(lián)標簽不能設置width和height屬性，不能設置margin-top，margin-bottom屬性，但我們可以通過如下修改使之水平居中。

<style>
    /* 
        使內聯(lián)元素居中需要設置display屬性為block 
        塊標簽默認 display：block
        內聯(lián)標簽 display：inline
        內聯(lián)塊標簽 display：inline-block
    */
    span{
        display:block;
        margin-left: auto;
        margin-right: auto;
        background-color: red;
        width: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>

5.不修改display屬性的情況下使內聯(lián)和內聯(lián)塊元素水平居中

當不使用display時我們可以修改父級元素的居中方式來使內聯(lián)元素水平居中，如下：

<style>
        /* 
            不改變display屬性使內聯(lián)和內聯(lián)塊水平居中 
            fatherElement{
                text-align:center;
            }
        */
        body{
            text-align: center;
        }
    </style>

6.Css選擇器

前面已經學習了元素選擇器，類名選擇器，Id選擇器和偽類選擇器，今天要補充六種Css選擇器

6.1分組選擇器

分組選擇器是將元素分組選擇的Css選擇器。

p,h1,div{
         color: red;
        }

6.2后代選擇器

后代選擇器有兩種，第一種選擇了指定類的指定子類，第二種選擇了指定子0類中的所有指定類如下

//選擇了parent類所有“子類”（僅限子類）中的p標簽
.parent>p{
         color:red;
        }
//選擇了parent標簽中的所有p標簽
.parent p{
         color:red;
        }

6.3兄弟選擇器

兄弟選擇器也有兩種使用方法，第一種方式選擇了指定類兄弟類的第一個標簽，第二種方式選擇了指定類兄弟類的所有指定標簽，如下

//選擇了div標簽兄弟類后的第一個p標簽
div+p{
       color: rebeccapurple;
        }
//選擇了div標簽兄弟類中所有的p標簽
div~p{
       color: red;
        }

6.4偽類選擇器

偽類選擇器之前已經接觸過了，如下

//當鼠標聚焦在input標簽中時，使背景顏色變成紫羅蘭色
 input:focus{
             background-color: violet;
         }

6.5偽元素選擇器

偽元素選擇器可以在指定標簽的指定位置生成一個新的自定義標簽（偽標簽）

//在div標簽之前插入“我在DIV前面”
 div:before{
            content: "我在DIV前面";
            display: block;
         }

6.6屬性選擇器

屬性選擇器利用標簽的屬性選擇標簽，一般少用

div[class="one"]{
             color: red;
         }

7.Css選擇器的優(yōu)先

測試如下代碼很容易發(fā)現(xiàn)，Css選擇器的優(yōu)先級別分別是

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

8.Css選擇器的權重

選擇器嵌套的層級越多，選擇器的權重就越多

.parent{
        color: red;
        }
.parent>.child{
            color: green;
        }