CSS參考

一個免費的視覺引導CSS

通過實例學習：cssreference是一個免費的視覺引導CSS。它采用了最流行的性質，并說明和動畫舉例說明他們。

GitHub

default align-content: stretch;

每條線將延伸到填充的剩余空間。

在這種情況下，容器為300px高。所有框都50px高，除了第二個誰是100px高的。

align-content: flex-start;

每行只能填補它的空間需要。他們都將移向開始了Flexbox的容器的十字軸。

align-content: flex-end;

每行只能填補它的空間需要。他們都將移向結束了Flexbox的容器的十字軸。

align-content: center;

每行只能填補它的空間需要。他們都將移向中心的Flexbox的容器的十字軸。

align-content: space-between;

每行只能填補它的空間需要。在剩余的空間就會出現之間的線路。

align-content: space-around;

每行只能填補它的空間需要。在剩余的空間將平均分配周圍的行：第一行之前，在兩者之間，并在最后一個之后。

＃CSS對齊項

定義Flexbox的項目的方式，根據所述對準十字軸，線Flexbox的容器內。

align-items: flex-start;

該Flexbox的項目，于對準開始的的十字軸。

缺省情況下，橫軸是垂直的。這意味著Flexbox的項目將被對準垂直于頂部。

align-items: flex-end;

該Flexbox的項目，于對齊結束的的十字軸。

缺省情況下，橫軸是垂直的。這意味著Flexbox的項目將被對準垂直于_bottom。

align-items: center;

將Flexbox的項目，于對準中心的的十字軸。

缺省情況下，橫軸是垂直的。這意味著Flexbox的物品將被集中 垂直。

align-items: baseline;

該Flexbox的項目，于對齊基線的的十字軸。

缺省情況下，橫軸是垂直的。這意味著Flexbox的項目將贊同以有基線他們的文字沿水平線對齊。

align-items: stretch;

該Flexbox的項目將在整個伸展十字軸。

缺省情況下，橫軸是垂直。這意味著Flexbox的項目將填補了整個垂直空間。

＃CSS對齊自

工作像align-items，但只適用于單一的，而不是Flexbox的項目，所有的人。

align-self: flex-start;

如果容器具有align-items: center與靶有align-items: flex-start，只有目標將在交叉軸的起點。

默認情況下，這意味著將對準垂直于頂部。

align-self: flex-end;

如果容器具有align-items: center與靶有align-items: flex-end，只有目標將在交叉軸的端部。

默認情況下，這意味著將對準垂直于底部。

align-self: center;

如果容器具有align-items: flex-start與靶有align-items: center，只有目標將在交叉軸的中心。

默認情況下，這意味著它會被垂直居中。

align-self: baseline;

如果容器具有align-items: center與靶有align-items: baseline，只有目標將在交叉軸的基線。

默認情況下，這意味著它將沿著文字的basline對齊。

align-self: stretch;

如果容器具有align-items: center與靶有align-items: stretch，只有目標將沿著整個橫軸伸展。

＃CSS動漫延遲

定義動畫有多久前等待的時間開始。動畫只能在其被推遲的第一迭代。

default animation-delay: 0s;

動畫將等待零點幾秒，因此馬上開始。

animation-delay: 1.2s;

您可以使用十進制值中秒的關鍵字s。

animation-delay: 2400ms;

您可以使用毫秒代替秒，關鍵字ms。

animation-delay: -500ms;

您可以使用負值：動畫將開始就好像它已經被打了500ms。

＃CSS動畫方向

定義在哪個方向動畫播放。

default animation-direction: normal;

動畫播放向前。當它到達末端，則在第一個關鍵幀開始。

animation-direction: reverse;

在播放動畫時向后：開始在最后一個關鍵幀，在第一個關鍵幀結束。

animation-direction: alternate;

動畫播放向前，再向下：

  • 開始于第一個關鍵幀
  • 停在最后一個關鍵幀
  • 再次啟動，但在最后的關鍵幀
  • 停在第一個關鍵幀

animation-direction: alternate-reverse;

動畫播放向后，再向前：

  • 開始于最后一個關鍵幀
  • 停在第一個關鍵幀
  • 再次啟動，但在第一個關鍵幀
  • 停在最后一個關鍵幀

＃CSS動畫持續(xù)時間

定義動畫持續(xù)多久。

default animation-duration: 0s;

默認值是零秒：動畫根本不會玩。

animation-duration: 1.2s;

您可以使用十進制值中秒的關鍵字s。

animation-duration: 2400ms;

您可以使用毫秒代替秒，關鍵字ms。

＃CSS動畫填充模

定義發(fā)生了什么之前，動畫開始和之后它結束。填充模式可以告訴瀏覽器如果動畫的風格也應適用之外的動畫。

default animation-fill-mode: none;

該動畫的風格并不影響默認的風格：動畫開始之前，以及動畫結束后返回到默認狀態(tài)的元素設置為默認狀態(tài)。

animation-fill-mode: forwards;

在動畫結束時應用的最后一個樣式保留之后。

animation-fill-mode: backwards;

動畫的風格就已經被應用之前實際開始動畫。

animation-fill-mode: both;

該樣式應用于之前和之后播放動畫。

＃CSS動畫迭代計數

定義了動畫多少次播放。

default animation-iteration-count: 1;

動畫將只播放一次。

animation-iteration-count: 2;

可以使用整數值來定義一個特定的次數的動畫將播放量。

animation-iteration-count: infinite;

通過使用關鍵字infinite，動畫將無限期播放。

＃CSS動畫名

定義其使用動畫關鍵幀。

default animation-name: none;

如果沒有指定動畫的名稱，沒有動畫播放。

animation-name: fadeIn;

如果指定了名，關鍵幀匹配該名稱將被使用。

例如，fadeIn動畫看起來像這樣：

@keyframes淡入{
  從{
    不透明度：0;
  }
  至 {
    不透明度：1;
  }
}

animation-name: moveRight;

又如：moveRight動畫：

@keyframes MoveRight的{
  從{
    變換：translateX（0）;
  }
  至 {
    變換：translateX（100像素）;
  }
}

＃CSS動畫播放狀態(tài)

如果定義動畫播放與否。

default animation-play-state: running;

如果animation-duration與animation-name定義，動畫將自動開始播放。

animation-play-state: paused;

動畫設定停在了第一個關鍵幀。

這比具有或者沒有不同animation-duration或animation-name在所有。如果動畫暫停，應用該樣式是，的第一個關鍵幀，而不是默認的樣式。

在這個例子中，平方是通過默認可見，但上的第一個關鍵幀fadeAndMove時，opacity被設定為0。暫停時，動畫將在這一個關鍵幀“卡殼”，因此將是無形的。

@keyframes fadeAndMove {
  從{
    不透明度：0;
    變換：translateX（0）;
  }
  至 {
    不透明度：0;
    變換：translateX（100像素）;
  }
}

＃CSS動畫定時功能

如何定義之間的值開始和結束的計算的動畫。

default animation-timing-function: ease;

動畫開始緩慢，在中間的加速，并在結束減慢。

animation-timing-function: ease-in;

動畫開始慢慢地，逐漸加速，直到結束。

animation-timing-function: ease-out;

動畫很快開始，并逐漸減速，直到結束。

animation-timing-function: ease-in-out;

像ease，但更明顯。

動畫很快開始，并逐漸減速，直到結束。

animation-timing-function: linear;

動畫有一個*恒定的速度。

animation-timing-function: step-start;

動畫跳躍瞬間的最終狀態(tài)。

animation-timing-function: step-end;

動畫停留在初始狀態(tài)，直到最后，當它立即跳轉到最終狀態(tài)。

animation-timing-function: steps(4, end);

通過使用steps()帶有整數，你可以定義一個特定的數字達到年底前的步驟。元素的狀態(tài)會不會逐漸變化的，而是跳躍的州在不同的時刻。

＃CSS動畫

＃CSS背景附件

定義如何滾動頁面時背景圖像的行為。

default background-attachment: scroll;

