學習筆記：MDN的CSS

HTML用於定義內容的結構和語義，CSS用於設計風格和佈局。

CSS規則由選擇器和聲明塊組成；聲明由屬性（properties）和屬性值組成。

CSS介紹：

盒=框=box，邊界=border，內邊距=填充=padding

 

 

DOM （文檔對象模型）是一種樹形結構. 標記語言中的每一個元素、屬性（？）、文本片斷都變爲一個 DOM 節點。因爲 DOM 是 CSS 與文檔內容的相遇之處，理解 DOM 有助於設計、調試和維護你的 CSS 文件。

用外部樣式表將 CSS 應用到 HTML 上能夠說是最好的方法，由於你可使用一個樣式表來設置多個文檔的樣式，而且須要更新 CSS 的時候只要在一個地方更新。除此以外還有內部樣式表（某些狀況下頗有用，好比你正在使用一個CMS（內容管理系統），不能直接修改 CSS 文件）和內聯樣式（除非有必要，不然不要這麼作！您惟一可能須要使用內聯樣式是當您的工做環境真的很是受限，好比您的CMS只容許您編輯 HTML 的 body）。

保持不一樣類型代碼（好比HTML和CSS）的分離和純淨使處理該代碼的人的工做更爲容易。

CSS 是一種聲明式語言，這令其語法至關簡單直觀且易於理解。此外，CSS還有着至關不錯的錯誤修復系統，這一特性容許你犯一些錯誤（包含語法錯誤，或者瀏覽器不支持該特性）但並不會形成什麼異常影響 —— 好比，有可能你的某些聲明瀏覽器並不理解，這時瀏覽器會直接忽略掉這些內容並繼續執行渲染。固然這一特性也可能致使一些問題，好比一些異常狀況出現的時候，可能會對定位問題的緣由形成一些障礙。

CSS 的屬性和屬性值都是區分大小寫的。

CSS 有超過300 個不一樣的屬性以及幾乎無窮無盡的屬性值。屬性和屬性值不能任意組合：每一個屬性都有一個已經定義好的可用屬性值範圍。

重要: 若是使用了未知屬性，或者給屬性賦予了無效值，該聲明會被視爲無效，瀏覽器的 CSS 引擎會徹底忽略它。

聲明塊裏的每個聲明必須用半角分號（;）分隔，不然代碼會不生效（至少不會按預期的生效）。聲明塊裏的最後一個聲明結束的地方，不須要加分號，可是最後加分號是個好習慣，由於能夠防止在後續增長聲明時忘記加分號。

一個元素能夠被多個選擇器所匹配，所以，一個給定的屬性可能被多個規則設置屢次。 CSS 定義了哪一個規則比其它規則更具優先級：這被稱爲層疊算法（cascade algorithm）。

CSS 規則是樣式表的主要組成塊 —— 是你在 CSS 中最多見的塊。除此以外還有@-規則 ，@-規則在CSS中被用來傳遞元數據、條件信息或其它描述性信息—— CSS 規則只是被稱爲 CSS 語句中的一種。

一些屬性好比 font，background，padding，border，和 margin被稱爲簡寫屬性。注：彷佛大多數簡寫屬性的屬性值的順序都可有可無。

選擇器分爲簡單選擇器、屬性選擇器、僞類和僞元素選擇器、組合器和多選選擇器。

簡單選擇器（Simple selectors）：經過元素類型、class 或 id 匹配一個或多個元素。其中，類選擇器由一個點「.」以及類後面的類名組成；類名是在HTML 中的class屬性中沒有空格的任何值；文檔中的多個元素能夠具備相同的類名，單個元素也能夠有多個類名(以空格分開多個類名)。而ID選擇器由#以及後面的ID組成；ID惟一，這是選擇單個元素的最有效的方式。通用選擇（*）是最終的王牌。它容許選擇在一個頁面中的全部元素。重要提示：使用通用選擇時要當心。由於它適用於全部的元素，在大型網頁利用它可能對性能有明顯的影響：網頁的顯示可能比預期要慢。大多數狀況下，你都不會使用這個選擇器。

屬性選擇器（Attribute selectors）：經過元素的屬性和（或）屬性值匹配一個或多個元素。由方括號([]) 組成，其中包含屬性名稱，後跟可選條件以匹配屬性的值。好比[lang|="fr"]。

存在和值屬性選擇器：[attr]、[attr=val]和[attr~=val]。

子串值（Substring value）屬性選擇器：

