HTML5入門（CSS樣式-------------------（CSS基礎知識點----------------------------））

CSS繼承性+層疊性+盒子+浮動

1、CSS繼承性

eg:

                <style>

                              div{

                                     color: pink;

                                     font-size: 30px;

                                     width: 500px;

                                     background: green;

                                     padding: 100px;

 

                                   }

                              p{

                                       color: red;

                                 }

                </style>

                 <div>

                          <p>咱們都是好孩子</p>

                          <ul>

                                     <li>

                                          <p>咱們都是棟樑之才</p>

                                     </li>

                          </ul>

              </div>

經過以上的代碼。，咱們能夠看到p標籤繼承了div設置的樣式。

繼承不只僅是子代，能夠是子代的子代。能夠一直延續。

繼承是有原則的：通常是color、text—、font-、line- 這些屬性。

2、層疊性

2.1

在css中有許多的重疊樣式，在衆多的樣式中選擇元素須要的那一個。那麼該如何去選擇呢？ 在瀏覽器的內核中有着嚴謹的權重計算公式，經過權重計算公式去選擇須要的樣式。

權重公式：id選擇器，類選擇器，標籤選擇器  優先級依次減少。

1.若是元素被選中了，那麼就可使用權重公式來計算大小，大的將被使用。若是同樣大小，則誰寫在了後面就使用誰。

2.若是元素沒有被選中，則經過繼承的方式傳遞樣式，這時權重能夠看作爲0. 這種狀況下咱們使用就近原則，就近原則：誰靠着該元素近那麼就選誰。

3.若是元素沒有被選中，而且距離元素都同樣近，這時咱們又可使用權重計算公式。 若是權重同樣大小，則誰寫在了後面就使用誰。

2.2

eg:

             .two{

                   color: green;

                   }

            .one{

                  color: red;

                 }

                <p class="one two" id="haha">咱們都在學習H5</p>

以上這種狀況，是按照樣式的前後去選擇。與html中元素設置的class屬性名字先後順序無關。

2.3

           ！Important ：提高屬性的優先級。

             eg:      #haha{

                              color: orange;

                              font-size: 20px;

                            }

                        p{

                              color: blue !important; 提高屬性的優先級

                              color: blue; !important;

                               font-size: 14px;

                          }

                 /*不影響就近原則*/

                 .heiheihei{

                              color:yellow !important;

                              }

                      .xixi{

                              color: skyblue;

                            }

須要注意三點：

1.它只針對於屬性有效，須要注意正確的書寫方式，寫在分號內。

2.它沒法提高繼承性的選擇器權重（也就是未選中該屬性的選擇器），該是0仍是0

3.它不影響就近原則。

 

 

 

3、盒子模型

3.1盒子

盒子包含5個元素：width、height、padding、border、margin

 

Width：必定要注意width是內容的寬度。

Height：注意height是內容的高度。

Padding：內邊距，內容與邊框之間的間隙

Border：邊框

Margin：外邊距，相對於內邊距記憶。邊框外部的間隙

3.2padding內邊距

Padding有四種書寫方式：

一、padding：20px； 表明上右下左四個方向都是20像素的邊距

二、Padding：20px 30px；第一個數字是上下方向的大小，第二個數字是左右方向的大小

三、Padding：20px 30px 40px；第一個數字是上方向的大小，第二個數字是左右方向上的大小，第三個是下反向的邊距大小

四、Padding：10px 20px 30px 40px；這分別是四個方向上的邊距大小。

 

Padding邊距的另外一種寫法形式

padding-top: 10px;

padding-right: 70px;

padding-bottom: 80px;

padding-left: 90px;

分別寫四個方向上的邊距大小。

3.3border邊框

Border的寫法：

border: 10px solid #567;

三個屬性分別表明了：寬度、樣式、顏色； 顏色是能夠省略的默認爲黑色，可是其它兩個屬性是不能夠省略的。

線條樣式：有不少種，舉例：solid實線 dashed虛線 outset突出感 inset凹

border-width: 10px;

border-style: dashed;

border-color: #567;

單獨寫邊的寬度、樣式以及顏色。這樣寫仍是四條邊共用。

 

border-top: 10px solid red;

border-right: 5px solid yellow;

border-bottom: 15px solid blue;

border-left: 20px solid #789;

這是分別給每一條邊設置寬度、樣式和顏色。

 

border-top-style: dashed;

這是頂邊設置樣式屬性，也就是說每一條邊每一種屬性均可以單獨去寫。

 

4、標準文檔流

4.1

標準文檔流中的幾種現象：

1.排布的順序爲從左到右，從上到下。

2.空白摺疊現象，若是html語言中有換行或者空格、縮進都會替換爲空格在網頁中顯示。

3.在同一行中，底部基線對齊。

4.文本自動換行。

根據標準文檔流將標籤分爲兩種類型：

塊級標籤：獨佔行，能夠設置寬高以及邊距，通常能夠聽任意內容（P標籤除外）。

行內標籤：能夠在一行內顯示，不能夠設置寬高以及某些間距，通常是文本級標籤（p除外）。

4.2

在標準文檔流中，也能夠實現塊級元素與行級元素的身份互換。只須要經過display屬性進行互換

Display：block；設置爲塊級元素

Display：inline；設置爲行內級元素

Display：inline_block; 設置爲行內塊級元素。行內塊級元素：在行內顯示，不獨佔行。而且能夠設置寬高和邊距。

5、浮動

浮動就是讓咱們的元素脫離標準文檔流，目的是爲了佈局好看！

浮動的現象：

1.脫離標準文檔流被叫作脫流，同時會出現字圍現象。我是老二沒有被蓋住！！

 

2.浮動的元素會相互貼靠，並且若是父容器空間足夠大，則浮動的元素會正常緊靠也就是後一個元素會緊靠前一個元素。若是父容器空間不夠大，那麼元素會找上級的上級去緊靠，若是還找不到則繼續找上級緊靠，沒有了上級可靠那就靠邊。

 

 

 

3.浮動的元素不分塊級和行內類別，也就是說均可以設置寬高可邊距。

4.浮動之後，同一行內的元素以頂邊做爲基線對齊。