背景圖像會隨著頁面滾動。它也將定位并根據它施加到元件調整本身。

background-attachment: fixed;

背景圖像將不與頁滾動，并且根據視口保持定位。它也將定位并根據視口調整本身。其結果是，背景圖像將可能僅部分可見。

＃CSS背景素材

定義多遠背景應該延長的元素中。

default background-clip: border-box;

背景整個單元甚至完全延伸，下邊界。

background-clip: padding-box;

背景僅延伸到邊緣的邊界的：它包括填充，但不是邊框。

background-clip: content-box;

背景僅延伸到邊緣的內容：它不包括填料，也沒有邊框。

＃CSS背景色

定義了元素的背景的顏色。

default background-color: transparent;

缺省情況下，背景顏色是透明，基本上意味著有沒有背景顏色。

background-color: red;

您可以使用一個140+顏色名稱。

background-color: #05ffb0;

您可以使用十六進制顏色代碼。

background-color: rgb(50, 115, 220);

您可以使用RGB（）顏色代碼：

  • 的第一個值是用于 red
  • 第二值是用于 green
  • 第三值是對 blue

他們每個人都可以有之間的值0和255。

background-color: rgba(50, 115, 220, 0.3);

您可以使用RGBA（）色碼：

  • 前3個值是 rgb
  • 第四值是alpha信道，并且定義的顏色的不透明度

阿爾法值可以從零0（透明）一1（不透明）。

background-color: hsl(14, 100%, 53%);

您可以使用HSL（）色碼：

  • 的第一個值是hue可以去從0到359
  • 所述第二值是saturation與去從0％至100％
  • 第三值是對luminosity去從0％至100％

background-color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL（）一個顏色代碼：

  • 前3個值是 hsl
  • 第四值是alpha信道，并且定義的顏色的不透明度

阿爾法值可以從零0（透明）一1（不透明）。

＃CSS背景圖片

定義為元素的背景的圖像。

default background-image: none;

刪除任何背景圖像。

background-image: url(./images/jt.png);

使用在定義的圖像URL路徑。這個路徑可以是相對于（對CSS文件）或絕對（象http://cssreference.io./images/jt.png）。

background-image: linear-gradient(red, blue);

可以定義一個線性梯度為背景圖像。

您需要定義至少兩種顏色。第一個將在頂部，底部的第二個啟動。

默認角度為to bottom（或180deg），這意味著該梯度是垂直，從頂部開始，在元件的底部結束。

background-image: linear-gradient(45deg, red, blue);

您可以指定一個角度，無論是在程度，或者用關鍵字。

當使用輩分，您指定的方向漸變，或當它結束。所以0deg指的頂級元素，如12:00的時鐘。

在這個例子中，45deg裝置2:30，或右上角。

background-image: radial-gradient(green, purple);

您可以定義一個徑向漸變作為背景圖像。

您需要定義至少兩種顏色。第一個將在中心，在邊緣處的第二個。

background-image: radial-gradient(circle, green, purple);

您可以指定形狀的徑向漸變：圓形或橢圓形（默認）。

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

您可以指定顏色停止使用百分比值。

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

您可以指定在那里的坡度應終止：

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

喜歡跟background-position，你可以指定位置的梯度。

＃CSS背景出身

定義了背景圖像的原點。

default background-origin: padding-box;

背景圖像開始在邊緣的邊界：內的空白，但沒有邊界。

background-origin: border-box;

背景圖像開始下邊界。

background-origin: content-box;

背景圖象僅開始于邊緣內容：它不包括填料，也沒有邊框。

＃CSS背景位置

定義了背景圖像的位置。

default background-position: 0% 0%;

背景圖像將被定位在0％上的水平軸和0％在垂直軸上，這意味著該元素的左上角。

background-position: bottom right;

您可以使用組合位置的關鍵字：center，top，bottom，left和right。

background-position: center center;

背景圖像將被定位在該元件的中心。

＃CSS背景重復

定義背景圖片如何重演整個元素的背景，從后臺位置開始。

default background-repeat: repeat;

背景圖像都將重演水平和垂直方向。

background-repeat: repeat-x;

背景圖像只會重演水平。

background-repeat: repeat-y;

背景圖像只會重演垂直。

background-repeat: no-repeat;

背景圖像將只出現一次。

＃CSS背景大小

定義了背景圖像的大小。

default background-size: auto auto;

背景圖像將保持其原始大小。

例如，在此背景圖像是960像素由640像素大。其縱橫比是3 2，它比它的容器（它是150像素高），從而，可以更大的剪切。

background-size: 120px 80px;

您可以指定一個尺寸像素：

  • 的第一個值是水平尺寸
  • 第二個是垂直尺寸

background-size: 100% 50%;

您可以使用百分比值，以及。小心，這可能改變長寬比的背景圖像，并導致意想不到的結果。

background-size: contain;

關鍵字contain將調整的背景圖像，以確保它仍然是完全可見。

background-size: cover;

關鍵字cover將調整的背景圖像，以確保該元件被完全覆蓋。

＃CSS背景

＃CSS下邊框顏色

像border-color，但對于底部邊框而已。

border-bottom-color: transparent;

應用一個透明色的底邊框。底邊框仍然會占用空間的定義border-width值。

border-bottom-color: red;

您可以使用一個140+顏色名稱。

border-bottom-color: #05ffb0;

您可以使用十六進制顏色代碼rgb()，rgba()，hsl()，hsla()...

＃CSS邊框左下角半徑

定義半徑的左下角。

default border-bottom-left-radius: 0;

刪除任何邊界半徑。

border-bottom-left-radius: 20px;

您可以使用像素值。

border-bottom-left-radius: 50%;

您可以使用百分比值。在本實施例中，半徑開始中途的底部邊界，并在中途結束左邊框。

border-bottom-left-radius: 20px 50%;

如果設置兩個值，第一個是對底部邊框，第二個用于左邊框。

＃CSS邊框右下角半徑

定義半徑右下角的。

default border-bottom-right-radius: 0;

刪除任何邊界半徑。

border-bottom-right-radius: 20px;

您可以使用像素值。

border-bottom-right-radius: 50%;

您可以使用百分比值。在本實施例中，半徑開始中途的底部邊界，并在中途結束右邊界。

border-bottom-right-radius: 20px 50%;

如果設置兩個值，第一個是對底部邊框，第二個為正確的邊界。

＃CSS下邊框風格

像border-style，但對于底部邊框而已。

default border-bottom-style: none;

刪除底部邊框。

border-bottom-style: dotted;

打開底部邊界進入點的序列。

border-bottom-style: dashed;

打開底邊框為虛線序列。

border-bottom-style: solid;

打開底邊框為實線。

border-bottom-style: double;

拆分底邊框為兩行。

border-bottom-style: groove;

設置一個插圖風格的底部邊框。

＃CSS下邊框寬度

像border-width，但對于底部邊框而已。

default border-bottom-width: 0;

刪除底部邊框。

border-bottom-width: 4px;

您可以使用像素值。

＃CSS邊框底部

border-bottom: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border-bottom: 2px solid;

只有顏色是可選。如果你忽略它，應用顏色將是顏色的文本。

＃CSS邊界崩潰

定義是否表格邊框應該分開或折疊。

default border-collapse: separate;

每個表單元格將顯示它自己的邊界。

在本實施例中，每個小區(qū)具有border-width的4像素。其結果是，之間的邊界2細胞將8像素。

border-collapse: collapse;

相鄰的表格單元格將合并它們的邊界在一起。

出現的細胞首先在代碼將“贏”：它的邊界會掩蓋那些下面的單元格。

＃CSS邊框顏色

定義元素的邊框的顏色。

default border-color: transparent;

應用一個透明色邊框。邊框仍然會占用空間的定義border-width值。

border-color: red;

您可以使用一個140+顏色名稱。

border-color: #05ffb0;

您可以使用十六進制顏色代碼。

border-color: rgb(50, 115, 220);