[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素（注意有個-）。

[attr^=val] : 選擇attr屬性的值以val開頭（包括 val）的元素（與上面那個不一樣）。

[attr$=val] : 選擇attr屬性的值以val結尾（包括 val）的元素。

[attr*=val] : 選擇attr屬性的值中包含字符串 val 的元素。

僞類（Pseudo-classes）：匹配處於肯定狀態的一個或多個元素，好比被鼠標指針懸停的元素，或當前被選中或未選中的複選框，或元素是DOM樹中一父節點的第一個子節點。以冒號(:)做爲前綴，冒號前面是其它的選擇器。

僞元素（Pseudo-elements）:匹配處於相關的肯定位置的一個或多個元素，例如每一個段落的第一個字，或者某個元素以前生成的內容。前綴是兩個冒號 (::)，冒號前面是其它的選擇器。

組合器（Combinators）：組合兩個或更多的選擇器用於很是特定的選擇的方法。例如，你能夠只選擇divs的直接子節點的段落，或者直接跟在headings後面的段落：

A B（B是A的後代結點）；

A>B（B是A的（直接）子節點，注意（直接）子節點的意思，不能理解就看上面那一行）；

A+B（B是A的下一個兄弟節點）；

A~B（B是A以後的兄弟節點中的任意一個）。

多選選擇器（Multiple selectors）：不是單獨的選擇器，是將以逗號分隔開的多個選擇器放在一個CSS規則下面， 以將一組聲明應用於由這些選擇器選擇的全部元素。

data-* 屬性被稱爲數據屬性。它們提供了一種在HTML屬性中存儲自定義數據的方法，由此，這些數據能夠輕鬆地被提取和使用。

兩個選擇器緊挨着則表示選擇的元素要同時知足這兩個條件。

使用相對單位是很是有用的——你能夠調整你的HTML元素大小相對於你的全局字體大小或視口大小，這意味着佈局將保持看起來正確。

顏色系統：

關鍵詞（如red）

16進制值（如#ff0000）、RGB（如rgb(255,0,0)）：RGB值能夠說比十六進制值更直觀，更容易理解；

HSL：hsl()函數接受色相、飽和度以及明度值，如hsl(0,100%,50%)；

RGBA和HSLA：比RGB和HSL多一個透明度的參數（0到1的值）；

不透明度：經過CSS——opacity 屬性設置。能夠同時改變背景和文本的透明度。

層疊和繼承：

元素的最終樣式能夠在多個地方定義，它們以複雜的形式相互影響。這些複雜的相互做用使CSS變得很是強大，但也使其很是難於調試和理解。這是CSS 理論中最複雜的地方。

什麼選擇器在層疊中勝出取決於三個因素（如下是按重量級順序排列的——前面的的一種會否決後一種）：重要性（Importance，彷佛就只有!improtant這一個東西能影響重要性）、專用性（Specificity）、源代碼次序（Source order）。

在CSS中，有一個特別的語法可讓一條規則老是優先於其餘規則：!important。把它加在屬性值的後面可使這條聲明有無比強大的力量。重載這個 !important 聲明的惟一方法是在後面的源碼或者是一個擁有更高專用性的源碼中包含相同的 !important 特性的聲明。知道 !important存在是頗有用的，這樣當你在別人的代碼中遇到它時，你就知道它是什麼了。可是！咱們建議你千萬不要使用它，除非你絕對必須使用它。您可能不得不使用它的一種狀況是，當您在CMS（內容管理系統）中工做時，您不能編輯核心的CSS模塊，而且您確實想要重寫一種不能以其餘方式覆蓋的樣式。 可是，若是你能避免的話，不要使用它。因爲 !important 改變了層疊正常工做的方式，所以調試CSS問題，尤爲是在大型樣式表中，會變得很是困難。

專用性（基本上是衡量選擇器的具體程度的一種方法——它能匹配多少元素（越少越專用））：ID選擇器>class選擇器>元素選擇器。打敗ID選擇器的惟一方法是使用 !important（其實足夠多的class選擇器也能夠打敗）。

一個選擇器具備的專用性的量是用四種不一樣的值（或組件）來衡量的，它們能夠被認爲是千位，百位，十位和個位——在四個列中的四個簡單數字（權重並不許確，由於11個class選擇器不能打敗1個id選擇器）：

千位：若是聲明是在style 屬性中該列加1分（沒有選擇器, 規則在HTLM文件中的一個元素的style屬性裏，因此它們的專用性老是1000）；

百位：在整個選擇器中每包含一個ID選擇器就在該列中加1分；

十位：在整個選擇器中每包含一個類選擇器、屬性選擇器、僞類就在該列中加1分；

個位：在整個選擇器中每包含一個元素選擇器或僞元素就在該列中加1分；

注意: 通用選擇器 (*), 複合選擇器 (+, >, ~, ' ') 和否認僞類 (:not) 在專用性中無影響。

在考慮全部這些層疊理論和什麼樣式優先於其餘樣式被應用時，你應該記住的一件事是，全部這些都發生在屬性級別上——屬性覆蓋其餘屬性，但你不會讓整個規則凌駕於其餘規則之上。

哪些屬性默認被繼承哪些不被繼承大部分符合常識。

控制繼承：

inherit：該值將應用到選定元素的屬性值設置爲與其父元素同樣；

initial ：該值將應用到選定元素的屬性值設置爲與瀏覽器默認樣式表中該元素設置的值同樣。若是瀏覽器默認樣式表中沒有設置值，而且該屬性是天然繼承的，那麼該屬性值就被設置爲 inherit；

unset ：該值將屬性重置爲其天然值，即若是屬性是天然繼承的，那麼它就表現得像 inherit，不然就是表現得像 initial（與initial不一樣之處在於判決順序）。

從新設置全部的屬性值：屬性 all 可以被應用到每個繼承屬性。這裏的值能夠是繼承屬性裏的任何一個 (inherit, initial, unset, or revert)。對於撤銷對樣式的修改，這是很是方便的一種方式。

若是您開始遇到樣式應用不如你意的問題，它多是專用性問題。

CSS框模型（譯者注：也被稱爲「盒模型」）是網頁佈局的基礎 ——每一個元素被表示爲一個矩形的方框，框的內容、內邊距、邊界和外邊距，分別對應width 和 height、padding、border、和margin。

 

 

注意: 外邊距有一個特別的行爲被稱做外邊距塌陷（margin collapsing）：當兩個框彼此接觸時，它們的間距將取兩個相鄰外邊距的最大值，而非二者的總和。

默認狀況下，塊級元素的content的width 被設置爲可用空間的100%（在margin, border, padding佔據了它們的空間後剩下的空間的寬度）；塊級元素的content的height默認設置爲內容的高度（沒內容就爲0）。

外邊距能夠接受負數，這能夠用來引發元素框的重疊。

默認狀況下background-color/background-image 延伸到了border的外邊緣（對於<body>元素例外）。該行爲可使用background-clip 屬性來改變。好比background-clip: padding-box;能使任何背景色只填充內容和內邊距的區域，而不填充到邊界的區域。

通常狀況下，height和border-width都忽略百分比（相對於父元素的height）設置。當元素的父元素有肯定的height時（父元素的肯定的height不必定非得是直接在自身設置的絕對高度，也能夠是從它的父元素繼承而來的，只要它的父元素有肯定的height就行）或元素是絕對定位元素時（父元素有肯定的height的特殊狀況），元素的height設置百分比才有效。

盒的總寬度是width, padding-right, padding-left, border-right, 以及 border-left 屬性之和（注意沒有margin）。在一些狀況下比較惱人（例如，假使你想要一個盒佔窗口寬度的50%，但邊界和內邊距是用像素來表示時該怎麼辦？），爲了不這種問題，可使用屬性box-sizing來調整框模型（或者用calc()）。使用值border-box，它將盒模型更改爲這個新的模型：

 

 

若是選擇器是無效的，則整個規則也不會再作任何事情，瀏覽器只會繼續執行下一個規則。

開發者工具中的CSS編輯器：每一個CSS屬性旁邊還有一個複選框，能夠選擇checked/unchecked來啓用/禁用您的CSS屬性。這對於找出可能致使錯誤的緣由也很是有用。

咱們認爲對於一個大型的樣式表，首先要經過validator.w3.org來消除任何基本的語法錯誤，而後再依賴瀏覽器開發人員工具來肯定其餘問題。

width和max-width的配合使用：舉個栗子，一看就懂：

body {

  width: 80%;

  max-width: 800px;

}

注：百分比是相對於其父元素，在這裏是<html>。

最佳實踐：你應該在全部規則的選擇器中都用，好比， .card 做爲開頭，這樣的好處是：若是將名片放在帶有其餘內容的頁面的狀況下，這些規則不會干擾其餘元素的樣式。

.card header, footer不等於.card header, .card footer

line-height（行高，它的單位很是神奇）：該屬性的值一般用無單位的數字，表示這個數字乘當前元素的字體大小（即便當前元素的字體大小是2em，也是乘2em）；該屬性的值以em爲單位的效果和沒單位同樣。

 

屬性（properties，不一樣於HTML的屬性Attribute）：

background：包括background –color、background-image、background-position、background-repeat和background-scroll

border：包括border-top, border-right, border-bottom, border-left和border-width, border-style, border-color, 以及它們的兩兩組合，如border-top-width

text-shadow

padding（內邊距）：包括padding-top、padding-right、padding-bottom和padding-left

font：包括font-style, font-variant（變體）, font-weight, font-size, line-height, and font-family。

margin（外邊距）：舉個栗子，margin:0 auto，第一個值表明上和下，第二個值表明右和左。若是是3個值，則分表表明上、右和左、下。

 

單位：

px：像素

em（相對單位）：好比，1em表示與當前元素的字體大小相同。Web開發中最經常使用的相對單位（我以爲rem更好用）。默認值是16px，可是要當心——em單位受會繼承父元素的字體大小。

rem（root em）：以和em一樣的方式工做，但它老是等於默認基礎字體大小的尺寸，即繼承的字體大小將不起做用。

%：例如，其寬度爲其父容器寬度的必定百分比，若是父元素是<body>，那麼寬度會隨着視口（viewport，即瀏覽器的窗口大小）的變化而變化。

注：0值不要須要單位。

 

其它：

nth：n表明數字，th表明第幾個，好比4th、5th。

 

 

樣式化文本：

你能夠有一個單位所有都使用 em 的網站，這樣維護起來會很簡單。

當調整你的文本大小時，將文檔(document)的基礎font-size 設置爲10px每每是個不錯的主意，這樣以後的計算會變得簡單，所須要的 (r)em 值就是想獲得的像素的值除以 10，而不是 16。

在樣式表的指定區域列出全部font-size的規則集是一個好主意，這樣它們就能夠很容易被找到。

連接的每個狀態均可以用對應的僞類來應用樣式:

Link (沒有訪問過的): 這是連接的默認狀態，可使用:link 僞類來應用樣式。

Visited: 這個連接已經被訪問過了(存在於瀏覽器的歷史紀錄), 可使用 :visited 僞類來應用樣式。注：只能直接改變color和column-rule-color，不能直接改變background-color和boder等，要想經過:visited改變後二者等，要先在:visited之外的地方先設定後二者的值（好比白色）。若是用focus，則鼠標點到別的地方去，樣式就沒了。

Focus: 一個連接當它被選中的時候 (好比鼠標左鍵點它（由於點了就鎖定了），或者經過鍵盤的 Tab  移動到這個連接的時候（用Tab時還會有個虛線框），或者使用編程的方法來選中這個連接（HTMLElement.focus()）它可使用 :focus 僞類來應用樣式。

Hover: 當用戶的鼠標光標恰好停留在這個連接，可使用 :hover 僞類來應用樣式。

Active: 一個連接當它被激活的時候 (當你點擊連接時，按住鼠標按鈕，連接會變紅色)，它可使用 :active 僞類來應用樣式。

連接的規則集的順序固定，爲LoVe F Hate

使用 background-size 來指定要顯示的背景圖像的大小，這樣對有一個大的圖標，而後從新調整它的大小是頗有幫助的，也是響應式網站設計的須要。可是，這僅適用於IE 9及更高版本。因此你若是須要支持那些老的瀏覽器，你只能先調整圖像大小，再插入它。

連接相關的僞類，好比，懸停 (hover) 的狀態，能夠爲不一樣的元素應用樣式，不僅是連接。

例子：Now onto the sizing! We want to fill up the whole width of the <ul>, leave a little margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size. To do this, we set the width to 19.5%, and the margin-right to 0.625%. You'll notice that all this width adds up to 100.625%, which would make the last button overflow the <ul> and fall down to the next line. However, we take it back down to 100% using the next rule, which selects only the last <a> in the list, and removes the margin from it. Done!

您可使用字體棧來指定可選擇的字體，可是爲了確保您的設計在每種字體中均可以使用，這增長了測試的開銷。

@font-face塊：在CSS的開始處，容許您指定在訪問隨您的網站時隨你的網站一塊兒下載的字體文件，這意味着任何支持Web字體的瀏覽器均可以使用您指定的字體。這個塊中須要包括的屬性有font- family和src。舉個栗子：

@font-face {

  font-family: "myFont";         /* 注意有引號，即便沒有空格 */

  src: url("myFont.ttf");          /* 注意要用url函數 */

}

在這段代碼以後代碼，你可使用@font-face中指定的字體名字來將它應用到你喜歡的任何東西上。

注：font-family的名字隨你喜歡設置；可在font-family後加個空格再加format函數以聲明每種字體文件的格式，這不是必要的，可是聲明它是頗有用的，由於它讓瀏覽器能更快地找到它能用字的體。能夠列出多個聲明，用逗號分隔——瀏覽器會搜索並使用它能找到的第一個——所以，最好是把新的、更好的格式好比WOFF2放在前面，把偏老的，不是那麼好的格式像TTF這樣的放在後面。

在線字體服務（如Google Fonts）一般會爲你存儲和提供字體，這樣你就不用寫@font-face代碼了，一般只須要在你的網站上插入一兩行代碼（用link）就可讓一切都運行。

 

屬性：

color： The color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text).

font-famliy：字體。能不能生效看的是正在用來看網頁的電腦上有沒有相應的字體。字體棧：瀏覽器從字體棧列表的第一個字體開始，查看在當前機器中，這個字體是否可用。若是可用，就把這個字體應用到選中的元素中；若是不可用，它就移到列表中的下一個字體，而後再檢查。注意: 有一些字體名稱不止一個單詞，好比Trebuchet MS ，那麼就須要用引號包裹。

font-style: 用來打開和關閉文本 italic (斜體)。(你不多會用到這個屬性，除非你由於一些理由想關閉斜體文字的斜體狀態)，可能的值有normal、italic和oblique（斜的）。

font-size：在調整字體大小時，最經常使用的單位是px、em和rem。

font-weight：設置文本的粗體。經常使用的值有normal和bold。

text-transform：能實現的功能有將全部文本轉爲大寫（uppercase）、將全部文本轉爲小寫（lowercase）、讓全部單詞的首字母大寫（capitalize）、將全部字形轉換成固定寬度的正方形（full-width）

text-decoration：能實現的功能有取消已經存在的任何文本裝飾（none）、下劃線（underline）、穿過文本的線（line-through）。text-decoration是一個縮寫形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 構成。

text-shadow：至少有前2個值，最多4個值，空格隔開，依次是陰影水平偏移、陰影垂直偏移、模糊半徑（默認爲0）、顏色（默認爲black）。注：偏移的數值可正可負。

text-align：align意思是排列。可用的值有left（左對齊）、right、center和justify（改變單詞之間的距離，使全部文本行的寬度相同且達到最大。你須要仔細使用，它能夠看起來很可怕若是你要使用這個，你也應該考慮一塊兒使用別的東西，好比 hyphens（連字符）屬性）。

line-height：推薦的行高是1.5到2。

letter-spacing 和 word-spacing：字母和字間距。你不會常用它們。

text-indent：首行縮進。

如下三個屬性能夠在CSS（由於是樣式，因此不是在HTML裏用）的<ul> 或  <ol> 元素上設置：

list-style-type：設置列表的項目符號的類型。值爲none則不顯示自帶的項目符號，而後就能夠用background 屬性來代替項目符號。

list-style-position ：設置在每一個項目開始以前，項目符號是出如今列表項內，仍是出如今其外。簡單的說，就是一個列表項內換行後是否和項目符號左對齊。

list-style-image ：爲項目符號使用自定義圖片，其語法至關簡單。然而，這個屬性在控制項目符號的位置，大小等方面是有限的。 您最好使用background 系列屬性。background-position設置爲0 0則意味着項目符號將出如今每一個列表項的最左上側。background-repeat：默認條件下，背景圖片不斷複製直到填滿整個背景空間，設爲no-repeat就不會複製了。

如下兩個屬性可在HTML（由於不是樣式，因此不是在CSS裏用）的<ol>上用：

start：從1 之外的數字開始計數。示例：<ol start="4">。

reverse：倒計數（辣雞Edge不支持——2018年6月3日）。

value：可用於HTML的<li>，用於指定數值。即便你使用非阿拉伯數字的 list-style-type, 你仍須要使用與其同等意義的數值做爲 value 的屬性。

outline：輪廓。有點像邊框，惟一的區別是邊框佔用了盒模型的空間，而輪廓沒有。舉個栗子，選中連接時連接周圍的框框。

border-bottom：也能用做下劃線，但比起text-decoration，有一些人喜歡前者，由於前者比後者有更好的樣式選項， 而且繪製的位置會稍微低一點，因此不會穿過字母 (好比 字母 g 和 y 底部)——彷佛不關我事，由於，我主要是寫中文網頁——另外，若是border-bottom不設置顏色，就可使下劃線採用和元素文本同樣的顏色，這對連接是頗有用的，由於連接的每種狀態下，文本的顏色是不一樣的（text-decoration不也是這樣嗎- -？）。

 

 

樣式化盒子（box）：

叫盒子更好聽，但叫框更貼切。

對於塊級元素：若是盒子的height被設置爲百分比，那麼盒子的height不會遵循這個設置了的百分比長度（除非盒子的父元素的height是肯定的），而是總會採用盒子內容的高度（除非給它設置了一個非百分比高度（例如，px或者em））。總結：除非絕對定位或者父元素有肯定的height，不然height設置百分比跟沒設置同樣。

對於內聯元素：除非絕對定位，不然width、height、上下內邊距、上下外邊距無效，上下邊界也不會推開別的元素或移動本身。

邊界（border）的width也會忽略百分比設置。

當用絕對的值設置盒子的大小時（好比，固定px的 width 和 height），內容可能會超出設置的大小，此時內容就會溢出盒子。要控制這時候發生的事情，咱們可使用 overflow 屬性。該屬性有好幾個可能的取值，不過最經常使用的是：

auto：超出盒子大小的內容被隱藏，而滾動條顯示出來，從而可讓用戶滾動滾動條來看到全部內容；

hidden：超出盒子大小的內容被隱藏；

visible：超出盒子大小的內容顯示在盒子以外（這一般是默認的行爲）。

元素的背景由顏色和圖像組成(即background-color和background-image)。背景並不在外邊距的下層——外邊距不是元素區域的一部分，而是元素外面的區域。

outline位於外邊距的區域。若是您要使用 outline 屬性，請確保不要讓它看起來像是被focus的連接，由於這會讓用戶混淆。

有一些屬性能夠靈活地控制盒的內容的大小  —  是經過設置大小約束，而不是設置一個絕對大小。這是經過屬性 min-width、max-width、min-height 和 max-height 實現的。

margin: 0 auto;能夠將應用這段代碼的容器在它的父容器內居中。auto（在這種狀況下）讓左右外邊距共享父容器左右外邊距之間的可用空間使它居中。

display 能夠有不少種不一樣的值, 其中三種常見的值爲 block, inline, 和 inline-block（另外還有flex和grid）：

塊盒(block box)：獨自佔一行；能夠給它設置寬度和高度（設置百分比高度是有條件的）。

行內盒（inline box）：與塊盒相反，它會與周圍的文本和其它行內元素出如今同一行，除非位置不夠了。width、height、上下內邊距、上下外邊距設置對行內盒無效；上下邊界也不會推開別的元素或移動本身。

行內塊盒（inline-block box）：介於前二者之間，它會像行內盒同樣，跟隨周圍的文本流堆放，不會在其先後建立換行；不過，它能夠像塊盒同樣，使用width和height設置大小，而且維護其塊完整性。

background-attachment: 當內容滾動時，指定元素背景的行爲，例如，它是固定仍是滾動。fixed（固定）和local（滾動：將背景設置爲它所設置的元素的背景，所以當您滾動元素時，背景會隨之滾動）這兩個屬性值比較好用。

大多數元素的默認背景顏色不是white (白色）而是transparent（透明）。

設置背景顏色做爲後備是很重要的。背景顏色在各處都獲得了支持，而背景梯度等奇異的特性只在較新的瀏覽器中獲得支持，加上背景圖像可能因爲某種緣由沒法加載，所以，設置基本的背景顏色是一個好主意，這樣的話，不管如何，元素的內容都是可讀的（沒有背景也可讀就無所謂設不設置背景顏色做爲後備了）。

須要記住的一件重要的事情是，因爲背景圖像是使用CSS設置的，而且出如今內容的背景中，它們將會在屏幕閱讀器之類的輔助技術中不可見。它們不是內容圖片，只是爲了裝飾，若是你想在你的頁面上包含一個圖片，而這又是內容的一部分，那麼你應該在HTML中用<img>元素來作。

background-repeat 容許您指定背景圖像是如何重複的。默認值是repeat，其餘常見的和普遍支持的值是：no-repeat，repeat-x和repeat-y。

屬性值何時用空格分隔、何時用逗號分隔見下（函數的參數固然仍是用逗號分隔，和C++同樣filter屬性的函數好比drop-shadow的參數居然是用空格分隔的！）：

background:   url(image.png) no-repeat 99% center,

               url(background-tile.png),

                linear-gradient(to bottom, yellow, #dddd00 50%, orange);

background-position：最經常使用的單位有px、rem、百分比和關鍵詞（left、center等）。我看百分比的值挺好用的。若是您只指定一個值，那麼該值將被假定爲水平值，而垂直值將默認爲center。

background-image還有另外一組可用的值——顏色漸變，其中，線性漸變是經過linear-gradient()函數傳入的，它是一個background-image屬性的值。函數至少須要用逗號分隔的三個參數——背景中漸變的方向，開始的顏色和結束的顏色。可選的參數是顏色站點。注意，您還可使用repeating-linear-gradient()函數來設置一個重複的線性漸變（栗子：repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px);）。「去左上角」是to top left。

默認狀況下，邊界是不可見的。當只設置border-style屬性（如設爲solid）時，邊界會默認使用文本的顏色，且寬度爲3px。

border-radius：圓角。甚至能夠建立橢圓形角，好比border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;。能夠指定1到4個值來指定4個圓角的半徑，還可使用普通寫法屬性，單獨設置邊界的一個角的邊界半徑，如border-top-left-radius。圓角以百分比爲單位頗有意思。

border-image使實現複雜的圖像邊界變得容易得多，可是必須在現代瀏覽器中才能實現(Internet Explorer 11+支持它，以及其餘現代瀏覽器)。注意：只要你用了border-image，您就應該也包括border定義——由於若是瀏覽器不支持border-image，則該操做能夠做爲一個回退。使用 border-image-source指定要使用的源圖像做爲邊界圖像，它的工做原理和background-image同樣

樣式化表格：

在你的表上，給table-layout屬性設置一個爲fixed的值一般是一個好主意，由於它使表的行爲在默認狀況下更可預測。一般狀況下，表列的大小會根據所包含的內容大小而變化（即便設置了width），這會產生一些奇怪的結果。經過 table-layout: fixed，您能夠經過控制<th>的寬度來控制列的寬度。Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

th:nth-child(2)：選擇<th>的父元素的第2個子元素且該子元素必須是<th>，不然無效。而th:nth-of-type(2)：在<th>的父元素中的全部兄弟<th>裏選第2個。()裏不止能夠填數字還能夠填odd或2n+一、even或2n。另外，還有first-child這更簡明的方式（但沒有second-child之類的）。

border-collapse屬性的collapse值對於任何表樣式來講都是一個標準的最佳實踐，能把 變成。

有多個嵌套的元素是頗有用的，這樣您就能夠將樣式層疊在一塊兒。是的，咱們確實能夠在同一個元素上，好比<thead>，同時使用背景圖像和背景線性漸變，可是咱們仍是決定分開到兩個有嵌套關係的元素中使用，由於考慮到不支持多個背景圖像和線性梯度的老瀏覽器」。

表格樣式小貼士：

l   使您的表格標記儘量簡單，而且保持靈活性，例如使用百分比，這樣設計就更有響應性。

l   使用 table-layout: fixed 建立更可預測的表佈局，能夠經過在<th>中設置width來輕鬆設置列的寬度。

l   使用 border-collapse: collapse 使表元素邊框合併，生成一個更整潔、更易於控制的外觀。

l   使用<thead>, <tbody>和<tfoot> 將表格分割成邏輯塊，並提供額外的應用CSS的地方，所以若是須要，能夠更容易地將樣式層疊在一塊兒。

l   使用「斑馬線」表格來提升可讀性。

l   使用 text-align直線對齊您的<th>和<td>文本，使內容更整潔、更易於跟隨。

 

在咱們的樣式化文本模塊，咱們學習了text-shadow屬性，它容許您將一個或多個陰影應用到元素的文本上。對於盒子來講，存在一個等價的屬性——box-shadow容許您將一個或多個陰影應用到一個元素的盒子上。和文本陰影同樣，盒子陰影在各類瀏覽器中也獲得了很好的支持，但只有在IE9+（IE9及更新版本）中可用。你的舊IE版本的用戶可能只須要應付沒有陰影的狀況，因此只要測試一下你的設計，確保你的內容在沒有陰影的狀況下是清晰可見的。box-shadow還可建立一個帶有多個顏色圖層的凸起的盒子，並且你能夠用任何你想要的方式來使用它，例如，用基於多個光源的陰影來建立一個更加真實的外觀。與text-shadow不一樣的地方是，box-shadow有一個inset關鍵字可用——把它放在一個影子的屬性值的開始，使它變成一個內部陰影，而不是一個外部陰影，好比，經過:active將盒陰影換成一個很是暗的inset盒陰影，給人一種按鈕被按下的樣子。

-webkit-：不建議使用。

多個背景：最近(自從Internet Explorer 9)，咱們已經具有了將多個背景鏈接到單個元素的能力。這是一件好事，由於多重背景很是有用。用逗號分隔不一樣的背景定義，這些背景都是堆疊在一塊兒的，第一個出如今頂部，第二個在第一個的下面，第三個……因此要注意堆疊順序。

background:和background-color/img……:效果不同！前者會把以前的全部background覆蓋掉，可是後者不會，後者是層疊。

基本上，filters能夠應用在任何元素上，塊元素（block）或者行內元素（inline）——你只須要使用filter屬性，而且給它一個特定的過濾函數以及函數的參數。有些filter選項和其餘CSS特性作的事情十分類似，例如drop-shadow()的工做方式以及產生的效果和 box-shadow 或text-shadow十分類似。然而filter:drop-shadow()真正出色的地方在於，它做用於盒（box）內內容（content）的確切形狀，而不只僅將盒子自己做爲一個大的塊，這看起來會更棒，就像下面這圖：

 

記住，你能夠這樣爲較舊的瀏覽器建立一個後備方案：先寫一個較舊的瀏覽器支持的後備聲明，而後再接着寫只有較新的瀏覽器才支持的聲明。這樣比較舊的瀏覽器會應用第一個聲明而忽略掉第二個不支持的聲明，與此同時比較新的瀏覽器會先應用第一個聲明，而後用第二個聲明把它覆蓋掉。

被box-shadow用於生成陰影的東西是border（border的寬是0px都行）。

有些時候，CSS代碼不生效是由於該用空格分隔的屬性值或參數用了逗號分隔，或者反過來。

例子：多個盒陰影：一個標準的盒陰影，使它看起來稍微從頁面上浮起來；另外兩個是內嵌（inset）的盒陰影，一個是左上角（不加inset的兩個正值表示外部的往下和往右，加了inset的兩個正值就表示內部的往下和往右，即左上角的內部陰影）附近的白色半透明陰影（inset 5px 5px 3px rgba(255, 255, 255, 0.5)）和另外一個是右下角附近的黑色半透明陰影（inset -5px -5px 3px rgba(0, 0, 0, 0.5)），讓盒子有一個漂亮的3D外觀。

 

 

CSS排版概述：

HTML元素徹底按照源碼中出現的前後次序顯示，但佈局技術會覆蓋默認的佈局行爲。

浮動——應用 float屬性的值，諸如 left 可以讓塊級元素互相併排成一行，而不是一個「堆疊」在另外一個上面。

float 屬性有四個可能的值：

left — 將元素浮動到左側；

right — 將元素浮動到右側；

none — 默認值, 不浮動；

inherit — 繼承父元素的浮動屬性。

有四種主要的定位類型須要咱們瞭解：

靜態定位(Static positioning)是每一個元素默認的屬性——它表示「將元素放在文檔佈局流的默認位置——沒有什麼特殊的地方」。

相對定位(Relative positioning)容許咱們相對元素在正常的文檔流中的位置移動它——包括將兩個元素疊放在頁面上。這對於微調和精準設計(design pinpointing)很是有用。relative值——這屬性自己不作任何事情，因此咱們還要添加top和left屬性。這些能夠將受影響的元素向下或向右移。

絕對定位(Absolute positioning)將元素徹底從頁面的正常佈局流中移出（因此絕對定位會使其它元素的位置發生變化），相似將它單獨放在一個圖層中. 咱們能夠將元素相對於頁面的 <html> 元素邊緣固定，或者相對於離元素最近的被定位的父元素(ancestor element)（相對定位或絕對定位的父元素都行）。絕對定位在建立複雜佈局效果時很是有用，例如經過標籤（tabbed boxes）顯示和隱藏的內容面板（選項卡消息框）或者經過按鈕控制滑動到屏幕中的信息面板（經過按圖標使面板滑動出現或者消失）。top和left屬性對絕對位置元素的影響不一樣於相對位置元素。在這種狀況下，他們沒有指定元素相對於原始位置的移動程度。相反，它們指定元素應該離頁面邊界的頂部和左邊的距離(確切地說，是離 <html>元素的距離)。

固定定位(Fixed positioning)與絕對定位很是相似，除了它是將一個元素相對瀏覽器視口（viewport）固定，而不是相對另一個元素。 在建立相似頁面滾動老是處於頁面上方的導航菜單時很是有用。

 

HTML表格對於顯示錶格數據是很好的，可是不少年前——在瀏覽器中支持基本的CSS以前——web開發人員過去也經常使用HTML表格來完成整個網頁佈局——將它們的頁眉、頁腳、不一樣的列等等放在不一樣的錶行和列中。這在當時是有效的，但它有不少問題——表佈局是不靈活的，很是重的標記，難以調試和語義上的錯誤（好比，屏幕閱讀器用戶在導航表佈局方面有問題）。CSS表格的存在是爲了讓您可以像表格同樣佈局元素，而沒有上面描述的任何問題。

CSS是一種功能強大的語言，它能夠作不少事情，但它卻在佈局上有所降低。傳統的佈局方法，如float和positioning，有時會但願有更復雜、更靈活、更有彈性的方法。flexbox應運而生。

display: flex; 告訴，好比<section>元素，的子元素做爲flexible boxes——默認狀況下，它們都將展開以填充父類的可用高度，它們至少會留有足以包裹它們的內容的寬度（有餘就平分剩餘寬度使填充父類的可用寬度。

 

floats：

雖然有更新的更好的佈局技術可用——但浮動仍然是人們的舊愛，由於它能夠支持到 Internet Explorer 4。

最初，引入 float 屬性是爲了能讓 web 開發人員實現簡單的佈局，包括在一列文本中浮動的圖像，文字環繞在它的左邊或右邊。

讓咱們考慮一下浮動是如何工做的——浮動元素 (這個例子中是<img> 元素)會脫離正常的文檔佈局流，並吸附到其父容器的，好比，左邊 (這個例子中是<body>元素)。在正常佈局中位於該浮動元素之下的內容，此時會圍繞着浮動元素，填滿其右側的空間。

浮動一般用於建立多個列布局，儘管事實上，它不是真的打算作這個工做，並有一些奇怪的反作用必須處理。

兩列布局：須要注意的一件事是，當瀏覽器寬度變得很是窄時，列就會變得很糟糕。窄屏幕的狀況下（如手機)，切換回單列布局一般是有意義的，使用媒體查詢（media queries）能夠實現這一功能。大家將在將來的響應式網頁設計模塊中學習這些知識。

全部在浮動下面的自身不浮動的內容都將圍繞浮動元素進行wrap（與浮動不一樣），若是沒有處理這些元素，就會變得很糟糕。幸運的是，有一種簡單的方法能夠解決這個問題—— clear 屬性。當你把這個屬性應用到一個元素上時，它主要意味着"此處中止浮動"——這個元素和源碼中後面的元素將不浮動，除非您稍後將一個新的float聲明應用到此後的另外一個元素。clear 能夠取三個值：left：中止左浮動；right：中止右浮動；both：中止左右浮動。

浮動元素在父元素中所佔的區域的有效高度爲0 ——若是你在瀏覽器中加載 1_three-column-layout.html 並用開發工具查看 <body> 的高度，你將會看到咱們的意思是什麼——所報告的<body>的高度只有 <h1> 的高度，而沒有包括浮動元素的高度。這個能夠經過不少方式解決，其中一種是clearing the float at the bottom of the parent container。

非浮動元素的外邊距不能用於它們和浮動元素之間建立空間（好好理解），但浮動元素的外邊距能夠用於它們和非浮動元素之間建立控件；在正常佈局中位於浮動元素之下的元素能夠用外邊距「穿過」浮動元素來建立空間，但若是清除了浮動，就不行了。若是您須要一個元素來間接清除您的浮動，在您想要清除的浮動以前添加一個看不見的「clearfix div」是很是有用的。

有一個問題是列高度是不一樣的—— 若是列都是相同的高度，它看起來會更好。咱們能夠經過給全部的列固定height 來解決這個問題，然而在許多狀況下這並不理想——它使設計呆板。若是你能保證列中老是有相同數量的內容，這是能夠的，但這並不老是如此——在不少類型的網站上，內容也會按期更改，並且瀏覽器窗口的變小也可能會使內容溢出。這正是像flexbox這樣的新佈局技術所解決的問題。Flexbox能夠自動地延長列，這樣他們就會像最長的一列同樣。你也能夠考慮：

l  將這些列的背景顏色設置爲父元素的背景顏色，這樣您就看不到高度是不一樣的。這是目前最好的選擇。

l  將它們設置爲固定的高度，並用overflow使內容滾動。

l  使用一種叫作僞列（faux columns）的技術——這包括將背景(和邊界)從實際的列中提取出來，並在列的父元素上畫一個僞造的背景，看起來像列的背景同樣。不幸的是，這將沒法處理列邊界。

 

positioning：

默認狀況下，塊級元素的內容的width+padding+border是其父元素的內容的width的100％，而且總高與本身的的內容的height同樣。Inline elements are all tall as their content, and as wide as their content（their是指內聯元素本身）.You can't set width or height on inline elements — they just sit inside the content of block level elements.

默認狀況下，塊級元素在視口中垂直佈局——每一個都將顯示在上一個元素下面的新行上，而且它們的外邊距將分隔開它們。

相對定位與靜態定位很是類似，佔據在正常的文檔流中，除了你仍然能夠修改它的最終位置。

絕對定位的元素再也不存在於正常文檔佈局流中。相反，它坐在它本身的層獨立於一切。這是很是有用的——這意味着咱們能夠建立不干擾頁面上其餘元素的位置的隔離的UI功能 ——例如彈出信息框和控制菜單，翻轉面板，能夠在頁面上的任何地方拖放的UI功能等。

哪一個元素是絕對定位元素的「包含元素」？ 默認狀況下，它是<html>元素。「包含元素」準確的名字是定位上下文。

咱們能夠改變定位上下文， 這是經過在元素的其餘祖先之一上設置定位（即設置position: relative;或position: absolute;或position: fixed;）來實現的——它是嵌套在其中的元素之一。

默認狀況下，被定位的元素都具備z-index，爲auto，實際上爲0。z-index只接受無單位索引值。靜態定位的元素的z-index改不了，想改就先把該元素設置爲別的定位。

可靠的居中老技巧 margin: 0 auto;。注：第一個值也能夠不是0。

 

實際的定位例子：

咱們研究的第一個例子是一個經典的選項卡消息框，你想用一塊小區域包括大量信息時，一個很是經常使用的特徵。這包括含有大信息量的應用，好比策略戰爭遊戲，好比移動版的網頁（屏幕狹小、空間有限），好比你可能想要放置許多信息的緊湊消息框，不用就會充滿整個UI。

在早先的課程中咱們建議儘量不固定內容容器的高度。這個狀況下是能夠的，由於咱們是在選項卡中固定的內容，若是每一個標籤都有不一樣的高度，看起來也有些不和諧。

We are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.

.info-box ul li a.active：意思是類名爲info-box的元素中的<ul>元素中的<li>元素中的<a>元素，且<a>元素的類名爲active。

在咱們的第二個例子中，咱們將會採用咱們的第一個例子——咱們的信息盒子——把它加到一個滿的網頁之中去。可是不只僅是這樣——咱們將固定它的位置，以便於它能待在瀏覽器窗口的同一個位置。當主要內容滾動時，這個信息盒子將會待在屏幕的同一個位置。

最後一個咱們在這裏介紹的例子是經過按圖標使面板滑動出現或者消失——就像前面提到的，這種場景在移動端的佈局中很流行，由於移動端的屏幕很小，因此你不但願使用大部分屏幕顯示信息面板或者菜單。

有名的checkbox hack 技術，能夠經過切換按鈕來提供一個無JS的方法來控制一個元素。記住，點擊<label>標籤也會選擇相對應的checkbox！咱們已經告訴你這是一種hack了。

cursor: pointer;能把移到label上的鼠標光標變成「手」，可，做爲一個額外的可視化線索告訴用戶這個label能夠作一些有趣的事情。

如下代碼經過把複選框移到屏幕外來隱藏複選框。

input[type="checkbox"] {

position: absolute;

  top: -100px;

}

:checked僞類：表示被選中。

transition（過渡）屬性，容許你在狀態改變的時候平滑地過渡，而不是粗暴地「變」或「還原」。

這個例子是一個至關巧妙地避免使用JavaScript來建立一個切換按鈕效果的方式。但這種效果確實有一些問題 ——有點濫用表單元素（它們不是爲了這個目的），而且在可訪問性方面效果不是很好 —— 標籤在默認狀況下不可被focus，而且表單元素的非語義使用可能會致使屏幕朗讀器出現問題。 JavaScript和連接或按鈕可能更合適，但這樣的實驗仍然頗有趣。

 

flexbox：

咱們須要把要設置爲flexible boxes的元素（即（flex item））的父元素（即flex container）的display 設置爲flex。注意：假如你想設置行內元素爲 flexible box，也能夠置 display 屬性的值爲 inline-flex。

 

section {

  display: flex;

}

單單上面這個規則就能夠生成具備相同寬度和高度的列（這些列原本是成行佈局的）。

彈性盒子提供了 flex-direction 這樣一個屬性，它能夠指定主軸的方向（flex item放置的方向）— 它默認值是 row（即多個列）。還可使用 row-reverse 和 column-reverse 值反向排列 flex 項目。

當flex item超出了flex container， 解決此問題的一種方法是將如下聲明添加到 flex container的規則中：flex-wrap: wrap;。

flex-direction 和 flex-wrap的縮寫是flex-flow。

flex（決定如何分配剩餘空間）: 1; 在每一個flex item的標籤上設置，表示每一個flex item佔用空間都是相等的。由於它是一個比例，這意味着將每一個 flex 項的設置爲 400000 的效果和 1 的時候是徹底同樣的。設置爲0則意味着不參與分配剩餘的可用空間。

flex: 1 200px; 表示這個flex item將首先給出200px的可用空間，而後，剩餘的可用空間再根據分配的比例共享。

彈性盒子的真正價值能夠體如今它的靈活性/響應性，若是你調整瀏覽器窗口的大小，或者增長一個flex item，這時的佈局仍舊是好的。

flex 是一個能夠指定最多三個不一樣值的縮寫屬性。咱們建議不要使用flex的全寫屬性，除非你真的須要（好比要去覆蓋以前寫的縮寫屬性中的一個屬性）。使用全寫會多寫不少的代碼，它們也可能有點讓人困惑。

justify-content（寫在flex container裏）控制 flex 項在主軸上的位置。默認值是 flex-start，這會使全部 flex 項都位於主軸的開始處。你也能夠用 flex-end 來讓 flex 項到結尾處。center也是可用的，可讓 flex 項在主軸居中。而space-around 是頗有用的——它會使全部 flex 項沿着主軸均勻地分佈，並且在兩端都會留有一點空間。還有一個值是 space-between，它和 space-around 很是類似，只是它不會在兩端留下任何空間。

align-items（寫在flex container裏）控制 flex 項在交叉軸上的位置。默認的值是 stretch，其會使全部 flex 項沿着交叉軸的方向拉伸以填充父容器。若是父容器在交叉軸方向上沒有固定的高度，則全部 flex 項將變得與最長的 flex 項同樣長（即高度保持一致）。使用center 值會使flex 項保持其原有的高度，並且會在交叉軸居中。你也能夠設置諸如 flex-start 或 flex-end 這樣使 flex 項在交叉軸的開始或結束處對齊全部的值。

你能夠用 align-self （flex item元素中用）覆蓋 align-items（flex container元素中用）的行爲。

彈性盒子有能夠改變 flex 項的佈局位置的功能，order，而不會影響到源順序（即 dom 樹裏元素的順序）。這也是傳統佈局方式很難作到的一點。

全部 flex 項默認的 order 值是 0。order 值大的 flex 項比 order 值小的在顯示順序中更靠後。相同 order 值的 flex 項按源順序顯示（設置負值也是能夠的）。

flex 嵌套：彈性盒子也能建立一些頗爲複雜的佈局。設置 flex 項爲 flex 容器也是沒有什麼問題的，它的孩子也就表現爲 flexible box 了。

 

Grids：

任何有設計背景的人彷佛都感到驚訝，CSS沒有內置的網格系統，而咱們彷佛使用各類次優方法來建立網格狀的設計。正如你將在本文的最後一部分中發現的那樣，這將被改變，可是你可能須要知道在將來一段時間內建立網格的現有方法。

目前大多數網格類型佈局是使用浮動建立的。使用浮動來建立一個多列布局——這是任何使用網格系統的本質方法。

12列網格 —— 一種很常見的選擇，由於12能夠被六、四、3和2整除，被認爲很是適應不一樣的狀況。

你可使用calc()函數在你的CSS裏面作數學 — 這容許你插入簡單的數學方程到你的CSS值。

偏移容器（offset containers）：好比下面這個，有點巧妙（這樣，想偏移的時候加個class名就行了）。

.offset-by-one {

  margin-left: 10.41666666%;

}

用浮動建立的網格的最大限制是它基本上是一維的。咱們處理的是列元素，只能跨越多個列，而不能跨越行。這些舊的佈局方法很是難以控制元素的高度。而沒有明確設置高度，這是一個很是不靈活的方法 - 它只有當你能保證你的內容將是必定的高度纔有效。

Flexbox是一維設計。它處理單個維度，即行或列。不能爲列和行建立嚴格的網格，這意味着若是咱們要爲網格使用flexbox，咱們仍然須要爲浮動佈局計算百分比。

在您的項目中，您可能仍然選擇使用flexbox'grid'，由於flexbox提供的額外對齊和空間分佈能力超過浮動。可是，您應該知道，您這樣使用flexbox的方式不是它的設計目的。

第三方網格系統：全部的Skeleton（或任何其餘網格框架）在CSS中設置了預約義的類，您能夠經過將它們添加到您的標記來使用。這和你本身計算這些百分比的工做徹底同樣。當使用Skeleton時，咱們須要寫不多的CSS。它爲咱們處理全部的浮動，當咱們添加類到咱們的標記。正是這種將佈局的責任轉移給其餘東西的能力使網格系統的框架成爲一個引人注目的選擇！Skeleton是比你可能遇到的一些比框架更簡單的網格系統框架。大型框架（如Bootstrap和Foundation）中的網格爲各類屏幕寬度提供了更多的功能和額外的斷點。可是，它們都以相似的方式工做 - 經過向您的標記添加特定類，您可使用預約義的網格控制元素的佈局。

Native CSS Grids with Grid Layout：即CSS內置的網格系統，正在逐漸被瀏覽器支持。使用CSS網格佈局，您能夠徹底在CSS中指定網格，而不須要像第三方網格和手工構建的網格同樣，在HTML中添加<div>來造成行和肯定在這些行中的列數。

CSS網格屬性：用display: grid;聲明爲網格，而後用grid-template-columns: repeat(12, 1fr);（也能夠不用repeat而直接寫12個1fr）建立12列的網格，每列的單位是1fr（它描述在網格容器的一小部分可用控件），而後grid-gap: 20px;（顧名思義）。要對跨越網格上的多個列軌道的容器進行樣式化，咱們可使用該grid-column屬性，如grid-column: auto / span 6;，正斜槓以前的值是開始列——在這種狀況下，咱們沒有明確設置，則讓瀏覽器放在下一個可用的列；正斜槓以後的span 6意思是跨越6列，也能夠只用數字，那麼意思就是跨越到數字表明的那一列。另外，還有grid-row。grid-column:和grid-row:後均可只跟1個數字表示那一列或那一行。

CSS網格是二維的，所以隨着佈局的增加和縮小，元素保持水平和垂直排列。

 

 

另外：

CSS transform 屬性容許你修改CSS視覺格式模型的座標空間。使用它，元素能夠被移動（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）。

vertical-align（可用於垂直居中；用在子元素上，這點與text-align不一樣）：specifies the vertical alignment of an inline or table-cell box.

垂直居中還能夠用絕對定位和calc()實現（即便縮放窗口仍居中）。