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

陳俊汝發表於2018-09-06
CSS模型

層疊樣式表(Cascading Style Sheets)

盒模型

盒模型包含四部分：margin、border、padding、content。如果不使用doctype宣告，瀏覽器預設使用自己的模式解析。如IE使用IE盒模型，firefo則使用標準盒子模型等。

標準盒子模型

標準盒子模型.png

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

IE盒子模型.png

選擇器

選擇器分類：

  • 元素選擇器
  • 萬用字元選擇器 *
  • 類選擇器
  • 屬性選擇器
    • [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等

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

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

4、居中

  普通元素水平居中（已知寬）：
  margin： 0 auto；
  
  絕對定位absolute元素居中：
      1、（已知寬高）藉助 left/top 和 margin-left/margin-top
      2、使用 top:50%, left:50%, transform: translate(-50%, -50%)  translate百分比是相對於自身寬度高度
      3、flex佈局
      4、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>
複製程式碼

5、position各個值的定位原點

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

6、display值介紹

  block：塊型別，可設定寬高，換行展示
  inline：行內型別，不可設定寬高，同行展示
  inline-block：預設寬度為元素寬度，可設定寬高，同行展示
  none：像行內元素型別一樣顯示
  table：塊級表格
  list-item：像塊型別元素一樣顯示，並新增樣式列表標記
  inherit：繼承父級
複製程式碼

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

  多數顯示器預設頻率是60Hz，即1秒重新整理60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
複製程式碼

8、關於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，子元素繼承，但是不會根據自身字型大小進行計算。 
複製程式碼

9、元素被設定為float後，display屬性的值會自動變成block。

10、:after和:before

  之後新增用after；之前用before；
複製程式碼

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

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

12、浮動元素導致高度塌陷的解決方法

  父級設定 overflow：hidden／scroll／auto
  父級元素為 BFC
  父級元素設定height
複製程式碼

13、外邊距合併

  即垂直方向上設定margin會合並，如果margin值不一樣則選高度大的那一個。
複製程式碼

14、瀏覽器相容性問題

  1、各個瀏覽器的預設設定不同，可選擇初始化CSS樣式，重現設定；
  2、background-position-x/background-position-x在版本稍低的firefox中不支援，可選擇使用background-position
複製程式碼

相關文章