您可以使用RGB（）顏色代碼：

  • 的第一個值是用于 red
  • 第二值是用于 green
  • 第三值是對 blue

他們每個人都可以有之間的值0和255。

border-color: rgba(50, 115, 220, 0.3);

您可以使用RGBA（）色碼：

  • 前3個值是 rgb
  • 第四值是alpha信道，并且定義的顏色的不透明度

阿爾法值可以從零0（透明）一1（不透明）。

border-color: hsl(14, 100%, 53%);

您可以使用HSL（）色碼：

  • 的第一個值是hue可以去從0到359
  • 所述第二值是saturation與去從0％至100％
  • 第三值是對luminosity去從0％至100％

border-color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL（）一個顏色代碼：

  • 前3個值是 hsl
  • 第四值是alpha信道，并且定義的顏色的不透明度

阿爾法值可以從零0（透明）一1（不透明）。

＃CSS左邊框的顏色

像border-color，但對于左邊框僅。

border-left-color: transparent;

施加透明顏色的左邊界。左邊框將仍占用空間的定義border-width值。

border-left-color: red;

您可以使用一個140+顏色名稱。

border-left-color: #05ffb0;

您可以使用十六進制顏色代碼rgb()，rgba()，hsl()，hsla()...

＃CSS左邊框風格

像border-style，但對于左邊框僅。

default border-left-style: none;

移除左邊框。

border-left-style: dotted;

變?yōu)樽筮吔绯傻狞c的序列。

border-left-style: dashed;

打開左邊框為虛線序列。

border-left-style: solid;

變?yōu)樽筮吔绯蓪嵕€。

border-left-style: double;

拆分左邊框為兩行。

border-left-style: groove;

設置一個插圖風格左邊框。

＃CSS左邊框寬度

像border-width，但對于左邊框僅。

default border-left-width: 0;

移除左邊框。

border-left-width: 4px;

您可以使用像素值。

＃CSS左邊框

border-left: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border-left: 2px solid;

只有顏色是可選。如果你忽略它，應用顏色將是顏色的文本。

＃CSS邊界半徑

定義半徑元素的角落。

default border-radius: 0;

刪除任何邊界半徑。

border-radius: 20px;

您可以使用像素值。

border-radius: 50%;

您可以使用百分比值。在本實施例中，半徑通過每個邊界半途開始。

border-radius: 20px 50%;

如果設置兩個值，第一個是對于頂部和底部邊界，第二個為所述左和右邊緣。

＃CSS右邊框的顏色

像border-color，但是對于右邊界只。

border-right-color: transparent;

應用一個透明的顏色右邊框。右邊框仍然會占用空間的定義border-width值。

border-right-color: red;

您可以使用一個140+顏色名稱。

border-right-color: #05ffb0;

您可以使用十六進制顏色代碼rgb()，rgba()，hsl()，hsla()...

＃CSS右邊框風格

像border-style，但是對于右邊界只。

default border-right-style: none;

刪除右邊框。

border-right-style: dotted;

變?yōu)橛覀冗吔邕M入點的序列。

border-right-style: dashed;

打開右邊框分為劃線的序列。

border-right-style: solid;

變?yōu)橛疫吔绯蓪嵕€。

border-right-style: double;

拆分右邊框為兩行。

border-right-style: groove;

設置一個插圖風格的右邊框。

＃CSS右邊框的寬度

像border-width，但是對于右邊界只。

default border-right-width: 0;

刪除右邊框。

border-right-width: 4px;

您可以使用像素值。

＃CSS右邊框

border-right: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border-right: 2px solid;

只有顏色是可選。如果你忽略它，應用顏色將是顏色的文本。

＃CSS邊框樣式

定義元素邊框的風格。

default border-style: none;

移除元素的邊界。

border-style: dotted;

變成邊界進入點的序列。

border-style: dashed;

打開邊界進入短線的序列。

border-style: solid;

打開邊界進入實線。

border-style: double;

拆分邊界進入兩行。

border-style: groove;

設置一個插圖風格的邊界。

＃CSS邊框頂部的顏色

像border-color，但對于頂部邊框而已。

border-top-color: transparent;

應用一個透明的顏色上邊框。上邊框仍將占用空間的定義border-width值。

border-top-color: red;

您可以使用一個140+顏色名稱。

border-top-color: #05ffb0;

您可以使用十六進制顏色代碼rgb()，rgba()，hsl()，hsla()...

＃CSS邊框左上角的半徑

定義半徑左上角的。

default border-top-left-radius: 0;

刪除任何邊界半徑。

border-top-left-radius: 20px;

您可以使用像素值。

border-top-left-radius: 50%;

您可以使用百分比值。在本實施例中，半徑開始中途的頂部邊界，并在中途結束左邊框。

border-top-left-radius: 20px 50%;

如果設置兩個值，第一個是在頂部邊界，第二個為左邊框。

＃CSS邊框右上角半徑

定義半徑右上角的。

default border-top-right-radius: 0;

刪除任何邊界半徑。

border-top-right-radius: 20px;

您可以使用像素值。

border-top-right-radius: 50%;

您可以使用百分比值。在本實施例中，半徑開始中途的頂部邊界，并在中途結束右邊界。

border-top-right-radius: 20px 50%;

如果設置兩個值，第一個是在頂部邊界，第二個為右邊界。

＃CSS邊框頂式

像border-style，但對于頂部邊框而已。

default border-top-style: none;

刪除頂部邊框。

border-top-style: dotted;

接通頂部邊界進入點的序列。

border-top-style: dashed;

打開上邊框分為劃線的序列。

border-top-style: solid;

打開頂部邊框變成了實線。

border-top-style: double;

拆分上邊框為兩行。

border-top-style: groove;

設置一個插圖風格上邊框。

＃CSS邊框頂部寬度

像border-width，但對于頂部邊框而已。

default border-top-width: 0;

刪除頂部邊框。

border-top-width: 4px;

您可以使用像素值。

＃CSS邊框頂部

border-top: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border-top: 2px solid;

只有顏色是可選。如果你忽略它，應用顏色將是顏色的文本。

＃CSS邊框寬度

定義元素的邊框的寬度。

border-width: 1px;

定義的寬度都邊框為1px。

border-width: 2px 0;

限定在頂部和底部邊界為2px，左，右為0。

＃CSS邊界

為速記屬性border-width border-style 和 border-color。

border: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border: 2px solid;

只有顏色是可選。如果你忽略它，應用顏色將是顏色的文本。

＃CSS底部

定義根據其在所述元件的位置底部邊緣。

default bottom: auto;

該元件將保持在其自然位置。

bottom: 20px;

如果該元素是在適當的位置相對，所述元件將移動向上通過由限定的量底值。

bottom: 0;

如果該元素處于位置絕對的，元素本身會從位置底部的首先定位的祖先。

＃CSS箱陰影

定義元素的影子。

default box-shadow: none;

刪除被應用到任何元素的box-shadow。

box-shadow: 2px 6px;

你至少需要兩個值：

  • 第一種是在水平方向偏移
  • 第二個是垂直偏移

陰影顏色將從文本顏色繼承。

box-shadow: 2px 6px red;

您可以定義一個顏色作為最后的值。

正如color，你可以使用顏色名稱，十六進制，RGB，HSL ...

box-shadow: 2px 4px 10px red;

可選的第三個值定義模糊的影子。

顏色會跨越10px的在這個例子中被擴散，從不透明到透明的。

box-shadow: 2px 4px 10px 4px red;

可選的第四個值定義蔓延的陰影。

傳播定義了陰影多少應該成長：它增強了陰影。

＃CSS箱上漿

定義如何在元件的寬度和高度被計算：它們是否包括填充和邊界或沒有。

default box-sizing: content-box;

的寬度和高度的元件的僅適用于內容的元素。

例如，該元件具有

  • border-width: 12px
  • padding: 30px
  • width: 200px

該全寬為24px的+ 60像素+ 200像素= 284px。

的內容具有定義的寬度。盒子可容納這些尺寸。

box-sizing: border-box;

