重構不完全教程集之一

  • 2019 年 12 月 4 日
  • 筆記

本文作者：IMWeb 結一 原文出處：IMWeb社區 未經同意，禁止轉載

「無上甚深微妙法，百千萬劫難遭遇，我今見聞得受持，願解如來真實義。」 ——《開經偈》

html標籤

ie8- 不支援html5新增標籤，可通過引入js來實現：html5shiv

<!--[if lt IE 9]>      <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <![endif]-->

或按實際使用手寫js兼容，document.createElement

<!--[if lt IE 9]>  <script type="text/javascript">     document.createElement('header');     ...  </script>  <![endif]-->

最後重置下html5標籤的css默認樣式：

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {    display: block;  }

css入門

盒模型

box-sizing詳解

盒模型可通過box-sizing: border-box | content-box設置，默認值為content-box，ie8+支援。

  • border-box表示設置的width/height包括padding和border
  • content-box表示不包括padding和border
  • 不論是border-box還是content-box都不包括margin
  • outline不影響盒子大小

對應上圖，如果是默認的話，則width為605px，如是border-box的話則為605+24+103+30=673px。

常配合百分比單位使用，尤其應用在移動端。如width:100%;padding:10px;，如果不設置為border-box，則實際寬度為100%+40px，不符合我們的預期要求。

選擇器

css的選擇器是從後往前查詢，所以層級越深，效率越低，一般建議最多不超過4層。

css選擇器包括：通配符*選擇器，class選擇器，id選擇器，元素選擇器，屬性選擇器，偽類選擇器，偽元素選擇器，最後

css選擇器權重原則：!important > 行內樣式 > id > 類/屬性/偽類 > 元素/偽元素；權重相同的按照樣式表中出現的順序，後面的覆蓋前面的

重置

瀏覽器都有自己的默認樣式，各個瀏覽器的默認樣式可參考：瀏覽器默認樣式參考指南

所以為了消除瀏覽器的默認樣式，以達到各個瀏覽器一致表現就出現了css重置，總得來說css重置分為歸零重置及糾正重置

如果你想省事的話直接引入normalize.css，然後再進行部分歸零重置；如果深入研究可以把兩個揉合一起，可參考sandal reset

屬性詳解

屬性大概分為下面幾類：

  • 顯示：display，visibility，overflow等
  • 位置：position，float，clear，z-index，transform等
  • 大小：width，height，margin，padding，border，outline，box-sizing等
  • 文字： font系列，color，text系列等
  • 背景：background系列，gradient系列等
  • 修飾：border-radius，box-shadow，opacity，appearance，filter，clip等
  • 布局：flex，grid等
  • 動畫：transition，animation等

從使用上大概分為兩類，一類是死板的（如設置文本顏色只能用color），一類是靈活的（如實現一個左邊欄固定的布局，可以使用的技術就多了）。相對來說可靈活使用的則更需要掌握各種實現方案的利弊

單位

  • px：絕對單位，
  • em：相對單位，相對於最近父級元素的font-size
  • %：相對單位(padding/margin的百分比單位以width為基準)
  • rem：相對單位，相對於根元素html的font-size，css3新增
  • vw、vh、vmin、vmax：相對單位，相對於視窗寬/高，css3新增
  • rem詳解
  • vw

居中

包括水平及垂直居中，除了常規的水平居中text-algin:center、margin-left:auto;margin-right:auto和垂直居中vertical-align:middle，line-height: height(單行文字垂直的line-height等於height)，還有postition方法，首先設置top:50%;left:50%，再通過margin-left:-width/2;margin-top:-height/2，或css3的transform: translate(-50%, -50%)調整居中，最後還有為布局而生的flex方法。另：對於img或video還有最新的object-position來調整

布局

在flex出現之前，布局不外乎float，position，還有少量的inline-block及table；而現在有了flex和grid，更是如虎添翼。

z-index

line-height

BFC

CSS3 學習

兼容

瀏覽器兼容分為兩部分：瀏覽器是否支援；如何針對瀏覽器寫hack。支援情況可以通過can i use查詢，而針對各種瀏覽器寫hack可以使用browser hacks

註：該系列將會匯總在github上的重構優秀教程合集

VirMach 便宜 VPS

QNews

QNews