css 選擇器；盒模型

一.引入方式：
（1）CSS 層疊樣式表    
      做用：修飾網頁結構
      
      
（2）css的三種引入方式
      - 行內樣式
         注意：行內樣式的優先級是最高的
      - 內接樣式
      - 外接樣式
  
二.css選擇器 

• 基礎選擇器
  • * 通配符選擇器
    • 匹配全部的標籤，一般不建議使用通配選擇符，由於它會遍歷並命中文檔中全部的元素，出於性能考慮，需酌情使用
    • *{padding：0； margin：0 ；} 重置樣式
  • #wrap  id選擇器
    • 匹配以惟一標識符id屬性等於wrap的對象做爲選擇符，惟一的只有一個
  • div 標籤選擇器 匹配di標籤的選擇器
  • . 類名  類選擇器
    • 以class屬性包含myclass的E對象做爲選擇符不一樣於ID選擇符的惟一性，類選擇符能夠同時定義多個
• 高級選擇器
  • ul a  後代選擇器
    • 選擇符將會命中全部符合條件的後代，包括兒子，孫子，孫子的孫子...
      div ul li p{
      color: red;
      }
  • 子代選擇器 ； 只能是親兒子
    div>p{
    }
  • 組合選擇器 ； 多個選擇器組合到一塊兒共同設置樣式
    div,p,a,li,span{
    font-size: 14px;
    }
  • 交集選擇器
    div.active{
    }
  • 屬性選擇器
    input[type='text']
  • li+a 相鄰選擇器 選擇緊貼在li元素以後a元素
  • li a 兄弟選擇器 選擇li元素後面的全部兄弟元素a
• 僞類選擇器
  • a:link 設置超連接a在未被訪問前的樣式
  • a:visited 設置超連接a在其連接地址已被訪問過期的樣式
  • a:hover 設置元素在其鼠標懸停時的樣式
  • a:active 設置元素在被用戶激活（摁住的時候）時的樣式
  • E:focus 設置元素在成爲輸入焦點（該元素的onfocus事件發生）時的樣式
• 僞元素選擇器
  • E:before 設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用，而且必須定義content屬性
    p:before 在...的前面添加內容 必定要結合content
  • E:after 設置在對象後（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用，而且必須定義content屬性
    p:after 在...的後面添加內容 與後面的佈局有很大關係
• 屬性選擇器
  • E[att] 選擇具備att屬性的E元素
  • E[att="val"] 選擇具備att屬性且屬性值等於val的E元素
  • E[att^="val"] 選擇具備att屬性且屬性值爲以val開頭的字符串的E元素
  • E[att$="val"] 選擇具備att屬性且屬性值爲以val結尾的字符串的E元素
  • E[att*="val"] 選擇具備att屬性且屬性值爲包含val的字符串的E元

三.css的繼承性和層疊性 （坑）

   繼承性： color、text-xxx、font-xxx、line-xxx的屬性是能夠繼承下來。盒模型的屬性是不能夠繼承下來的
   a標籤有特殊狀況，設置a標籤的字體顏色 必定要選中a，不要使用繼承性
   
   層疊性： 覆蓋
   
      （1）行內> id > class > 標籤 ****
   
         1000 > 100 > 10 > 1
  
      （2）數數 數 id  class 標籤
      （3）先選中標籤，權重同樣，之後設置爲主
      （3）繼承來的屬性 它的權重爲0 ，與選中的標籤沒有可比性
      （4）若是都是繼承來的屬性，保證就近原則
      （5）都是繼承來的屬性，選擇的標籤同樣近，再去數權重

四.盒模型

屬性：      width:內容的寬度      height:內容的高度      padding:內邊距 內容到邊框的距離      border:邊框      margin:外邊距  另外一個邊到另外一個邊的距離         盒模型的計算：      總結：若是保證盒模型的大小不變，加padding 就必定要減width或者減height      前提是：在標準文檔流            padding：父子之間調整位置            margin: 兄弟之間調整位置