的寬度和高度的元件的應用到元件的所有部分：內容，該填充和邊界。

例如，該元件具有

  • border-width: 12px
  • padding: 30px
  • width: 200px

在全寬是200像素，無論是什么。

這個盒子有定義的寬度。內容可容納這些尺寸，并最終被200像素- 30PX - 24px的= 146px。

＃CSS清

前面所有的浮動元素后移動元素。

clear: none;

在明確與有兄弟姐妹一起使用時屬性僅有關浮點值。

該元素將坐在一起，任何浮動元素之前它。

clear: left;

清除的元素會移動后，它前面的左側浮動元素，但仍將沿著右浮動元素。

clear: right;

清除的元素會移動后，它前面的任何權利浮動元素，但仍將沿著左浮動元素。

clear: both;

清除的元素會移動后，它前面的浮動元素。這包括懸空，右浮動元素。

＃CSS彩

定義的顏色文本。

color: transparent;

施加透明顏色的文本。文本將仍然占用空間，它應該。

color: red;

您可以使用一個140+顏色名稱。

color: #05ffb0;

您可以使用十六進制顏色代碼。

color: rgb(50, 115, 220);

您可以使用RGB（）顏色代碼：

  • 的第一個值是用于 red
  • 第二值是用于 green
  • 第三值是對 blue

他們每個人都可以有之間的值0和255。

color: rgba(0, 0, 0, 0.5);

您可以使用RGBA（）色碼：

  • 前3個值是 rgb
  • 第四值是alpha信道，并且定義的顏色的不透明度

阿爾法值可以從零0（透明）一1（不透明）。

color: hsl(14, 100%, 53%);

您可以使用HSL（）色碼：

  • 的第一個值是hue可以去從0到359
  • 所述第二值是saturation與去從0％至100％
  • 第三值是對luminosity去從0％至100％

color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL（）一個顏色代碼：

  • 前3個值是 hsl
  • 第四值是alpha信道，并且定義的顏色的不透明度

阿爾法值可以從零0（透明）一1（不透明）。

＃CSS列數

限定了元件的列數。

default column-count: auto;

從元素刪除任何列（除非另一個column-屬性設置）。

column-count: 3;

當使用整數值，該元件將在所定義的列數分發(fā)其子元素。

＃CSS列隙

限定了元件的各列之間的間隙。

default column-gap: normal;

列之間的間隙設置為瀏覽器的默認值，這通常是1em的。

column-gap: 2px;

您可以使用像素值的差距。

注意，間隙只出現之間的列，而不是在邊緣的列的外部側面。

＃CSS列寬

限定了元件的列數。

default column-width: auto;

該元素將不會派發(fā)其子元素為列，unlesse一個column-count值定義。在這種情況下，列的寬度將從列計數可以infered。

column-width: 10px;

您可以使用像素值的列寬。

列數將是分發(fā)橫跨元件的所有內容所需的最低限度。

＃CSS內容

定義的文本內容:before和:after偽元素。

default content: normal;

沒有內容被添加到元件。

content: "Foo bar";

考慮到這個HTML元素：

<p類=“元素”>
  你好，世界
</ P>

而這個CSS：

.element：前{
  內容：“富巴”;
}

文本內容將被前置到元素的內容。

請注意如何最終結果結合從CSS的HTML和文字文本。

content: url(./images/jt.png);

您可以插入圖像通過使用url()功能。

content: attr(data-something);

考慮到這個HTML元素：

<p類=“元素”數據的東西=“cssreference”>
  你好，世界
</ P>

而這個CSS：

.element：前{
  內容：ATTR（數據的東西）;
}

該元素將抓住從HTML文本內容屬性。

＃CSS光標

徘徊在元素時，設置鼠標光標。

cursor: default;

設置光標到元素的默認值。對于一個鏈接，這將是一個指針。對于文本這將是一個選擇光標。

cursor: auto;

汽車

cursor: pointer;

指針

cursor: move;

移動

cursor: crosshair;

十字線

cursor: text;

文本

cursor: wait;

等待

cursor: helpe-resize;

helpe調整大小

cursor: ne-resize;

NE-調整大小

cursor: nw-resize;

NW-調整大小

cursor: n-resize;

正調整大小

cursor: se-resize;

SE-調整大小

cursor: sw-resize;

SW-調整大小

cursor: s-resize;

S-調整大小

cursor: w-resize;

W-調整大小

＃CSS顯示

設置元素的顯示行為。

display: none;

該元素被完全除去，就好像它在第一位置的HTML代碼不是。

display: inline;

元素變成一個內聯元素：它的行為就像純文本。

任何height和width施加將沒有效果。

display: block;

元素變成一個塊元素：它開始在新的一行，并占據了整個寬度。

display: inline-block;

元素都共享一個屬性內聯和塊元素：

  • 內聯，因為該元素的行為類似于簡單的文字，并插入本身的文本塊
  • 塊，因為你可以申請height和width值

例如，這個元素有：

。元件{
  高度：3EM;
  寬度：60像素;
}

display: list-item;

元素就像一個列表項：<li>。唯一的區(qū)別塊是一個列表項具有符號點。

display: table;

元素就像一個表：<table>。

其內容和子元素表現得像表格單元格。

display: table-cell;

該元素的行為像一個表格單元格：<td>或<th>。

其內容和子元素表現得像表格單元格。

display: table-row;

元素就像一個表行：<tr>。

其內容和子元素表現得像表格單元格。

display: flex;

元素變成一個Flexbox的容器。就其本身而言，它就像一個塊元素。

其子元素會變成Flexbox的項目。

display: inline-flex;

元素都共享一個屬性內聯和Flexbox的元素：

  • 內聯，因為該元素的行為類似于簡單的文字，并插入本身的文本塊
  • Flexbox的，因為它的子元素將化為Flexbox的項目

例如，這個元素有：

。元件{
  高度：3EM;
  寬度：120像素;
}

＃CSS柔性基礎

定義Flexbox的項目的初始大小。

default flex-basis: auto;

元件將根據它的內容被自動調整大小，或任何height或width值，如果它們被定義。

flex-basis: 80px;

您可以定義像素或（R）EM值。該元素將包裝的內容，以避免任何溢出。

＃CSS柔性方向

定義Flexbox的項目是如何一個Flexbox的容器內訂購。

default flex-direction: row;

的Flexbox的項目被訂購的相同方式與文本方向，沿主軸線。

flex-direction: row-reverse;

的Flexbox的項目被訂購的相反方式與文本方向，沿主軸。

flex-direction: column;

的Flexbox的項目被訂購的相同方式與文本方向，沿橫軸。

flex-direction: column-reverse;

該項目Flexbox的是有序的相反的方式與文本方向，沿橫軸。

＃CSS柔性流動

為速記屬性flex-direction 和 flex-flow。

＃CSS柔性成長

定義Flexbox的項目應該有多少增長，如果有可用空間。

default flex-grow: 0;

元素會不會，如果有可用空間成長。它將只使用所需的空間。

flex-grow: 1;

該元素將增加由一個因素1。這將填補剩余的空間，如果沒有其他Flexbox的項目都有一個flex-grow值。

flex-grow: 2;

由于柔性成長值是相對的，其行為取決于Flexbox的項目的價值兄弟姐妹。

在本例中，剩余空間被分為3：

  • 1第三轉到綠色項目
  • 2三分之二的進入粉紅項目
  • 沒有去的黃色物品，誰保留其初始寬度

＃CSS彈性收縮

定義Flexbox的項目應該有多少縮水，如果有沒有足夠的可用空間。

default flex-shrink: 1;

如果有沒有足夠的可用空間中的容器的主軸線，所述元件將收縮通過的系數1，和將包裝的內容。

flex-shrink: 0;

該元素將不會縮水：將保留它需要的寬度，沒有包裝的內容。它的兄弟姐妹將萎縮給空間目標元素。

由于目標元素不會換它的內容，還有對Flexbox的容器的內容的機會溢出。

flex-shrink: 2;

