文本 Text

文本對齊 Text Align

web 內容大部分都是文本。 CSS 裡面的 text-align 屬性可以控制文本的對齊方式。

text-align: justify; 將文本隔開，使每行的寬度相等。
text-align: center; 可以讓文本居中對齊。
text-align: right; 可以讓文本右對齊。
text-align: left; 是預設值，它可以讓文本左對齊

加粗 Bold

使用 strong 標簽來加粗文字。 粗體文字一般用來吸引讀者註意或用來表示強調。

使用 font-weight 來加粗文字。

<strong></strong>

font-weight: bold;
font-weight: XX px;

下劃線 Underline

使用 u 標簽來給文字添加下劃線。 下劃線通常用來表示重要內容或需要記憶的內容。

使用 text-decoration: underline 標簽來給文字添加下劃線。

如果使用 u 標簽添加下劃線，可能混淆文本和鏈接，則應避免使用它。 超鏈接標簽也有預設的下劃線格式。

<u></u>

text-decoration: underline;

強調/斜體 Italic

使用 em 標簽來強調文本，使用 i 斜體文本。

使用 font-style: italic 標簽來強調文本。

強調和斜體的效果一樣，但是含義不同。前者強調標簽中包含的文本，後者突出技術術語，標題或者來自另一語言的短語。

<em></em>
<i></i>

font-style: italic;

大小寫 Upper/Lowercase

CSS 里的 text-transform 屬性可以改變英文字母的大小寫。 使用這個屬性時，無需改變 HTML 元素中的文本也可以統一頁面里英文的顯示。

下麵的表格展示了 text-transform 的不同值對文字 “Transform me” 的影響：

text-transform: uppercase;

上下標 Super/Subscript

使用sup和sub表示上下標，在表示公式時有用。

<sup></sup>
<sub></sub>

線條 Line

刪除線 Strikethrough

用 s 標簽來給文字添加刪除線。 刪除線是位於文字水平中央的一條線，它代表著一段文字不再有效。

用 text-decoration: line-through 標簽來給文字添加刪除線。

<s></s>

text-decoration: line-through;

水平線 Horizontal Line

用 hr 標簽來創建一條寬度撐滿父元素的水平線。 這種水平分割線一般用來表示內容主題的改變，或在視覺上將文檔分隔成幾個部分。

HTML 中的 hr 是自閉合標簽。

<hr>

行 Row

換行 Wrap

用br標簽來換行。 HTML 中的 br 是自閉合標簽。

<br>

行高 Line Height

CSS 提供 line-height 屬性來設置行間的距離。 行高，顧名思義，可以用來設置每行文字所占據的垂直空間。

line-height: 25px;

陰影 Shadow

box-shadow 屬性用來給元素添加陰影，該屬性值是由逗號分隔的一個或多個陰影列表。

box-shadow 屬性的陰影依次由下麵這些值描述：

• offset-x 陰影的水平偏移量；
• offset-y 陰影的垂直偏移量；
• blur-radius 模糊半徑；
• spread-radius 陰影擴展半徑；
• color 顏色

其中 blur-radius 和 spread-radius 是可選的。

可以通過逗號分隔每個 box-shadow 元素的屬性來添加多個 box-shadow。

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

透明度 Transparency

CSS 里的 opacity 屬性用來設置元素的透明度。

屬性值為 1 代表完全不透明。
屬性值為 0.5 代表半透明。
屬性值為 0 代表完全透明。

透明度會應用到元素內的所有內容，不論是圖片，還是文本，或是背景色。

opacity: 0.7;

超鏈接 Anchor

可以使用 a:hover 偽類選擇器來選取超鏈接的懸停狀態。

a:hover {
  color: blue;
}

位置 Position

相對定位 Relative

在 CSS 里一切 HTML 元素皆為盒子，也就是通常所說的盒模型。 塊級元素自動從新的一行開始（比如標題、段落以及 div），行內元素排列在上一個元素後（比如圖片以及 span）。 元素預設按照這種方式佈局稱為文檔的普通流，同時 CSS 提供了 position 屬性來覆蓋它。

當元素的定位設置為 relative時，它允許通過 CSS 指定該元素在當前文檔流頁面下的相對 偏移量。 CSS 里控制各個方向偏移量的屬性是 left、right、top 和 bottom。 它們代表從原來位置向遠離該方向偏移 指定的像素、百分比或者 em。

