CSS 基礎(盒模型、選擇器、權重、優先級)

層疊樣式表(Cascading Style Sheets)

• 盒模型
• 選擇器
• 權重與優先級
• 繼承

---

盒模型

盒模型包含四部分：margin、border、padding、content。若是不使用doctype聲明，瀏覽器默認使用本身的模式解析。如IE使用IE盒模型，firefo則使用標準盒子模型等。

標準盒子模型

IE盒子模型的區別是，content區域包含border和padding

選擇器

選擇器分類：

• 元素選擇器
• 通配符選擇器 *
• 類選擇器
• 屬性選擇器
  • [attribute] 匹配帶指定屬性的元素
  • [attribute=value] 匹配帶指定屬性和值的元素
  • [attribute^=value] 匹配屬性值以指定值開頭的每一個元素，如：h1[class^=bar] 匹配class以bar開頭的h1元素
  • [attribute$=value] 匹配屬性值以指定值結尾的每一個元素
  • [attribute*=value] 匹配屬性值中包含指定值的每一個元素
  • [attribute~=value] 匹配屬性值中包含指定值的元素， 必須匹配整個的單詞
  • [attribute|=value] 匹配屬性值以指定值開頭的元素，必須匹配整個單詞，或者是-前的整個單詞
• 後代選擇器
  • 匹配後代元素 如：h1 span，匹配h1後的全部span標籤
  • 匹配子元素 如：h1 > span，匹配h1後的全部span子標籤
  • 匹配相鄰兄弟元素 如：h1 + .bother
  • 匹配同父級的後面的兄弟節點 如：h1 ~ .bother
• 僞類選擇器(針對元素的狀態)
  • 使用順序能夠是：:link、:visited、:focus、:hover、:active，由於若是 :link和:visited放在最後，那全部的元素都會是已訪問或者未訪問的狀態，設置好的:focus :hover :active失效，因此 :link和:visited最好放置在前面。
  • 連接僞類 :link :visited
  • 動態僞類 :focus :hover :active
  • 元素僞類 :first-child等
• 僞元素選擇器(必須放在出現該僞元素的選擇器的後面)
  • :first-letter 塊級元素的首字母樣式
  • :first-line 首行樣式
  • :after 元素以後
  • :before 元素以前

僞類與僞元素區分

僞類：用於向某些選擇器添加特殊的效果，如：:link :active，（在原有的元素上添加類別）僞類的效果能夠經過添加一個實際的類來達到

僞元素：用於將特殊的效果添加到某些選擇器，如：:after :before，（添加新元素後加以標識）僞元素的效果須要經過添加一個實際的元素才能達到

權重與優先級

權重等級

• 內聯樣式 1000
• ID選擇器 0100
• 類選擇器、屬性選擇器、僞類選擇器 0010
• 元素選擇器、僞元素選擇器 0001
• 通配符選擇器 0000

優先級計算

• !important > 內聯樣式 > 高權重 > 低權重
• !important > id > class > tag
• 同權重：內聯樣式 > 嵌入樣式表 > 外部樣式表

繼承 inherit

繼承均是沿着dom樹向下繼承，只有一個特殊狀況，即body的背景內容會向上傳播到html。

不可繼承的屬性(與盒模型、position�相關�的)：

• margin，padding等
• border，border-radius、box-shadow等
• float，width，height等

可繼承屬性(與基本樣式設計有關的)：

• 字體相關，字體顏色、字體大小等
• 行高
• 背景顏色等

四、居中

普通元素水平居中（已知寬）：
  margin： 0 auto；
  
  絕對定位absolute元素居中：
      一、（已知寬高）藉助 left/top 和 margin-left/margin-top
      二、使用 top:50%, left:50%, transform: translate(-50%, -50%)  translate百分比是相對於自身寬度高度
      三、flex佈局
      四、display:table與display:table-cell
         table-cell：讓標籤元素以表格單元格的形式呈現，相似於td標籤
      <div class="toast-container">
        <div class="toast-box">
          <div class="box"></div>
        </div>
      </div>

      <style>
        .toast-container {
            position: fixed;
            width: 100%;
            height: 100%;
            display: table;
        }
        .toast-box {
            display: table-cell;
            vertical-align: middle;
        }
        .box {
            margin: auto;
            width: 100px;
            height: 100px;
            background: #dd0000;
        }
      </style>
複製代碼

五、position各個值的定位原點

absolute：絕對定位，相對第一個值不是static的元素定位
  relative：相對定位，相對其正常位置定位
  fiexd：固定定位，相對瀏覽器窗口
  static：默認值，無定位
  inherit：繼承父級position值
複製代碼

六、display值介紹

block：塊類型，可設置寬高，換行展現
  inline：行內類型，不可設置寬高，同行展現
  inline-block：默認寬度爲元素寬度，可設置寬高，同行展現
  none：像行內元素類型同樣顯示
  table：塊級表格
  list-item：像塊類型元素同樣顯示，並添加樣式列表標記
  inherit：繼承父級
複製代碼

七、動畫的最小時間間隔最好是多少

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms
複製代碼

八、關於line-height

1）normal 默認值，跟隨用戶瀏覽器，與元素字體關聯
  2）<number> 如line-height:1.5，假設文字大小20像素，實際行高爲 20*1.5
  3）<length> 如line-height:15px;line-height:1.5em [px/pt/em/rem]
  4）<percent>如line-height:150，假設文字大小20像素，實際行高爲 20*150%
  5）繼承 inherit[IE8+]
  
  注意：
     line-height:1.5，子元素能夠繼承，根據本身的字體大小進行計算；
     而line-height:150或者line-height:1.5rem，子元素繼承，可是不會根據自身字體大小進行計算。 
複製代碼

九、元素被設置爲float後，display屬性的值會自動變成block。

十、:after和:before

以後添加用after；以前用before；
複製代碼

十一、BFC 塊級格式化上下文［block formatting context］

一、BFC是什麼
    塊級格式化上下文
    樣式上：與普通容器無異；
    功能上：能夠看做是隔離了的獨立容器，容器裏面的元素不會在佈局上影響到外面的元素
  二、觸發BFC的條件(如下任意一個便可)
    浮動元素，float 除none之外的值；
    絕對定位元素，position（absolute，fixed）；
    display爲inline-blocks，table-cells，table-captions，table-caption(css3)；
    overflow爲hidden，auto，scroll；
  三、BFC的特性
    1）可包含浮動元素
      內部有浮動元素，父容器設置overflow爲hidden，auto，scroll便可清除浮動，只有ie7+支持
      清除浮動[兼容IE6]：
        {
          .clearfix｛zoom：1；｝
          .clearfix:after{content: ‘’ ; display:table; clear: both;}
         }
     只是局部可以使用.clearfix｛_zoom：1；overflow: hidden;｝ 注意反作用
    2）可阻止元素被浮動元素覆蓋等
複製代碼

十二、浮動元素致使高度塌陷的解決方法

父級設置 overflow：hidden／scroll／auto
  父級元素爲 BFC
  父級元素設置height
複製代碼

1三、外邊距合併

即垂直方向上設置margin會合並，若是margin值不同則選高度大的那一個。
複製代碼

1四、瀏覽器兼容性問題

一、各個瀏覽器的默認設置不一樣，可選擇初始化CSS樣式，重現設置；
  二、background-position-x/background-position-x在版本稍低的firefox中不支持，可選擇使用background-position
複製代碼