由于柔性收縮值是相對的，其行為取決于Flexbox的項目的價值兄弟姐妹。

在本實施例中，綠色項目要填補的寬度的100％。它需要的空間是取自其兩個同胞，并在劃分4：

  • 3宿舍是取自紅項目
  • 1季度取自黃項目

＃CSS柔性包裝

如果Flexbox的項目出現在定義單行或多個行一Flexbox的容器內。

default flex-wrap: nowrap;

該Flexbox的項目將保持在一個單一的線，無論是什么，最終將溢出如果需要的話。

flex-wrap: wrap;

該Flexbox的項目會之間進行分配多條線路如果需要的話。

flex-wrap: wrap-reverse;

該Flexbox的項目會之間進行分配多條線路如果需要的話。任何額外的生產線將出現前的前一個。

＃CSS浮

推壓元件，以任一左或右側。下面的兄弟姐妹將環(huán)繞浮動元素

default float: none;

刪除以前定義的float值。該元件將保持在該頁面的自然流動。

float: left;

移動元件到左其容器的側面。以下內容將環(huán)繞它，填滿剩余右邊的空間。

float: right;

移動元件的右邊其容器的側面。以下元素將環(huán)繞它和填充其余左側的空間。

＃CSS FONT-FAMILY

font-family: "Source Sans Pro", "Arial", sans-serif;

當使用多個值，則font-family列表的字體系列定義優(yōu)先級在瀏覽器應選擇字體系列。

該瀏覽器會為每個家庭用戶的電腦，在任何@字體面的資源。

列表被優(yōu)先從左到右：將使用所述第一值，如果它是可用的，或去到下一個，直到到達列表的末端。該默認字體系列是由瀏覽器的喜好來定義。

在本實施例中，瀏覽器將嘗試使用Source Sans Pro，如果它是可用的。如果無法找到它，它會嘗試使用Arial。如果它都不可用，它會使用瀏覽器的sans-serif字體。

font-family: serif;

該瀏覽器將使用襯線字體家族：所有字符筆畫的結局。

font-family: sans-serif;

該瀏覽器將使用無襯線字體系列：無角色有中風的結局。

font-family: monospace;

該瀏覽器將使用等寬字體系列：所有字符相同的寬度。

font-family: cursive;

該瀏覽器將使用草書字體系列。

font-family: fantasy;

瀏覽器將使用一個幻想字體系列。

＃CSS字體大小

定義文本的大小。

default font-size: medium;

該文本將使用瀏覽器默認的中等大小。

font-size: 20px;

您可以使用像素值。

font-size: 1.2em;

您可以使用EM值。

該值是相對的父母的font-size。
這樣一來，該值將級聯如果在子元素中。

font-size: 1.2rem;

您可以使用REM值。

的值是相對于根元素的font-size，它是<html>元件。
其結果是，該值將不依賴于變化的深度在HTML層次結構中的元素，并且將reamin上下文無關。

font-size: 90%;

您可以使用百分比值。他們像em值。

該值是相對的父母的font-size。
這樣一來，該值將級聯如果在子元素中。

font-size: smaller;

您可以使用相對的關鍵字。該值是相對于親本。

下列是可用的：

  • larger
  • smaller

font-size: x-large;

您可以使用的絕對關鍵詞。該值是相對于根元素 <html>。

下列是可用的：

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

＃CSS字體風格

定義文本多少傾斜。

default font-style: normal;

該文本是不傾斜。

font-style: italic;

使用斜體字體的版本：字母略微傾斜。

font-style: oblique;

使用斜字體的版本：字母比斜體更多傾斜。

＃CSS字體變形

定義了字形用于每個字母。

default font-variant: normal;

每個字母使用其正常的字形。

font-variant: small-caps;

每個字母使用其小型大寫版本。

＃CSS字體重量

定義文本的重量。

default font-weight: normal;

該文本是正常體重。

font-weight: bold;

文本變得大膽。

font-weight: 600;

您可以使用數字值。它們都對應于特定的命名的重量：

  • 100薄
  • 200超輕型
  • 300光
  • 400正常
  • 500中
  • 600半粗體
  • 700粗體
  • 800額外大膽
  • 900超大膽

如果該字體族不提供所請求的重量，將使用最近的可用之一。

font-weight: lighter;

您可以使用相對關鍵字：lighter或bolder。瀏覽器將使用下一個可用的重量。

＃CSS字體

＃CSS高度

限定了元件的高度。

default height: auto;

元件將自動調整其高度，以允許正確地顯示其內容。

height: 100px;

您可以使用數值像的像素，（R）EM，百分比 ...

如果內容沒有在指定范圍內的高度契合，就會溢出。如何容器將處理這種溢出的內容是由定義overflow屬性。

＃CSS辯解內容

定義Flexbox的項目的方式，根據所述對準主軸線，一個Flexbox的容器內。

default justify-content: flex-start;

該項目Flexbox的朝向推啟動容器的主軸線。

justify-content: flex-end;

將Flexbox的項目對推動結束容器的主軸線。

justify-content: center;

該Flexbox的項目為中心沿著容器的主軸線。

justify-content: space-between;

剩余的空間分布之間的Flexbox的物品。

justify-content: space-around;

剩余的空間分布圍繞所述Flexbox的項：這增加了空間之前的第一項和之后的最后一個。

＃CSS左

定義根據其在所述元件的位置左邊緣。

default left: auto;

該元件將保持在其自然位置。

left: 80px;

如果該元素是在適當的位置相對，所述元件將移動向上通過由限定的量左側的值。

left: -20px;

如果該元素處于位置絕對的，元素本身會從位置左側的第一個定位的的始祖。

＃CSS字母間距

定義文本塊中的字符之間的間距。

default letter-spacing: normal;

字符之間的間隔是正常。

letter-spacing: 2px;

您可以使用像素值。

letter-spacing: 0.1em;

可以使用的EM的值：這允許間隔保持相對的字體大小。

＃CSS線高

限定單個文本行的高度。

default line-height: normal;

還原為默認瀏覽器的價值。

recommended line-height: 1.6;

您可以使用無單位值：行高將是相對的字體大小。

line-height: 30px;

您可以使用像素值。

line-height: 0.8em;

您可以使用EM值：像無單位值，該行高度將相對字體大小。

＃CSS列表樣式圖像

定義的圖像被用作列表項的項目符號。

default list-style-image: none;

列表項將使用所定義的子彈點list-style-type值，默認情況下是一個圓盤。

list-style-image: url(./images/list-style-image.png);

列表項將使用圖像位于指定URL作為他們的子彈點
的圖像不能調整大小。

＃CSS列表樣式位置

定義位置列表的要點的。

default list-style-position: outside;

子彈點將外列表項，因為如果不是列表項的一部分。

每個的開始行列表項將被垂直對齊。

list-style-position: inside;

子彈點將內部列表項。

因為它是該列表項的一部分，這將是文本的一部分，并在開始推文本。

＃CSS列表樣式類型

定義類型列表項的的圓點。

default list-style-type: disc;

列表項將使用光盤作為他們的子彈點。

list-style-type: circle;

列表項會用一個圓圈作為圓點。

list-style-type: square;

列表項將使用方作為項目符號。

list-style-type: decimal;

列表項將使用十進制作為他們的子彈點。

list-style-type: none;

該列表中的項目將有沒有小點。

＃CSS列表樣式

＃CSS保證金底

限定空間以外的元素，在底部一側。

default margin-bottom: 0;

刪除底部的任何保證金。

margin-bottom: 30px;

您可以使用像素值。

margin-bottom: 2em;

你可以使用（R）EM值。

值是相對于對字體大?。?/font>

  • EM：相對于元素的當前字體大小
  • REM：相對于<html>所述根元素的字體大小

margin-bottom: 10%;

可以使用百分比值。
百分比是基于寬度的的容器。

＃CSS保證金左

限定空間以外的元素，在左側。

default margin-left: 0;

刪除左側的任何保證金。

margin-left: 50px;

您可以使用像素值。