p {
  position: relative;
  bottom: 10px;
}

把元素的位置設置成相對，並不會改變該元素在佈局中所占的位置，也不會對其它元素的位置產生影響。

CSS 裡面的 top、bottom、left和 right 定義了元素在相應方位的偏移距離。 元素將從當前位置向屬性相反的方向偏移。

絕對定位 Absolute

CSS position 屬性的取值選項 absolute，它的含義是相對於其包含塊定位。 和 relative 定位不一樣，絕對定位會將元素從當前的文檔流裡面移除，周圍的元素會忽略它。 這樣就可以用 CSS 的 top、bottom、left、right 屬性來調整元素的位置。

絕對定位比較特殊的一點是元素的定位參照於最近的 positioned 祖先元素。 如果它的父元素沒有添加定位規則（預設是 position: relative;），瀏覽器會繼續尋找直到預設的 body 標簽。

p {
  position: absolute;
  bottom: 10px;
}

固定定位 Fixed

fixed 定位，它是一種特殊的絕對（absolute）定位，將元素相對於瀏覽器視窗定位。 類似於絕對位置，它與 CSS 偏移屬性一起使用，並且也會將元素從當前的文檔流裡面移除。 其它元素會忽略它的存在，這樣也許需要調整其他位置的佈局。

但 fixed 和 absolute 的最明顯的區別在於，前者定位的元素不會隨著屏幕滾動而移動。

position: fixed;
top: 0;
left: 0;

浮動 Float

通過元素的 float 屬性來設置。 浮動元素不在文檔流中，它向 left 或 right 浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 通常需要用 width 屬性來指定浮動元素占據的水平空間。

.card1 {
  float: left;
  width: 50%;
}
.card2 {
  float: right;
  width: 50%;
}

元素重疊 Overlapping

當一些元素在位置上重疊時（例如，使用 position: absolute | relative | fixed | sticky時），在 HTML 里後出現的元素會預設顯示在更早出現的元素的上面。 可以使用 z-index 屬性指定元素的堆疊次序。 z-index 的取值是整數，數值大的元素會疊放到數值小的元素上面。

z-index: 2;

元素水平居中 Center

在應用設計中經常需要把一個塊級元素水平居中顯示。 一種常見的實現方式是把塊級元素的 margin 值設置為 auto（前提要設定元素的寬度 width）。

同樣的，這個方法也對圖片奏效。 圖片預設是內聯元素，但是可以通過設置其 display 屬性為 block來把它變成塊級元素。

width: 100px;
margin: auto;

漸變 Gradient

HTML 元素的背景色並不局限於單色。 CSS 還為提供了顏色漸變。 可通過 background 里的 linear-gradient() 實現線性漸變。

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

第一個參數指定了顏色過渡的方向——它的值是角度，90deg 表示垂直漸變（從左到右），45deg 表示沿對角線漸變（從左下方到右上方）。 其他參數指定了漸變顏色的順序：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

repeating-linear-gradient()函數和 linear-gradient() 很像，主要區別是前者會重覆指定的漸變。 repeating-linear-gradient() 有很多參數，為了便於理解，只用到角度值和色標。角度就是漸變的方向。 色標代表漸變顏色及發生漸變的位置，由百分比或者像素值表示。

下麵的代碼可以幫助理解成對的起止漸變顏色值是如何過渡的。

0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px

如果每對起止漸變顏色值的顏色都是相同的，由於是在兩個相同的顏色間過渡，那麼中間的過渡色也為同色，接著就是同色的過渡色和下一個起止顏色，最終產生的效果就是條紋。

背景圖

background 屬性支持使用 url() 函數作為屬性值，這讓我們可以通過鏈接的方式引入紋理或樣式的圖片。 圖片鏈接的地址應寫在括弧內，一般會用引號包起來。

background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");

元素大小 Scale

CSS 屬性 transform 裡面的 scale() 函數可以用來改變元素的顯示比例。

p {
  transform: scale(1.5);
}

transform 屬性有很多函數可以調用，可以對元素進行調整大小、移動、旋轉、翻轉等操作。 當使用偽類選取元素的指定狀態（如 :hover）時，可以通過 transform 屬性非常方便地給元素添加交互。

