前端開發知識點之 css

CSS

css兩個性質：
1） 繼承性。有一些屬性給祖先元素，全部的後代元素都集成上了。

• 哪些屬性能繼承：color、font-、text-、line-
• 這些關於文字樣式的，都可以繼承； 全部關於盒子的、定位的、佈局的屬性都不能繼承。

2） 層疊性。層疊性是一種能力，就是處理衝突的能力。當不一樣選擇器，對一個標籤的同一個樣式，有不一樣的值，聽誰的？這就是衝突。css有着嚴格的處理衝突的機制：

• 選擇上了，數權重，(id的數量，類的數量，標籤的數量)。若是權重同樣，誰寫在後面聽誰的。
• 沒有選擇上，經過繼承影響的，就近原則，誰描述的近聽誰的。若是描述的同樣近，好比選擇器權重，若是權重再同樣重，誰寫在後面聽誰的。

css 權重

如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值：

/*權重爲1*/
  div{
  }
  /*權重爲10*/
  .class1{
  }
  /*權重爲100*/
  #id1{
  }
  /*權重爲100+1=101*/
  #id1 div{
  }
  /*權重爲10+1=11*/
  .class1 div{
  }
  /*權重爲10+10+1=21*/
  .class1 .class2 div{
  }

若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現! important不容許使用。由於會讓css寫的很亂。

同一個標籤，攜帶了多個類名，有衝突：

<style>
    .spec2{
        color:blue;
    }
    .spec1{
        color:red;
    }

</style>
<p class="spec1 spec2">我是什麼顏色？</p>
<p class="spec2 spec1">我是什麼顏色？</p>

Answer :都是紅色的,由於css中red寫在後面。

float

水平居中

垂直居中

layout

三欄自適應

• 聖盃佈局 Holy Grail Layout

  • 首先渲染主體部分
  • 所有左浮動
  • contianer 用padding擠出左右兩欄的空間
  • 左右兩欄利用負margin + 相對佈局 + left／right 移到相應位置

• 雙飛翼佈局 Flying Swing Layout

  • 首先渲染主體部分
  • 所有左浮動
  • contianer第一個div中的main利用margin擠出左右兩欄的空間
  • 左右兩欄利用負margin移到相應位置

二欄自適應