CSS知识整理
CSS的優先級
瀏覽器是根據優先級來決定當多個規則有不同選擇器對應相同的元素的時候需要使用哪個規則。它基本上是一個衡量選擇器具體選擇哪些區域的尺度：
- 一個元素選擇器不是很具體 — 會選擇頁面上該類型的所有元素 — 所以它的優先級就會低一些。
- 一個類選擇器稍微具體點 — 它會選擇該頁面中有特定 class 屬性值的元素 — 所以它的優先級就要高一點。
!important
有一個特殊的 CSS 可以用來覆蓋所有上面所有優先級計算，不過需要很小心的使用 — !important。用于修改特定屬性的值， 能夠覆蓋普通規則的層疊。
控制繼承
CSS 為控制繼承提供了四個特殊的通用屬性值。每個 css 屬性都接收這些值。
inherit
設置該屬性會使子元素屬性和父元素相同。實際上，就是 "開啟繼承".
initial
設置屬性值和瀏覽器默認樣式相同。如果瀏覽器默認樣式中未設置且該屬性是自然繼承的，那么會設置為 inherit 。
unset
將屬性重置為自然值，也就是如果屬性是自然繼承那么就是 inherit，否則和 initial一樣
css選擇器
組合選擇器
h1, .special {color: blue; }?標簽屬性選擇器
a[title] { } a[href="https://example.com"] { }?偽類和為元素
a:hover { } 例如，::first-line是會選擇一個元素（下面的情況中是<p>）中的第一行， 類似<span>包在了第一個被格式化的行外面，然后選擇這個<span>。 p::first-line { }?運算符
article > p { }| 選擇器 | 示例 | 學習 CSS 的教程 |
| 類型選擇器 | h1 { } | 類型選擇器 |
| 通配選擇器 | * { } | 通配選擇器 |
| 類選擇器 | .box { } | 類選擇器 |
| ID 選擇器 | #unique { } | ID 選擇器 |
| 標簽屬性選擇器 | a[title] { } | 標簽屬性選擇器 |
| 偽類選擇器 | p:first-child { } | 偽類 |
| 偽元素選擇器 | p::first-line { } | 偽元素 |
| 后代選擇器 | article p | 后代運算符 |
| 子代選擇器 | article > p | 子代選擇器 |
| 相鄰兄弟選擇器 | h1 + p | 相鄰兄弟 |
| 通用兄弟選擇器 | h1 ~ p | 通用兄弟 |
?盒子模型
分為塊級盒子和內聯盒子
塊級盒子
- 盒子會在內聯的方向上擴展并占據父容器在該方向上的所有可用空間，在絕大數情況下意味著盒子會和父容器一樣寬
- 每個盒子都會換行
- width 和 height 屬性可以發揮作用
- 內邊距（padding）, 外邊距（margin）和 邊框（border）會將其他元素從當前盒子周圍“推開
內聯盒子
- 盒子不會產生換行。
- width 和 height 屬性將不起作用。
- 垂直方向的內邊距、外邊距以及邊框會被應用但是不會把其他處于 inline 狀態的盒子推開。
- 水平方向的內邊距、外邊距以及邊框會被應用且會把其他處于 inline 狀態的盒子推開。
我們通過對盒子display 屬性的設置，比如 inline 或者 block ，來控制盒子的外部顯示類型。
什么是 CSS?盒模型？
完整的 CSS 盒模型應用于塊級盒子，內聯盒子只使用盒模型中定義的部分內容。模型定義了盒的每個部分 —— margin, border, padding, and content —— 合在一起就可以創建我們在頁面上看到的內容。為了增加一些額外的復雜性，有一個標準的和替代（IE）的盒模型。
盒模型的各個部分
CSS 中組成一個塊級盒子需要：
- Content box: 這個區域是用來顯示內容，大小可以通過設置 width 和 height.
- Padding box: 包圍在內容區域外部的空白區域； 大小通過 padding 相關屬性設置。
- Border box: 邊框盒包裹內容和內邊距。大小通過 border 相關屬性設置。
- Margin box: 這是最外面的區域，是盒子和其他元素之間的空白區域。大小通過 margin 相關屬性設置。
如下圖：
標準盒模型
在標準模型中，如果你給盒設置 width 和 height，實際設置的是 content box。 padding 和 border 再加上設置的寬高一起決定整個盒子的大小
假設定義了 width, height, margin, border, and padding:
.box { width: 350px; height: 150px; margin: 25px; padding: 25px; border: 5px solid black; }如果使用標準模型寬度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。
替代（IE）盒模型
你可能會認為盒子的大小還要加上邊框和內邊距，這樣很麻煩，而且你的想法是對的 ! 因為這個原因，css 還有一個替代盒模型。使用這個模型，所有寬度都是可見寬度，所以內容寬度是該寬度減去邊框和填充部分。
默認瀏覽器會使用標準模型。如果需要使用替代模型，您可以通過為其設置 box-sizing: border-box 來實現。 這樣就可以告訴瀏覽器使用 border-box 來定義區域，從而設定您想要的大小
box-sizing代表padding和border不會改變div的寬度，除非padding占滿了內容區才會被撐出了。
邊距
外邊距折疊
理解外邊距的一個關鍵是外邊距折疊的概念。如果你有兩個外邊距相接的元素，這些外邊距將合并為一個外邊距，即最大的單個外邊距的大小。
在下面的例子中，我們有兩個段落。頂部段落的頁 margin-bottom為 50px。第二段的margin-top 為 30px。因為外邊距折疊的概念，所以框之間的實際外邊距是 50px，而不是兩個外邊距的總和。
您可以通過將第 2 段的 margin-top 設置為 0 來測試它。兩個段落之間的可見邊距不會改變——它保留了第一個段落 margin-bottom設置的 50 像素。
盒子模型和內聯盒子
以上所有的方法都完全適用于塊級盒子。有些屬性也可以應用于內聯盒子，例如由<span>元素創建的那些內聯盒子。
在下面的示例中，我們在一個段落中使用了<span>，并對其應用了寬度、高度、邊距、邊框和內邊距。可以看到，寬度和高度被忽略了。外邊距、內邊距和邊框是生效的，但它們不會改變其他內容與內聯盒子的關系，因此內邊距和邊框會與段落中的其他單詞重疊。
使用 display: inline-block
display 有一個特殊的值，它在內聯和塊之間提供了一個中間狀態。這對于以下情況非常有用：您不希望一個項切換到新行，但希望它可以設定寬度和高度，并避免上面看到的重疊。
背景和邊框
opacity：不透明度屬性(0-1之間)
rgba(2, 121, 139, .3);第四個值代表不透明度
控制背景平鋪
background-repeat屬性用于控制圖像的平鋪行為。可用的值是：
- no-repeat — 不重復。
- repeat-x —水平重復。
- repeat-y —垂直重復。
- repeat — 在兩個方向重復。
控制背景圖像大小
background-size:
- cover —瀏覽器將使圖像足夠大，使它完全覆蓋了盒子區，同時仍然保持其高寬比。在這種情況下，有些圖像可能會跳出盒子外
- contain — 瀏覽器將使圖像的大小適合盒子內。在這種情況下，如果圖像的長寬比與盒子的長寬比不同，則可能在圖像的任何一邊或頂部和底部出現間隙。
背景圖像定位
background-position屬性允許您選擇背景圖像顯示在其應用到的盒子中的位置。它使用的坐標系中，框的左上角是 (0,0)，框沿著水平 (x) 和垂直 (y) 軸定位。
你可以使用像top和right這樣的關鍵字 (在background-image頁面上查找其他的關鍵字):
.box {background-image: url(star.png);background-repeat: no-repeat;background-position: top center; }Copy to Clipboard
或者使用?長度值, and?百分比：
.box {background-image: url(star.png);background-repeat: no-repeat;background-position: 20px 10%; }Copy to Clipboard
你也可以混合使用關鍵字，長度值以及百分比，例如：
.box {background-image: url(star.png);background-repeat: no-repeat;background-position: top 20px; }Copy to Clipboard
最后，您還可以使用 4-value 語法來指示到盒子的某些邊的距離——在本例中，長度單位是與其前面的值的偏移量。所以在下面的 CSS 中，我們將背景從頂部調整 20px，從右側調整 10px:
.box {background-image: url(star.png);background-repeat: no-repeat;background-position: top 20px right 10px; }漸變背景
.a {background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); }.b {background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);background-size: 100px 50px; }多個背景圖像
background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);背景附加
另一個可供選擇的背景是指定他們如何滾動時，內容滾動。這是由background-attachment屬性控制的，它可以接受以下值：
- scroll: 使元素的背景在頁面滾動時滾動。如果滾動了元素內容，則背景不會移動。實際上，背景被固定在頁面的相同位置，所以它會隨著頁面的滾動而滾動。
- fixed: 使元素的背景固定在視圖端口上，這樣當頁面或元素內容滾動時，它就不會滾動。它將始終保持在屏幕上相同的位置。
- local: 這個值是后來添加的 (它只在 Internet Explorer 9+中受支持，而其他的在 IE4+中受支持)，因為滾動值相當混亂，在很多情況下并不能真正實現您想要的功能。局部值將背景固定在設置的元素上，因此當您滾動元素時，背景也隨之滾動。
長度
最常見的數字類型是<length>，例如 10px(像素) 或 30em。CSS 中有兩種類型的長度——相對長度和絕對長度。重要的是要知道它們之間的區別，以便理解他們控制的元素將變得有多大。
絕對長度單位
以下都是絕對長度單位——它們與其他任何東西都沒有關系，通常被認為總是相同的大小。
| 單位 | 名稱 | 等價換算 |
| cm | 厘米 | 1cm = 96px/2.54 |
| mm | 毫米 | 1mm = 1/10th of 1cm |
| Q | 四分之一毫米 | 1Q = 1/40th of 1cm |
| in | 英寸 | 1in = 2.54cm = 96px |
| pc | 十二點活字 | 1pc = 1/6th of 1in |
| pt | 點 | 1pt = 1/72th of 1in |
| px | 像素 | 1px = 1/96th of 1in |
這些值中的大多數在用于打印時比用于屏幕輸出時更有用。例如，我們通常不會在屏幕上使用 cm。惟一一個您經常使用的值，估計就是 px(像素)。
相對長度單位
相對長度單位相對于其他一些東西，比如父元素的字體大小，或者視圖端口的大小。使用相對單位的好處是，經過一些仔細的規劃，您可以使文本或其他元素的大小與頁面上的其他內容相對應。下表列出了 web 開發中一些最有用的單位。
| 單位 | 相對于 |
| em | 在 font-size 中使用是相對于父元素的字體大小，在其他屬性中使用是相對于自身的字體大小，如 width，em越大，盒子越大 |
| ex | 字符“x”的高度 |
| ch | 數字“0”的寬度 |
| rem | 根元素的字體大小 |
| lh | 元素的 line-height |
| vw | 視窗寬度的 1% |
| vh | 視窗高度的 1% |
| vmin | 視窗較小尺寸的 1% |
| vmax | 視圖大尺寸的 1% |
ems and rems
em和rem是您在從框到文本調整大小時最常遇到的兩個相對長度。了解這些方法是如何工作的以及它們之間的區別是很有意義的，尤其是當您開始學習更復雜的主題時，比如樣式化文本或 CSS 布局。下面的示例提供了一個演示。
HTML 是一組嵌套的列表—我們總共有三個列表，并且兩個示例都有相同的 HTML。唯一的區別是第一個類具有 ems，第二個類具有 rems。
首先，我們將 16px 設置為<html>元素的字體大小。
概括地說，在排版屬性中 em 單位的意思是“父元素的字體大小”。帶有 ems 類的<ul>內的<li>元素從它們的父元素中獲取大小。因此，每一個連續的嵌套級別都會逐漸變大，因為每個嵌套的字體大小都被設置為 1.3em—是其父嵌套字體大小的 1.3 倍。
概括地說，rem 單位的意思是“根元素的字體大小”。(“根 em”的 rem 標準。)<ul>內的<li>元素和一個 rems 類從根元素 (<html>)中獲取它們的大小。這意味著每一個連續的嵌套層都不會不斷變大。
css中調整大小
如果你有一個包含了變化容量的內容的盒子，而且你總是想讓它至少有個確定的高度，你應該給它設置一個min-height屬性。盒子就會一直保持大于這個最小高度，但是如果有比這個盒子在最小高度狀態下所能容納的更多內容，那么盒子就會變大。
max-width屬性可以縮小圖片本身與容器一樣大小。
在下面的示例里，我們使用了兩次相同的圖片。第一次使用，屬性值已設為width: 100%，位于比圖片大的容器里，因此圖片拉伸到了與容器相同的寬度；第二次的屬性值則設為max-width: 100%，因此它并沒有拉伸到充滿容器；第三個盒子再一次包含了相同的圖片，同時設定了max-width: 100%屬性，這時你能看到它是怎樣縮小來和盒子大小相適應的。
視口單位
1vh等于視口高度的 1%，1vw則為視口寬度的 1%.你可以用這些單位約束盒子的大小，還有文字的大小。在下面的示例里，我們有一個大小被設為 20vh 和 20vw 的盒子。這個盒子里面有一個字母A，其font-size屬性被設成了 10vh。
.box {border: 5px solid darkblue;width: 20vw;height: 20vh;font-size: 10vh; }圖像、媒體和表單元素
調整圖片大小
如果想要一張圖片可以蓋住盒子的大小，可以使用object-fit,值為
- cover:縮小了圖像，維持了圖像的比例，所以圖像可以整齊地充滿盒子，同時由于比例保持不變,
- contain:圖像將會縮放到足以放到盒子里面的大小。如果它和盒子的比例不同，這將會導致“開天窗”的結果,
- fill:它可以讓圖像充滿盒子，但是不會維持比例
繼承和表單元素
在一些瀏覽器中，表單元素默認不會繼承字體樣式，因此如果你想要確保你的表單填入區域使用 body 中或者一個父元素中定義的字體，你需要向你的 CSS 中加入這條規則。
button, input, select, textarea {font-family : inherit;font-size : 100%; }樣式化表格
間距和布局
通過 table-layout: fixed： 創建更可控的表布局，您可以根據列標題的寬度來規定列的寬度，然后適當地處理它們的內容
默認情況下，當您在表元素上設置邊框時，它們之間將會有間隔。
使用 border-collapse: collapse; 使表元素邊框合并，生成一個更整潔、更易于控制的外觀
:nth-child選擇器用于選擇特定的子元素。它也可以用一個公式作為參數，來選擇一個元素序列。公式2n-1會選擇所有奇數的子元素 (1、3、5 等)，而公式2n會選擇所有偶數的子元素 (2、4、6 等等)。
letter-spacing:設置單元格之間的間距
/* spacing */table {table-layout: fixed;width: 100%;border-collapse: collapse;border: 3px solid purple; }thead th:nth-child(1) {width: 30%; }thead th:nth-child(2) {width: 20%; }thead th:nth-child(3) {width: 15%; }thead th:nth-child(4) {width: 35%; }th, td {padding: 20px; }樣式化文字
字體棧
p {font-family: "Trebuchet MS", Verdana, sans-serif; }CSS 提供了 4 種常用的屬性來改變文本的樣子：
- font-style: 用來打開和關閉文本 italic (斜體)。可能的值如下 (你很少會用到這個屬性，除非你因為一些理由想將斜體文字關閉斜體狀態)：
-
- normal: 將文本設置為普通字體 (將存在的斜體關閉)
- italic: 如果當前字體的斜體版本可用，那么文本設置為斜體版本；如果不可用，那么會利用 oblique 狀態來模擬 italics。
- oblique: 將文本設置為斜體字體的模擬版本，也就是將普通文本傾斜的樣式應用到文本中。
- font-weight: 設置文字的粗體大小。這里有很多值可選 (比如 -light, -normal, -bold, -extrabold, -black, 等等), 不過事實上你很少會用到 normal 和 bold以外的值：
-
- normal, bold: 普通或者加粗的字體粗細
- lighter, bolder: 將當前元素的粗體設置為比其父元素粗體更細或更粗一步。100–900: 數值粗體值，如果需要，可提供比上述關鍵字更精細的粒度控制。
- text-transform: 允許你設置要轉換的字體。值包括：
-
- none: 防止任何轉型。
- uppercase: 將所有文本轉為大寫。
- lowercase: 將所有文本轉為小寫。
- capitalize: 轉換所有單詞讓其首字母大寫。
- full-width: 將所有字形轉換成全角，即固定寬度的正方形，類似于等寬字體，允許拉丁字符和亞洲語言字形（如中文，日文，韓文）對齊。
- text-decoration: 設置/取消字體上的文本裝飾 (你將主要使用此方法在設置鏈接時取消設置鏈接上的默認下劃線。) 可用值為：
-
- none: 取消已經存在的任何文本裝飾。
- underline: 文本下劃線.
- overline: 文本上劃線
- line-through: 穿過文本的線 strikethrough over the text.
文字陰影
text-shadow
text-shadow: 4px 4px 5px red;文本布局
文本對齊
text-align
- left: 左對齊文本。
- right: 右對齊文本。
- center: 居中文字
- justify: 使文本展開，改變單詞之間的差距，使所有文本行的寬度相同
行高
line-height
line-height: 1.5;字母和單詞間距
letter-spacing 和 word-spacing 屬性允許你設置你的文本中的字母與字母之間的間距、或是單詞與單詞之間的間距
Font 樣式：
- font-variant: 在小型大寫字母和普通文本選項之間切換。
- font-kerning: 開啟或關閉字體間距選項。
- font-feature-settings: 開啟或關閉不同的 OpenType 字體特性。
- font-variant-alternates: 控制給定的自定義字體的替代字形的使用。
- font-variant-caps: 控制大寫字母替代字形的使用。
- font-variant-east-asian(en-US): 控制東亞文字替代字形的使用，像日語和漢語。
- font-variant-ligatures: 控制文本中使用的連寫和上下文形式。
- font-variant-numeric: 控制數字，分式和序標的替代字形的使用。
- font-variant-position: 控制位于上標或下標處，字號更小的替代字形的使用。
- font-size-adjust: 獨立于字體的實際大小尺寸，調整其可視大小尺寸。
- font-stretch: 在給定字體的可選拉伸版本中切換。
- text-underline-position: 指定下劃線的排版位置，通過使用 text-decoration-line 屬性的underline 值。
- text-rendering: 嘗試執行一些文本渲染優化。
文本布局樣式：
- text-indent: 指定文本內容的第一行前面應該留出多少的水平空間。
- text-overflow: 定義如何向用戶表示存在被隱藏的溢出內容。
- white-space: 定義如何處理元素內部的空白和換行。
- word-break: 指定是否能在單詞內部換行。
normal
使用默認的斷行規則。
break-all
對于 non-CJK (CJK 指中文/日文/韓文) 文本，可在任意字符間斷行。
keep-all
CJK 文本不斷行。Non-CJK 文本表現同 normal。
break-word
他的效果是word-break: normal 和 overflow-wrap: anywhere 的合，不論 overflow-wrap的值是多少。
- direction: 定義文本的方向 (這取決于語言，并且通常最好讓 HTML 來處理這部分，因為它是和文本內容相關聯的。)
- hyphens: 為支持的語言開啟或關閉連字符。
- line-break: 對東亞語言采用更強或更弱的換行規則。
- text-align-last: 定義一個塊或行的最后一行，恰好位于一個強制換行前時，如何對齊。
- text-orientation: 定義行內文本的方向。
- word-wrap: 指定瀏覽器是否可以在單詞內換行以避免超出范圍。
- writing-mode: 定義文本行布局為水平還是垂直，以及后繼文本流的方向。
列表特定樣式
- list-style-type ：設置用于列表的項目符號的類型，例如無序列表的方形或圓形項目符號，或有序列表的數字，字母或羅馬數字。
- list-style-position ：設置在每個項目開始之前，項目符號是出現在列表項內，還是出現在其外。
- list-style-image ：允許您為項目符號使用自定義圖片，而不是簡單的方形或圓形。
start
start 屬性允許你從 1 以外的數字開始計數
<ol start="4"><li>Toast pitta, leave to cool, then slice down the edge.</li><li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li><li>Wash and chop the salad.</li><li>Fill pitta with salad, humous, and fried halloumi.</li> </ol>reversed
reversed 屬性將啟動列表倒計數
<ol start="4" reversed><li>Toast pitta, leave to cool, then slice down the edge.</li><li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li><li>Wash and chop the salad.</li><li>Fill pitta with salad, humous, and fried halloumi.</li> </ol>value
value 屬性允許設置列表項指定數值
<ol><li value="2">Toast pitta, leave to cool, then slice down the edge.</li><li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li><li value="6">Wash and chop the salad.</li><li value="8">Fill pitta with salad, humous, and fried halloumi.</li> </ol>樣式化鏈接
- Link (沒有訪問過的): 這是鏈接的默認狀態，當它沒有處在其他狀態的時候，它可以使用:link 偽類來應用樣式。
- Visited: 這個鏈接已經被訪問過了 (存在于瀏覽器的歷史紀錄), 它可以使用 :visited 偽類來應用樣式。
- Hover: 當用戶的鼠標光標剛好停留在這個鏈接，它可以使用 :hover 偽類來應用樣式。
- Focus: 一個鏈接當它被選中的時候 (比如通過鍵盤的 Tab 移動到這個鏈接的時候，或者使用編程的方法來選中這個鏈接 HTMLElement.focus()(en-US)) 它可以使用 :focus 偽類來應用樣式。
- Active: 一個鏈接當它被激活的時候 (比如被點擊的時候)，它可以使用 :active 偽類來應用樣式。
- color 文字的顏色
- cursor 鼠標光標的樣式，你不應該把這個關掉，除非你有非常好的理由。
- outline 文字的輪廓 (輪廓有點像邊框，唯一的區別是邊框占用了盒模型的空間，而輪廓沒有； 它只是設置在背景圖片的頂部)。outline 是一個有用的輔助功能，所以在把它關掉之前考慮清楚；你至少應該將懸停 (hover) 狀態的樣式同時應用到選中 (focus) 狀態上。
?給網頁鏈接插入圖片
a[href*="http"] {background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;background-size: 16px 16px;padding-right: 19px; }web字體
@font-face {font-family: "myFont";src: url("myFont.ttf"); }正常布局流
默認的，一個塊級元素的內容寬度是其父元素的 100%，其高度與其內容高度一致。內聯元素的 height width 與內容一致。你無法設置內聯元素的 height width --- 它們就那樣置于塊級元素的內容里。如果你想控制內聯元素的尺寸，你需要為元素設置display: block; （或者，display: inline-block; inline-block 混合了 inline 和 block 的特性。)
彈性盒子
彈性盒子是一種用于按行或按列布局元素的一維布局方法。元素可以膨脹以填充額外的空間，收縮以適應更小的空間。
section {display:flex }flex 模型說明
當元素表現為 flex 框時，它們沿著兩個軸來布局：
- 主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為 main start 和 main end。
- 交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開始和結束被稱為 cross start 和 cross end。
- 設置了 display: flex 的父元素（在本例中是 <section>）被稱之為 flex 容器（flex container）。
- 在 flex 容器中表現為柔性的盒子的元素被稱之為 flex 項（flex item）（本例中是 <article> 元素。
彈性盒子提供了 flex-direction 這樣一個屬性，它可以指定主軸的方向（彈性盒子子類放置的地方）— 它默認值是 row，這使得它們在按你瀏覽器的默認語言方向排成一排（在英語/中文瀏覽器中是從左到右）。
- row
- column
- row-reverse
- column-reverse
flex-flow 縮寫
flex-direction 和 flex-wrap — 的縮寫 flex-flow
flex-direction: row; flex-wrap: wrap; -------------------- flex-flow: row wrap; article {flex: 1;//這是一個無單位的比例值，表示每個 flex 項沿主軸的可用空間大小。本例中，我們設置 <article> 元素的 flex 值為 1，這表示每個元素占用空間都是相等的，占用的空間是在設置 padding 和 margin 之后剩余的空間 } article {flex: 1 200px; } article:nth-of-type(3) {flex: 2 200px; //這表示“每個 flex 項將首先給出 200px 的可用空間， 然后，剩余的可用空間將根據分配的比例共享“ }水平和垂直對齊
還可以使用 彈性盒子的功能讓 flex 項沿主軸或交叉軸對齊
div {display: flex;align-items: center;justify-content: space-around; }align-items 控制 flex 項在交叉軸上的位置。
- 默認的值是 stretch，其會使所有 flex 項沿著交叉軸的方向拉伸以填充父容器。如果父容器在交叉軸方向上沒有固定寬度（即高度），則所有 flex 項將變得與最長的 flex 項一樣長（即高度保持一致）。我們的第一個例子在默認情況下得到相等的高度的列的原因。
- 在上面規則中我們使用的 center 值會使這些項保持其原有的高度，但是會在交叉軸居中。這就是那些按鈕垂直居中的原因。
- 你也可以設置諸如 flex-start 或 flex-end 這樣使 flex 項在交叉軸的開始或結束處對齊所有的值
justify-content 控制 flex 項在主軸上的位置。
- 默認值是 flex-start，這會使所有 flex 項都位于主軸的開始處。
- 你也可以用 flex-end 來讓 flex 項到結尾處。
- center 在 justify-content 里也是可用的，可以讓 flex 項在主軸居中。
- 而我們上面用到的值 space-around 是很有用的——它會使所有 flex 項沿著主軸均勻地分布，在任意一端都會留有一點空間。
- 還有一個值是 space-between，它和 space-around 非常相似，只是它不會在兩端留下任何空間。
flex 項排序
彈性盒子也有可以改變 flex 項的布局位置的功能，而不會影響到源順序（即 dom 樹里元素的順序）
button:first-child {order: 1; }- 所有 flex 項默認的 order 值是 0。
- order 值大的 flex 項比 order 值小的在顯示順序中更靠后。
- 相同 order 值的 flex 項按源順序顯示。所以假如你有四個元素，其 order 值分別是 2，1，1 和 0，那么它們的顯示順序就分別是第四，第二，第三，和第一。
- 第三個元素顯示在第二個后面是因為它們的 order 值一樣，且第三個元素在源順序中排在第二個后面。
- 你也可以給 order 設置負值使它們比值為 0 的元素排得更前面。
網格
網格是由一系列水平及垂直的線構成的一種布局模式
.container {display: grid; }將容器的display屬性設置為grid來定義一個網絡。與彈性盒子一樣，將父容器改為網格布局后，他的直接子項會變為網格項
.container {display: grid;grid-template-columns: 200px 200px 200px; }使用 fr 單位的靈活網格
.container {display: grid;grid-template-columns: 1fr 1fr 1fr;//這個單位表示了可用空間的一個比例 }.container {display: grid;grid-template-columns: 2fr 1fr 1fr;//第一個網格占據兩個格子大小 }fr可以與一般的長度單位混合使用，比如grid-template-columns: 300px 2fr 1fr，那么第一列寬度是300px，剩下的兩列會根據除去300px后的可用空間按比例分配。
網格間隙
使用 grid-column-gap(en-US) 屬性來定義列間隙，使用 grid-row-gap(en-US) 來定義行間隙；使用 grid-gap(en-US) 可以同時設定兩者
.container {display: grid;grid-template-columns: 2fr 1fr 1fr;grid-gap: 20px; }間隙距離可以用任何長度單位包括百分比來表示，但不能使用fr單位
重復構建行/列
你可以使用repeat來重復構建具有某些寬度配置的某些列。舉個例子，如果要創建多個等寬軌道，可以用下面的方法。
.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px; }顯式網格與隱式網格
到目前為止，我們定義過了列，但還沒有管過行。但在這之前，我們要來理解一下顯式網格和隱式網格。顯式網格是我們用grid-template-columns 或 grid-template-rows 屬性創建的。而隱式網格則是當有內容被放到網格外時才會生成的。顯式網格與隱式網格的關系與彈性盒子的 main 和 cross 軸的關系有些類似。
隱式網格中生成的行/列大小是參數默認是auto，大小會根據放入的內容自動調整。當然，你也可以使用grid-auto-rows和grid-auto-columns屬性手動設定隱式網格的大小。下面的例子將grid-auto-rows設為了100px，然后你可以看到那些隱式網格中的行（因為這個例子里沒有設定grid-template-rows，因此，所有行都位于隱式網格內）現在都是 100 像素高了。
.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-auto-rows: minmax(100px,auto);grid-gap: 20px;}方便的 minmax() 函數
100像素高的行/列有時可能會不夠用，因為時常會有比100像素高的內容加進去。所以，我們希望可以將其設定為至少100像素，而且可以跟隨內容來自動拓展尺寸保證能容納所有內容。顯而易見，你很難知道網頁上某個元素的尺寸在不同情況下會變成多少，一些額外的內容或者更大的字號就會導致許多能做到像素級精準的設計出現問題。所以，我們有了minmax函數。
minmax 函數為一個行/列的尺寸設置了取值范圍。比如設定為 minmax(100px, auto)，那么尺寸就至少為 100 像素，并且如果內容尺寸大于 100 像素則會根據內容自動調整
自動使用多列填充
repeat函數中的一個關鍵字auto-fill來替代確定的重復次數
.container {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));//根據后面的minmax分配的最小空間分配合適的網格數量grid-auto-rows: minmax(100px, auto);grid-gap: 20px; }基于線的元素放置
在定義完了網格之后，我們要把元素放入網格中。我們的網格有許多分隔線，第一條線的起始點與文檔書寫模式相關。在英文中，第一條列分隔線（即網格邊緣線）在網格的最左邊而第一條行分隔線在網格的最上面。而對于阿拉伯語，第一條列分隔線在網格的最右邊，因為阿拉伯文是從右往左書寫的。
我們根據這些分隔線來放置元素，通過以下屬性來指定從那條線開始到哪條線結束。
- grid-column-start(en-US)
- grid-column-end(en-US)
- grid-row-start(en-US)
- grid-row-end(en-US)
這些屬性的值均為分隔線序號，你也可以用以下縮寫形式來同時指定開始與結束的線。
- grid-column
- grid-row
注意開始與結束的線的序號要使用/符號分開。
媒體查詢
CSS 媒體查詢為你提供了一種應用 CSS 的方法，僅在瀏覽器和設備的環境與你指定的規則相匹配的時候 CSS 才會真的被應用
可以指定的媒體類型為：
- all
- screen
- speech
例如
@media screen and (width: 600px) {body {color: red;} } @media screen and (max-width: 400px) {body {color: blue;} }朝向
一個受到良好支持的媒體特征是orientation，我們可以用它測得豎放（portrait mode）和橫放（landscape mode）模式。要在設備處于橫向的時候改變 body 文本顏色的話，可使用下面的媒體查詢。
@media (orientation: landscape) {body {color: rebeccapurple;} }使用指點設備
@media (hover: hover) {body {color: rebeccapurple;} }媒體查詢中的“與”邏輯
@media screen and (min-width: 400px) and (orientation: landscape) {body {color: blue;} } 媒體查詢中的“或”邏輯 @media screen and (min-width: 400px), screen and (orientation: landscape) {body {color: blue;} }媒體查詢中的“非”邏輯
@media not all and (orientation: landscape) {body {color: blue;} }媒體查詢案例
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"/><title>Responsive Web Design Task: Task</title><link rel="stylesheet" href="../styles.css"/><style>* {box-sizing: border-box;}html {font: 1.2em/1.4 Arial, Helvetica, sans-serif;}body {padding: 0 0 1em;}header {background-color: #333;color: #fff;border: 5px solid #000;}header ul {list-style: none;margin: 0;padding: 0;}header a {color: #fff;text-decoration: none;display: block;padding: 0.5em 1em;border-top: 1px solid #999;}header .title {font-size: 150%;font-style: italic;font-weight: bold;padding: 1em;}main {padding: 0 1em;}.cards {list-style: none;margin: 0;padding: 0;}.cards li {border: 5px solid #000;margin-bottom: 1em;}.cards h2 {background-color: #333;color: #fff;margin: 0;padding: 0.5em 1em;}.cards .inner {padding: 0.5em 1em;}.sidebar {background-color: #333;border: 5px solid #000;padding: 0.5em 1em;color: #fff;}@media screen and (min-width:93.75rem){header{display: flex;justify-content: space-between;}header a{border:none}nav>ul{display: flex;}nav>ul>li{padding: 1.5em 0em 0em 0em;}main{display: grid;grid-template-columns:3fr 1fr;}.cards{display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap:20px;}.sidebar{margin: 15px;}}</style><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><header><div class="title">My Website</div><nav><ul><li><a href="">Link 1</a></li><li><a href="">Link 2</a></li><li><a href="">Link 3</a></li></ul></nav></header><main><article><h1>This is the main heading</h1><p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><ul class="cards"><li><h2>Card One</h2><div class="inner"><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado.</p></div></li><li><h2>Card Two</h2><div class="inner"><p>Daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p></div></li><li><h2>Card Three</h2><div class="inner"><p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p></div></li><li><h2>Card Four</h2><div class="inner"><p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p></div></li><li><h2>Card Five</h2><div class="inner"><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p></div></li></ul></article><aside class="sidebar"><p>Have you discovered all of the other excellent content on this website?</p></aside></main></body></html>創建液態網格
這個網格表現的不錯，但是它長度固定。 我們實際卻想要一個彈性（流體）的網格，它可以隨著瀏覽器的viewport大小的變化自動伸縮。為了達成這個目標，我們需要把相應的像素的長度變為百分比長度。
把固定寬度轉為伸縮的基于百分比寬度的算式在下面：
target / context = result
在我們的列寬里，我們的目標列長度是 60 像素，我們的上下文是 960 像素的包裝。我們可以這么計算百分比：
60 / 960 = 0.0625
然后我們挪動小數點兩位，得到百分數 6.25%。所以在 CSS 里面，我們可以用 6.25% 代替 60 像素。
我們需要同樣這么算間隔：
20 / 960 = 0.02083333333
所以我們需要用 2.08333333% 代替.col里margin-left的 20 像素，和.wrapper里padding-right的 20 像素。
使用 calc() 函數的更簡單計算
你可以用 calc() 函數來在 CSS 里面做數學方面的計算——這允許你在 CSS 里插入簡單的算式，來計算那些值?
.col.span4 {width: calc((6.25%*4) + (2.08333333%*3)); }???????
總結
- 上一篇： ubuntu搭建无盘服务器,ubuntu
- 下一篇： 如何学习 CSS