margin-left: 7em;

你可以使用（R）EM值。

值是相對于對字體大?。?/font>

  • EM：相對于元素的當前字體大小
  • REM：相對于<html>所述根元素的字體大小

margin-left: 30%;

可以使用百分比值。
百分比是基于寬度的的容器。

margin-left: auto;

該自動關鍵字將會給左側的比重剩余空間。

當結合margin-right: auto，它將為中心的元素，如果一個固定的寬度被定義。

＃CSS保證金權

限定空間以外的元素，在右側。

default margin-right: 0;

刪除右邊的任何保證金。

margin-right: 50px;

您可以使用像素值。

margin-right: 7em;

你可以使用（R）EM值。

值是相對于對字體大?。?/font>

  • EM：相對于元素的當前字體大小
  • REM：相對于<html>所述根元素的字體大小

margin-right: 30%;

可以使用百分比值。
百分比是基于寬度的的容器。

margin-right: auto;

該自動關鍵字將會給右側的每股剩余空間。

當結合margin-left: auto，它將為中心的元素，如果一個固定的寬度被定義。

＃CSS的margin-top

限定空間以外的元素，在頂側。

default margin-top: 0;

除去頂部的任何保證金。

margin-top: 30px;

您可以使用像素值。

margin-top: 2em;

你可以使用（R）EM值。

值是相對于對字體大?。?/font>

  • EM：相對于元素的當前字體大小
  • REM：相對于<html>所述根元素的字體大小

margin-top: 10%;

可以使用百分比值。
百分比是基于寬度的的容器。

＃CSS保證金

為速記屬性margin-top margin-right margin-bottom 和 margin-left。

default margin: 0;

刪除所有的利潤。

margin: 30px;

當使用1值，則將邊距設置為所有4個方面。

margin: 30px 60px;

當使用2的值：

  • 所述第一值是頂部/底部
  • 所述第二值是右/左

要記住為了想想你的值沒有定義。

如果輸入2的值（前/右），你忽略設置底部和左側。因為底部是頂部的垂直對應，它將使用頂部的值。而且因為左邊是右邊的水平對應，它將使用權的價值。

margin: 30px 60px 45px;

當使用3的值：

  • 所述第一值是頂
  • 所述第二值是右/左
  • 在第三個值是底部

要記住為了想想你的值沒有定義。

如果輸入3的值（上/右/下），你忽略設置離開。作為右的對手，它會用它的價值。

margin: 30px 60px 45px 85px;

當使用4的值：

  • 所述第一值是頂
  • 所述第二值是正確的
  • 在第三個值是底部
  • 的第四值是左

記住順序，開始在頂部和去順時針。

＃CSS最大高度

限定元件可以是最大高度。

default max-height: none;

該元素有沒有限制高度的條款。

max-height: 2000px;

您可以使用數值像的像素，（R）EM，百分比 ...

如果最大高度較大比元件的實際高度，最大高度有任何效果。

max-height: 100px;

如果內容沒有最大高度內適合，會溢出。如何容器將處理這種溢出的內容是由定義overflow屬性。

＃CSS最大寬度

限定元件可以是最大寬度。

default max-width: none;

該元素有沒有限制在寬度方面。

max-width: 2000px;

您可以使用數值像的像素，（R）EM，百分比 ...

如果該最大寬度是較大比元件的實際寬度，最大寬度有沒有影響。

max-width: 150px;

如果內容沒有最大寬度內適合時，會自動改變高度的元件，以適應對內容的包裝紙。

＃CSS最小高度

限定了元件的最小高度。

default min-height: 0;

該元素有沒有最低高度。

min-height: 200px;

您可以使用數值像的像素，（R）EM，百分比 ...

如果該最小高度是大的比元件的實際高度，最小高度將被應用。

min-height: 5px;

如果該最小高度是小的比元件的實際高度，最小高度具有任何效果。

＃CSS最小寬度

限定了元件的最小寬度。

default min-width: 0;

該元素沒有最小寬度。

min-width: 300px;

您可以使用數值像的像素，（R）EM，百分比 ...

如果該最小寬度較大比元件的實際寬度，最小寬度將被應用。

min-width: 5px;

如果該最小寬度小比元件的實際寬度，最小寬度有沒有影響。

＃CSS混合混合模式

定義了元素應該如何混合與背景。

default mix-blend-mode: normal;

元素并沒有融為一體。

mix-blend-mode: multiply;

該元素使用乘法混合模式。

mix-blend-mode: screen;

該元素使用屏幕混合模式。

mix-blend-mode: overlay;

該元素使用疊加混合模式。

mix-blend-mode: darken;

該元素使用變暗混合模式。

mix-blend-mode: lighten;

該元素使用減倉混合模式。

mix-blend-mode: color-dodge;

該元素使用顏色減淡混合模式。

mix-blend-mode: color-burn;

該元素使用的顏色燒傷混合模式。

mix-blend-mode: hard-light;

該元素使用硬輕混合模式。

mix-blend-mode: soft-light;

該元素使用軟光混合模式。

mix-blend-mode: difference;

該元素使用不同的混合模式。

mix-blend-mode: exclusion;

該元素使用排除混合模式。

mix-blend-mode: hue;

該元素使用色相混合模式。

mix-blend-mode: saturation;

該元素使用飽和度混合模式。

mix-blend-mode: color;

該元素使用的顏色混合模式。

mix-blend-mode: luminosity;

該元素使用亮度混合模式。

＃CSS透明度

定義元素如何不透明的。

default opacity: 1;

該元素是完全不透明。

opacity: 0;

該元素是完全透明的。

opacity: 0.3;

之間的任意值0（零）和1（一個）可以使元素半透明。

＃CSS秩序

定義Flexbox的項目的順序。

default order: 0;

所述Flexbox的項目的順序是在定義的HTML代碼。

order: 1;

順序是相對的Flexbox的項目的兄弟姐妹。當所有個體Flexbox的項目次序值都考慮到最后的順序定義。

order: -1;

您可以使用負的值。

order: 9;

您可以設置不同的每個Flexbox的項目值。

＃CSS輪廓色

定義該元素的輪廓的色彩。

default outline-color: transparent;

施加透明色的輪廓。輪廓仍然會占用空間的定義outline-width值。

outline-color: red;

您可以使用一個140+顏色名稱。

outline-color: #05ffb0;

您可以使用十六進制顏色代碼。

outline-color: rgb(50, 115, 220);

您可以使用RGB（）顏色代碼：

  • 的第一個值是用于 red
  • 第二值是用于 green
  • 第三值是對 blue

他們每個人都可以有之間的值0和255。

outline-color: rgba(50, 115, 220, 0.3);

您可以使用RGBA（）色碼：

  • 前3個值是 rgb
  • 第四值是alpha信道，并且定義的顏色的不透明度

阿爾法值可以從零0（透明）一1（不透明）。

outline-color: hsl(14, 100%, 53%);

您可以使用HSL（）色碼：

  • 的第一個值是hue可以去從0到359
  • 所述第二值是saturation與去從0％至100％
  • 第三值是對luminosity去從0％至100％

outline-color: hsla(14, 100%, 53%, 0.6);

您可以使用HSL（）一個顏色代碼：

  • 前3個值是 hsl
  • 第四值是alpha信道，并且定義的顏色的不透明度

阿爾法值可以從零0（透明）一1（不透明）。

＃CSS提綱式

定義元素的輪廓風格。

default outline-style: none;

移除元素的輪廓。

outline-style: dotted;

接通輪廓成的點的序列。

outline-style: dashed;

打開大綱分為劃線的序列。

outline-style: solid;

轉動輪廓成實線。

outline-style: double;

拆分大綱為兩行。

outline-style: groove;

設置一個插圖風格的輪廓。

＃CSS輪廓寬度

定義該元素的輪廓的寬度。

default outline-width: medium;

定義所有輪廓到的寬度中等。

outline-width: 1px;

定義了所有的寬度概述了1像素。

＃CSS大綱