p:hover {
  transform: scale(1.1);
}

transform 屬性 skewX()：它使選擇的元素沿著 X 軸（橫向）傾斜指定的角度。

transform: skewX(24deg);

skewY 屬性使指定元素沿 Y 軸（垂直方向）翻轉指定角度。

transform: skewY(24deg);

動畫&關鍵幀 Animation&Keyframes

animation 屬性控制動畫，@keyframes規則控制動畫中各階段的變化。 總共有 8 個 animation 屬性。

animation-name 用來設置動畫的名稱。animation-duration 設置動畫顯示的時間。

@keyframes 可以通過設置特定時間點的行為來創建動畫。 為此，只需要給持續時間內的特定幀（從 0% 到 100%）加上 CSS 規則。

#rect {
  animation-name: rainbow;
  animation-duration: 4s;
}
@keyframes rainbow {
    0% {
      background-color: blue;
  }
    50% {
      background-color: green;
  }
    100% {
      background-color: yellow;
  }
}

animation-fill-mode 指定了在動畫結束時元素的樣式.

animation-fill-mode: forwards;

animation-iteration-count，這個屬性控制動畫迴圈的次數。如果想讓動畫一直運行，可以把值設置成 infinite。

animation-iteration-count: 3;

animation-timing-function 用來定義動畫的速度曲線。 速度曲線決定了動畫從一套 CSS 樣式變為另一套所用的時間。 如果要描述的動畫是一輛車在指定時間內（animation-duration）從 A 運動到 B，那麼 animation-timing-function 表述的就是車在運動中的加速和減速等過程。有一些預定義的關鍵字可用於常見的選項。 比如，預設值是 ease，動畫以低速開始，然後加快，在結束前變慢。 其它常用的值包括 ease-out：動畫以高速開始，以低速結束；ease-in，動畫以低速開始，以高速結束；linear：動畫從頭到尾的速度是相同的。

貝塞爾曲線 Bezier Curve

在 CSS 動畫里，用 cubic-bezier 來定義貝塞爾曲線。 曲線的形狀代表了動畫的速度。 曲線在 1 * 1 的坐標系統內， 其中 X 軸代表動畫的時間間隔（類似於時間比例尺），Y 軸代表動畫的改變。

cubic-bezier 函數包含了 1 * 1 網格裡的4個點：p0、p1、p2、p3。 其中 p0 和 p3 是固定值，代表曲線的起始點和結束點，坐標值依次為 (0, 0) 和 (1, 1)。 你只需設置另外兩點的 x 值和 y 值，設置的這兩點確定了曲線的形狀從而確定了動畫的速度曲線。 在 CSS 裡面通過 (x1, y1, x2, y2) 來確定 p1 和 p2。 以下就是 CSS 貝塞爾曲線的例子：

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

對齊 Align

文本對齊

見第一標題文本下對齊子標題。

HTML 元素對齊

HTML 元素對齊需要考慮盒子模型和文檔流。

居中對齊

對於塊級元素：

先給元素設定寬度，然後推外邊距至充滿父元素的可用空間。

<div class="parent">
  <div class="child">
  </div>
</div>

通過設置邊距把父元素的空間可視化：

.parent {
  border: 5px solid red;
}

把子元素的寬度設置為父元素的 50%，給一定的內邊矩（把元素變為空心）和邊框（為了可視化），為了居中子元素，把外邊距設置為 auto ，該屬性告訴瀏覽器根據可用空間自動計算外邊距：

.child {
  width: 50%;
  padding: 20px;
  border: 4px solid green;
  margin: auto;
}

對於行內元素，需要先把其變為塊級元素，然後應用相同的方式：

.child {
  display: block;
  border: 4px dashed blue;
  margin: auto;
}

左右對齊

常用方式是使用 float 屬性或者 position 屬性。

float 屬性設置元素位置相對於其父元素的文本內容。文本會包住子元素。

右對齊：

<div class="parent">
  <img src="logo.png" class="child">Lorem
</div>

.child {
  float: right;
}

註意文本內容在 img 元素之後，此時圖片的右部和頂部是挨著屏幕的，如果文本內容在圖片之前，那麼圖片的頂部會挨著文本。