Html/CSS03（盒子模型傳參）

weixin_34162695發表於2018-07-11
HTMLCSS模型

今天是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內聯標籤

內聯標籤的特點是：並排顯示，不能設定width和height屬性，不能設定margin-top，margin-bottom屬性，重用的內聯標籤有 a span i em strong b

3.3內聯塊標籤

內聯塊標籤的特點是可以並排顯示也可以設定width和height屬性，常用的內聯塊標籤有input button img

4.內聯元素的居中

雖然內聯標籤不能設定width和height屬性，不能設定margin-top，margin-bottom屬性，但我們可以通過如下修改使之水平居中。
<style>
    /* 
        使內聯元素居中需要設定display屬性為block 
        塊標籤預設 display：block
        內聯標籤 display：inline
        內聯塊標籤 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屬性的情況下使內聯和內聯塊元素水平居中

當不使用display時我們可以修改父級元素的居中方式來使內聯元素水平居中，如下：
<style>
        /* 
            不改變display屬性使內聯和內聯塊水平居中 
            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選擇器的優先

測試如下程式碼很容易發現，Css選擇器的優先順序別分別是

//！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;
        }

相關文章