為速記屬性outline-width outline-style 和 outline-color。

outline: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

outline: 2px solid;

只有顏色是可選。如果你忽略它，應用顏色將是顏色的文本。

＃CSS溢出包裝

定義是否達到行的末尾時的話應該打破。

default overflow-wrap: normal;

有沒有空間的話會不會打破。不間斷的字符序列將在一行中顯示。

overflow-wrap: break-word;

以無間隙的話會打破，因為它們到達行末，盡快。

＃CSS溢出-X

定義如何在橫軸上溢出的內容顯示出來。

default overflow-x: visible;

四溢的內容是可見的，而元素本身停留在指定的寬度。

overflow-x: hidden;

溢出的內容是隱藏的，并且不能被訪問。

overflow-x: scroll;

四溢的內容可訪問多虧了水平滾動條。

overflow-x: auto;

瀏覽器決定是否顯示水平滾動條或沒有。

＃CSS溢出-Y

定義如何在垂直軸上溢出的內容顯示出來。

default overflow-y: visible;

溢出的內容是可見的，而元件本身保持在規(guī)定的高度。

overflow-y: hidden;

溢出的內容是隱藏的，并且不能被訪問。

overflow-y: scroll;

四溢的內容可訪問多虧了垂直滾動條。

overflow-y: auto;

瀏覽器決定是否顯示垂直滾動條或沒有。

＃CSS溢出

定義如何在水平和垂直軸溢出的內容顯示出來。

default overflow: visible;

溢出的內容是可見的，而元件本身保持在規(guī)定的高度。

overflow: hidden;

溢出的內容是隱藏的，并且不能被訪問。

overflow: scroll;

四溢的內容可訪問多虧了垂直滾動條。

overflow: auto;

瀏覽器決定是否顯示垂直滾動條或沒有。

＃CSS填充底

限定空間內的元件，在底側。

default padding-bottom: 0;

刪除底部任何填充。

padding-bottom: 50px;

您可以使用像素值。

padding-bottom: 7em;

你可以使用（R）EM值。

值是相對于對字體大?。?/font>

  • EM：相對于元素的當前字體大小
  • REM：相對于<html>所述根元素的字體大小

padding-bottom: 30%;

可以使用百分比值。
百分比是基于寬度的的元件。

＃CSS填充左

限定空間內的元件，在左側邊。

default padding-left: 0;

刪除左側的任何填充。

padding-left: 50px;

您可以使用像素值。

padding-left: 7em;

你可以使用（R）EM值。

值是相對于對字體大?。?/font>

  • EM：相對于元素的當前字體大小
  • REM：相對于<html>所述根元素的字體大小

padding-left: 30%;

可以使用百分比值。
百分比是基于寬度的的元件。

＃CSS填充右

限定空間內的元件，在右側。

default padding-right: 0;

刪除右邊任何填充。

padding-right: 50px;

您可以使用像素值。

padding-right: 7em;

你可以使用（R）EM值。

值是相對于對字體大?。?/font>

  • EM：相對于元素的當前字體大小
  • REM：相對于<html>所述根元素的字體大小

padding-right: 30%;

可以使用百分比值。
百分比是基于寬度的的元件。

＃CSS填充頂

限定空間內的元件，在頂側。

default padding-top: 0;

刪除頂部任何填充。

padding-top: 50px;

您可以使用像素值。

padding-top: 7em;

你可以使用（R）EM值。

值是相對于對字體大?。?/font>

  • EM：相對于元素的當前字體大小
  • REM：相對于<html>所述根元素的字體大小

padding-top: 30%;

可以使用百分比值。
百分比是基于寬度的的元件。

＃CSS填充

default padding: 0;

刪除所有墊。

padding: 30px;

當使用1值，填充設置為所有4個方面。

padding: 30px 60px;

當使用2的值：

  • 所述第一值是頂部/底部
  • 所述第二值是右/左

要記住為了想想你的值沒有定義。

如果輸入2的值（前/右），你忽略設置底部和左側。因為底部是頂部的垂直對應，它將使用頂部的值。而且因為左邊是右邊的水平對應，它將使用權的價值。

padding: 30px 60px 45px;

當使用3的值：

  • 所述第一值是頂
  • 所述第二值是右/左
  • 在第三個值是底部

要記住為了想想你的值沒有定義。

如果輸入3的值（上/右/下），你忽略設置離開。作為右的對手，它會用它的價值。

padding: 30px 60px 45px 85px;

當使用4的值：

  • 所述第一值是頂
  • 所述第二值是正確的
  • 在第三個值是底部
  • 的第四值是左

記住順序，開始在頂部和去順時針。

＃CSS指針事件

如果定義元素反應指針事件與否。

default pointer-events: auto;

元素發(fā)生反應的指針事件，如:hover或click。

pointer-events: none;

元素并沒有反應指針事件，如:hover或click。其結果是，那些元件的背后是可訪問的。

＃CSS位置

限定了元件的位置的行為。

default position: static;

該元件將保持在自然流動的網頁。

其結果是，它將不充當錨點的絕對定位的黃色塊。

此外，它會不反應以下列性質：

  • top
  • bottom
  • left
  • right
  • z-index

position: relative;

該元件將保持在自然流動的網頁。

這也使得該元素的位置：它會作為一個錨點的絕對定位的黃色阻止作用。

此外，它會發(fā)生反應，以下列屬性：

  • top
  • bottom
  • left
  • right
  • z-index

position: absolute;

的元件將不留在網頁的自然流動。它會根據自身定位最接近的定位的祖先。

因為它的位置，這將作為一個錨點絕對定位黃色塊。

此外，它會發(fā)生反應，以下列屬性：

  • top
  • bottom
  • left
  • right
  • z-index

position: fixed;

的元件將不留在網頁的自然流動。它會根據自身定位視。

因為它的位置，這將作為一個錨點絕對定位黃色塊。

此外，它會發(fā)生反應，以下列屬性：

  • top
  • bottom
  • left
  • right
  • z-index

＃CSS調整大小

如果定義textarea的是可調整大小與否。

default resize: none;

textarea的是不調整大小。

resize: horizontal;

textarea的是可調整大小的水平。

resize: vertical;

textarea的是大小可調整垂直。

resize: both;

textarea的是可調整大小的兩個水平和垂直方向。

＃CSS文本對齊

如何定義元素的文本內容是水平排列。

text-align: left;

文本內容對齊的左側。

text-align: right;

文本內容被對準到右邊。

text-align: center;

文本內容居中。

text-align: justify;

文字內容是有道理的。

＃CSS文本修飾

如何定義元素的文本內容的裝飾。

default text-decoration: none;

刪除任何文本修飾。

text-decoration: underline;

強調文本內容。

＃CSS文本縮進

default text-indent: 0;

該文本是不縮進。

text-indent: 40px;

您可以使用數值像的像素，（R）EM，百分比 ...

注意怎么只有第一行縮進。

text-indent: -2em;

您也可以使用負的值。

＃CSS文本溢出

定義隱藏的文本內容，如果它溢出的行為。

default text-overflow: clip;

文字內容是裁剪和不可訪問。

text-overflow: ellipsis;

該溢出的內容被替換用省略號：…

＃CSS文字陰影

定義文本內容的影子。

default text-shadow: none;

之后文本內容已沒有陰影。

text-shadow: 2px 6px;

你至少需要兩個值：

  • 第一種是在水平方向偏移
  • 第二個是垂直偏移

陰影顏色將從文本顏色繼承。

text-shadow: 2px 6px red;

您可以定義一個顏色作為最后的值。

正如color，你可以使用顏色名稱，十六進制，RGB，HSL ...

text-shadow: 2px 4px 10px red;

可選的第三個值定義模糊的影子。

顏色會跨越10px的在這個例子中被擴散，從不透明到透明的。

＃CSS文本轉換

定義文本內容應該如何改變。

default text-transform: none;

刪除任何文本轉換：文本將出現在相同的HTML代碼。

text-transform: capitalize;

打開的第一個字母每個字變成了大寫字母。

text-transform: uppercase;

打開所有的字母為大寫字母。

text-transform: lowercase;

打開所有的字母為小寫字母。

＃CSS頂部

定義根據其上邊緣的元件的位置。

default top: auto;

該元件將保持在其自然位置。

top: 20px;

如果該元素是在適當的位置相對，所述元件將移動向上通過由限定的量最高值。

top: 0;

如果該元素處于位置絕對的，元素本身會從位置上方的首先定位的祖先。

＃CSS變換原點

定義由定義的轉換原點transform屬性。

default transform-origin: 50% 50% 0;

變換原點在中心的元素。

transform-origin: 20px 70%;

您可以使用2個值：

  • 的第一個值是水平軸
  • 第二個是垂直軸

transform-origin: top right;

您可以使用組合位置的關鍵字：center，top，bottom，left和right。

transform-origin: center bottom;

當使用關鍵字，您可以更改訂單軸的，只要每個關鍵字是明確的。

＃CSS變換

定義元素如何轉換。

default transform: none;

刪除任何改造。

transform: translateX(40px);

移動的元素水平軸。

transform: translateY(20px);

移動的元素垂直軸。

transform: translateY(100%);

可以使用百分比值：百分比是相對于元件本身，而不是父。

transform: translate(20px, -10%);

您可以translate()有兩個值：

  • 的第一個值是在水平軸
  • 所述第二值是垂直軸

transform: scaleX(1.5);

規(guī)模上的元素水平軸。

transform: scaleY(0.4);

縮放的元素垂直軸。

transform: scaleY(-2);

你可以用消極的價值觀：它會反轉的元素。

transform: scale(0.8, 0.8);

您可以scale()有兩個值：

  • 的第一個值是在水平軸
  • 所述第二值是垂直軸

通過使用兩個相同的值，則可以按比例縮放。

transform: rotate(45deg);

旋轉元件。

您可以使用：

  • 度從0到360deg
  • gradians從0到400grad
  • 弧度從0到2πrad
  • 原來從0到1turn

transform: skewX(15deg);

歪斜上的元件的水平軸。

transform: skewY(45deg);

歪斜的元素垂直軸。

transform: skew(10deg, -20deg);

您可以skew()有兩個值：

  • 的第一個值是在水平軸
  • 所述第二值是垂直軸

transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);

您可以將多個中間用空格分隔的轉換。

＃CSS過渡延遲

定義轉換有多久前等待的時間開始。

default transition-delay: 0s;

過渡將等待零點幾秒，因此馬上開始。

transition-delay: 1.2s;

您可以使用十進制值中秒的關鍵字s。

transition-delay: 2400ms;

您可以使用毫秒代替秒，關鍵字ms。

transition-delay: -500ms;

您可以使用負值：轉型開始就好像它已經被打了500ms。

＃CSS過渡期限

定義過渡持續(xù)多久。

default transition-duration: 0s;

過渡會持續(xù)零秒，因此是瞬間。

transition-duration: 1.2s;

您可以使用十進制值中秒的關鍵字s。

transition-duration: 2400ms;

您可以使用毫秒代替秒，關鍵字ms。

＃CSS轉換屬性

定義哪些屬性將過渡。

default transition-property: all;

該元素將轉型的所有屬性：

transition-property: none;

該元素將轉型沒有財產：過渡從而瞬間。

transition-property: background;

該元素將只TRANSTION的背景屬性。

transition-property: color;

該元素將只TRANSTION的顏色屬性。

transition-property: transform;

該元素將只TRANSTION的變換屬性。

＃CSS轉換定時功能的

如何定義之間的值開始和結束計算的過渡。

default transition-timing-function: ease;

過渡慢慢開始，中間的加速，并在結束減慢。

transition-timing-function: ease-in;

過渡開始慢慢地，逐漸加速，直到結束。

transition-timing-function: ease-out;

過渡很快開始，并逐漸減速，直到結束。

transition-timing-function: ease-in-out;

像ease，但更明顯。

過渡很快開始，并逐漸減速，直到結束。

transition-timing-function: linear;

過渡有一個*恒定的速度。

transition-timing-function: step-start;

過渡跳躍瞬間的最終狀態(tài)。

transition-timing-function: step-end;

過渡停留在初始狀態(tài)，直到最后，當它立即跳轉到最終狀態(tài)。

transition-timing-function: steps(4, end);

通過使用steps()帶有整數，你可以定義一個特定的數字達到年底前的步驟。元素的狀態(tài)會不會逐漸變化的，而是跳躍的州在不同的時刻。

＃CSS轉換

為速記屬性transition-property transition-duration transition-timing-function 和 transition-delay。

僅transition-duration被需要。

transition: 1s;

  • transition-duration被設置到1s
  • transition-property 默認為all
  • transition-timing-function 默認為ease
  • transition-delay 默認為0s

transition: 1s linear;

  • transition-duration被設置到1s
  • transition-property 默認為all
  • transition-timing-function被設置到linear
  • transition-delay 默認為0s

transition: background 1s linear;

  • transition-duration被設置到1s
  • transition-property被設置到background
  • transition-timing-function被設置到linear
  • transition-delay 默認為0s

transition: background 1s linear 500ms;

  • transition-duration被設置到1s
  • transition-property被設置到background
  • transition-timing-function被設置到linear
  • transition-delay被設置到500ms

transition: background 4s, transform 1s;

您可以將多個屬性用自己的過渡時間。

＃CSS空白

定義元素的空白將被如何處理。

default white-space: normal;

的空間序列被合并成一個。
換行被忽略。
文本內容被包裹。

white-space: nowrap;

的空間序列被合并成一個。
換行被忽略。
文字內容是沒有包裝的，并保持在一個單行。

white-space: pre;

白色空間究竟保留。

  • 的空間序列被保留
  • 行只對新的生產線，并突破 <br>

white-space: pre-wrap;

白色空間大多保存完好。

  • 的空間序列被保留
  • 線打破新的生產線，<br>但也達到了元素的結尾時，

white-space: pre-line;

只有新的生產線將被保留。

  • 的空間序列組合成一個
  • 線打破新的生產線，<br>但也達到了元素的結尾時，

＃CSS寬

限定了元件的寬度。

default width: auto;

元件將自動地調整其寬度，以允許正確地顯示其內容。

width: 240px;

您可以使用數值像的像素，（R）EM，百分比 ...

width: 50%;

如果使用的百分比，其值是相對于容器的寬度。

＃CSS將變

定義哪些屬性預期在未來改變（無論是通過CSS或JavaScript）。

default will-change: auto;

不告訴瀏覽器優(yōu)化的任何財產。

will-change: scroll-position;

告訴瀏覽器優(yōu)化元素的滾動位置，因為它可能會在未來改變。

will-change: contents;

告訴瀏覽器優(yōu)化元素的內容，因為它可能會在未來改變。

will-change: box-shadow;

您可以指定任何其他的CSS 屬性。例如，這告訴瀏覽器優(yōu)化元素的箱陰影，因為它可能會在未來改變。

＃CSS字斷

定義達到行的末尾時的話應該怎么休息。

default word-break: normal;

有沒有空間的話會不會打破。不間斷的字符序列將在一行中顯示。

word-break: break-all;

以無間隙的話會打破，因為它們到達行末，盡快。

＃CSS字間距

定義文本塊的字之間的間隔。

default word-spacing: normal;

字符之間的間隔是正常。

word-spacing: 5px;

您可以使用像素值。

word-spacing: 2em;

可以使用的EM的值：這允許間隔保持相對的字體大小。

＃CSS z索引

定義了順序的元素的z軸* 8。它僅適用于定位的**元（什么距static）。

default z-index: auto;

順序是由順序定義HTML代碼：

  • 首先在代碼=后面
  • 最后在代碼=前

z-index: 1;

的z索引值是相對于其他的。目標元素是運動前的兄弟姐妹。

z-index: -1;

您可以使用負值。目標元素是移動在后面的兄弟姐妹。