CSS參考

一個(gè)免費(fèi)的視覺引導(dǎo)CSS

通過實(shí)例學(xué)習(xí)：cssreference是一個(gè)免費(fèi)的視覺引導(dǎo)CSS。它采用了最流行的性質(zhì)，并說明和動(dòng)畫舉例說明他們。

GitHub

default align-content: stretch;

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

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

align-content: flex-start;

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

align-content: flex-end;

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

align-content: center;

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

align-content: space-between;

每行只能填補(bǔ)它的空間需要。在剩余的空間就會(huì)出現(xiàn)之間的線路。

align-content: space-around;

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

＃CSS對(duì)齊項(xiàng)

定義Flexbox的項(xiàng)目的方式，根據(jù)所述對(duì)準(zhǔn)十字軸，線Flexbox的容器內(nèi)。

align-items: flex-start;

該Flexbox的項(xiàng)目，于對(duì)準(zhǔn)開始的的十字軸。

缺省情況下，橫軸是垂直的。這意味著Flexbox的項(xiàng)目將被對(duì)準(zhǔn)垂直于頂部。

align-items: flex-end;

該Flexbox的項(xiàng)目，于對(duì)齊結(jié)束的的十字軸。

缺省情況下，橫軸是垂直的。這意味著Flexbox的項(xiàng)目將被對(duì)準(zhǔn)垂直于_bottom。

align-items: center;

將Flexbox的項(xiàng)目，于對(duì)準(zhǔn)中心的的十字軸。

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

align-items: baseline;

該Flexbox的項(xiàng)目，于對(duì)齊基線的的十字軸。

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

align-items: stretch;

該Flexbox的項(xiàng)目將在整個(gè)伸展十字軸。

缺省情況下，橫軸是垂直。這意味著Flexbox的項(xiàng)目將填補(bǔ)了整個(gè)垂直空間。

＃CSS對(duì)齊自

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

align-self: flex-start;

如果容器具有align-items: center與靶有align-items: flex-start，只有目標(biāo)將在交叉軸的起點(diǎn)。

默認(rèn)情況下，這意味著將對(duì)準(zhǔn)垂直于頂部。

align-self: flex-end;

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

默認(rèn)情況下，這意味著將對(duì)準(zhǔn)垂直于底部。

align-self: center;

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

默認(rèn)情況下，這意味著它會(huì)被垂直居中。

align-self: baseline;

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

默認(rèn)情況下，這意味著它將沿著文字的basline對(duì)齊。

align-self: stretch;

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

＃CSS動(dòng)漫延遲

定義動(dòng)畫有多久前等待的時(shí)間開始。動(dòng)畫只能在其被推遲的第一迭代。

default animation-delay: 0s;

動(dòng)畫將等待零點(diǎn)幾秒，因此馬上開始。

animation-delay: 1.2s;

您可以使用十進(jìn)制值中秒的關(guān)鍵字s。

animation-delay: 2400ms;

您可以使用毫秒代替秒，關(guān)鍵字ms。

animation-delay: -500ms;

您可以使用負(fù)值：動(dòng)畫將開始就好像它已經(jīng)被打了500ms。

＃CSS動(dòng)畫方向

定義在哪個(gè)方向動(dòng)畫播放。

default animation-direction: normal;

動(dòng)畫播放向前。當(dāng)它到達(dá)末端，則在第一個(gè)關(guān)鍵幀開始。

animation-direction: reverse;

在播放動(dòng)畫時(shí)向后：開始在最后一個(gè)關(guān)鍵幀，在第一個(gè)關(guān)鍵幀結(jié)束。

animation-direction: alternate;

動(dòng)畫播放向前，再向下：

  • 開始于第一個(gè)關(guān)鍵幀
  • 停在最后一個(gè)關(guān)鍵幀
  • 再次啟動(dòng)，但在最后的關(guān)鍵幀
  • 停在第一個(gè)關(guān)鍵幀

animation-direction: alternate-reverse;

動(dòng)畫播放向后，再向前：

  • 開始于最后一個(gè)關(guān)鍵幀
  • 停在第一個(gè)關(guān)鍵幀
  • 再次啟動(dòng)，但在第一個(gè)關(guān)鍵幀
  • 停在最后一個(gè)關(guān)鍵幀

＃CSS動(dòng)畫持續(xù)時(shí)間

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

default animation-duration: 0s;

默認(rèn)值是零秒：動(dòng)畫根本不會(huì)玩。

animation-duration: 1.2s;

您可以使用十進(jìn)制值中秒的關(guān)鍵字s。

animation-duration: 2400ms;

您可以使用毫秒代替秒，關(guān)鍵字ms。

＃CSS動(dòng)畫填充模

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

default animation-fill-mode: none;

該動(dòng)畫的風(fēng)格并不影響默認(rèn)的風(fēng)格：動(dòng)畫開始之前，以及動(dòng)畫結(jié)束后返回到默認(rèn)狀態(tài)的元素設(shè)置為默認(rèn)狀態(tài)。

animation-fill-mode: forwards;

在動(dòng)畫結(jié)束時(shí)應(yīng)用的最后一個(gè)樣式保留之后。

animation-fill-mode: backwards;

動(dòng)畫的風(fēng)格就已經(jīng)被應(yīng)用之前實(shí)際開始動(dòng)畫。

animation-fill-mode: both;

該樣式應(yīng)用于之前和之后播放動(dòng)畫。

＃CSS動(dòng)畫迭代計(jì)數(shù)

定義了動(dòng)畫多少次播放。

default animation-iteration-count: 1;

動(dòng)畫將只播放一次。

animation-iteration-count: 2;

可以使用整數(shù)值來定義一個(gè)特定的次數(shù)的動(dòng)畫將播放量。

animation-iteration-count: infinite;

通過使用關(guān)鍵字infinite，動(dòng)畫將無(wú)限期播放。

＃CSS動(dòng)畫名

定義其使用動(dòng)畫關(guān)鍵幀。

default animation-name: none;

如果沒有指定動(dòng)畫的名稱，沒有動(dòng)畫播放。

animation-name: fadeIn;

如果指定了名，關(guān)鍵幀匹配該名稱將被使用。

例如，fadeIn動(dòng)畫看起來像這樣：

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

animation-name: moveRight;

又如：moveRight動(dòng)畫：

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

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

如果定義動(dòng)畫播放與否。

default animation-play-state: running;

如果animation-duration與animation-name定義，動(dòng)畫將自動(dòng)開始播放。

animation-play-state: paused;

動(dòng)畫設(shè)定停在了第一個(gè)關(guān)鍵幀。

這比具有或者沒有不同animation-duration或animation-name在所有。如果動(dòng)畫暫停，應(yīng)用該樣式是，的第一個(gè)關(guān)鍵幀，而不是默認(rèn)的樣式。

在這個(gè)例子中，平方是通過默認(rèn)可見，但上的第一個(gè)關(guān)鍵幀fadeAndMove時(shí)，opacity被設(shè)定為0。暫停時(shí)，動(dòng)畫將在這一個(gè)關(guān)鍵幀“卡殼”，因此將是無(wú)形的。

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

＃CSS動(dòng)畫定時(shí)功能

如何定義之間的值開始和結(jié)束的計(jì)算的動(dòng)畫。

default animation-timing-function: ease;

動(dòng)畫開始緩慢，在中間的加速，并在結(jié)束減慢。

animation-timing-function: ease-in;

動(dòng)畫開始慢慢地，逐漸加速，直到結(jié)束。

animation-timing-function: ease-out;

動(dòng)畫很快開始，并逐漸減速，直到結(jié)束。

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

像ease，但更明顯。

動(dòng)畫很快開始，并逐漸減速，直到結(jié)束。

animation-timing-function: linear;

動(dòng)畫有一個(gè)*恒定的速度。

animation-timing-function: step-start;

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

animation-timing-function: step-end;

動(dòng)畫停留在初始狀態(tài)，直到最后，當(dāng)它立即跳轉(zhuǎn)到最終狀態(tài)。

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

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

＃CSS動(dòng)畫

＃CSS背景附件

定義如何滾動(dòng)頁(yè)面時(shí)背景圖像的行為。

default background-attachment: scroll;

背景圖像會(huì)隨著頁(yè)面滾動(dòng)。它也將定位并根據(jù)它施加到元件調(diào)整本身。

background-attachment: fixed;

背景圖像將不與頁(yè)滾動(dòng)，并且根據(jù)視口保持定位。它也將定位并根據(jù)視口調(diào)整本身。其結(jié)果是，背景圖像將可能僅部分可見。

＃CSS背景素材

定義多遠(yuǎn)背景應(yīng)該延長(zhǎng)的元素中。

default background-clip: border-box;

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

background-clip: padding-box;

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

background-clip: content-box;

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

＃CSS背景色

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

default background-color: transparent;

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

background-color: red;

您可以使用一個(gè)140+顏色名稱。

background-color: #05ffb0;

您可以使用十六進(jìn)制顏色代碼。

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

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

  • 的第一個(gè)值是用于 red
  • 第二值是用于 green
  • 第三值是對(duì) blue

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

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

您可以使用RGBA（）色碼：

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

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

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

您可以使用HSL（）色碼：

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

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

您可以使用HSL（）一個(gè)顏色代碼：

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

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

＃CSS背景圖片

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

default background-image: none;

刪除任何背景圖像。

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

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

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

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

您需要定義至少兩種顏色。第一個(gè)將在頂部，底部的第二個(gè)啟動(dòng)。

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

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

您可以指定一個(gè)角度，無(wú)論是在程度，或者用關(guān)鍵字。

當(dāng)使用輩分，您指定的方向漸變，或當(dāng)它結(jié)束。所以0deg指的頂級(jí)元素，如12:00的時(shí)鐘。

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

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

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

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

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

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

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

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

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

您可以指定在那里的坡度應(yīng)終止：

  • 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背景出身

定義了背景圖像的原點(diǎn)。

default background-origin: padding-box;

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

background-origin: border-box;

背景圖像開始下邊界。

background-origin: content-box;

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

＃CSS背景位置

定義了背景圖像的位置。

default background-position: 0% 0%;

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

background-position: bottom right;

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

background-position: center center;

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

＃CSS背景重復(fù)

定義背景圖片如何重演整個(gè)元素的背景，從后臺(tái)位置開始。

default background-repeat: repeat;

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

background-repeat: repeat-x;

背景圖像只會(huì)重演水平。

background-repeat: repeat-y;

背景圖像只會(huì)重演垂直。

background-repeat: no-repeat;

背景圖像將只出現(xiàn)一次。

＃CSS背景大小

定義了背景圖像的大小。

default background-size: auto auto;

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

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

background-size: 120px 80px;

您可以指定一個(gè)尺寸像素：

  • 的第一個(gè)值是水平尺寸
  • 第二個(gè)是垂直尺寸

background-size: 100% 50%;

您可以使用百分比值，以及。小心，這可能改變長(zhǎng)寬比的背景圖像，并導(dǎo)致意想不到的結(jié)果。

background-size: contain;

關(guān)鍵字contain將調(diào)整的背景圖像，以確保它仍然是完全可見。

background-size: cover;

關(guān)鍵字cover將調(diào)整的背景圖像，以確保該元件被完全覆蓋。

＃CSS背景

＃CSS下邊框顏色

像border-color，但對(duì)于底部邊框而已。

border-bottom-color: transparent;

應(yīng)用一個(gè)透明色的底邊框。底邊框仍然會(huì)占用空間的定義border-width值。

border-bottom-color: red;

您可以使用一個(gè)140+顏色名稱。

border-bottom-color: #05ffb0;

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

＃CSS邊框左下角半徑

定義半徑的左下角。

default border-bottom-left-radius: 0;

刪除任何邊界半徑。

border-bottom-left-radius: 20px;

您可以使用像素值。

border-bottom-left-radius: 50%;

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

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

如果設(shè)置兩個(gè)值，第一個(gè)是對(duì)底部邊框，第二個(gè)用于左邊框。

＃CSS邊框右下角半徑

定義半徑右下角的。

default border-bottom-right-radius: 0;

刪除任何邊界半徑。

border-bottom-right-radius: 20px;

您可以使用像素值。

border-bottom-right-radius: 50%;

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

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

如果設(shè)置兩個(gè)值，第一個(gè)是對(duì)底部邊框，第二個(gè)為正確的邊界。

＃CSS下邊框風(fēng)格

像border-style，但對(duì)于底部邊框而已。

default border-bottom-style: none;

刪除底部邊框。

border-bottom-style: dotted;

打開底部邊界進(jìn)入點(diǎn)的序列。

border-bottom-style: dashed;

打開底邊框?yàn)樘摼€序列。

border-bottom-style: solid;

打開底邊框?yàn)閷?shí)線。

border-bottom-style: double;

拆分底邊框?yàn)閮尚小?/font>

border-bottom-style: groove;

設(shè)置一個(gè)插圖風(fēng)格的底部邊框。

＃CSS下邊框?qū)挾?/font>

像border-width，但對(duì)于底部邊框而已。

default border-bottom-width: 0;

刪除底部邊框。

border-bottom-width: 4px;

您可以使用像素值。

＃CSS邊框底部

border-bottom: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border-bottom: 2px solid;

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

＃CSS邊界崩潰

定義是否表格邊框應(yīng)該分開或折疊。

default border-collapse: separate;

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

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

border-collapse: collapse;

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

出現(xiàn)的細(xì)胞首先在代碼將“贏”：它的邊界會(huì)掩蓋那些下面的單元格。

＃CSS邊框顏色

定義元素的邊框的顏色。

default border-color: transparent;

應(yīng)用一個(gè)透明色邊框。邊框仍然會(huì)占用空間的定義border-width值。

border-color: red;

您可以使用一個(gè)140+顏色名稱。

border-color: #05ffb0;

您可以使用十六進(jìn)制顏色代碼。

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

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

  • 的第一個(gè)值是用于 red
  • 第二值是用于 green
  • 第三值是對(duì) blue

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

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

您可以使用RGBA（）色碼：

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

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

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

您可以使用HSL（）色碼：

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

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

您可以使用HSL（）一個(gè)顏色代碼：

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

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

＃CSS左邊框的顏色

像border-color，但對(duì)于左邊框僅。

border-left-color: transparent;

施加透明顏色的左邊界。左邊框?qū)⑷哉加?/font>空間的定義border-width值。

border-left-color: red;

您可以使用一個(gè)140+顏色名稱。

border-left-color: #05ffb0;

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

＃CSS左邊框風(fēng)格

像border-style，但對(duì)于左邊框僅。

default border-left-style: none;

移除左邊框。

border-left-style: dotted;

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

border-left-style: dashed;

打開左邊框?yàn)樘摼€序列。

border-left-style: solid;

變?yōu)樽筮吔绯蓪?shí)線。

border-left-style: double;

拆分左邊框?yàn)閮尚小?/font>

border-left-style: groove;

設(shè)置一個(gè)插圖風(fēng)格左邊框。

＃CSS左邊框?qū)挾?/font>

像border-width，但對(duì)于左邊框僅。

default border-left-width: 0;

移除左邊框。

border-left-width: 4px;

您可以使用像素值。

＃CSS左邊框

border-left: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border-left: 2px solid;

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

＃CSS邊界半徑

定義半徑元素的角落。

default border-radius: 0;

刪除任何邊界半徑。

border-radius: 20px;

您可以使用像素值。

border-radius: 50%;

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

border-radius: 20px 50%;

如果設(shè)置兩個(gè)值，第一個(gè)是對(duì)于頂部和底部邊界，第二個(gè)為所述左和右邊緣。

＃CSS右邊框的顏色

像border-color，但是對(duì)于右邊界只。

border-right-color: transparent;

應(yīng)用一個(gè)透明的顏色右邊框。右邊框仍然會(huì)占用空間的定義border-width值。

border-right-color: red;

您可以使用一個(gè)140+顏色名稱。

border-right-color: #05ffb0;

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

＃CSS右邊框風(fēng)格

像border-style，但是對(duì)于右邊界只。

default border-right-style: none;

刪除右邊框。

border-right-style: dotted;

變?yōu)橛覀?cè)邊界進(jìn)入點(diǎn)的序列。

border-right-style: dashed;

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

border-right-style: solid;

變?yōu)橛疫吔绯蓪?shí)線。

border-right-style: double;

拆分右邊框?yàn)閮尚小?/font>

border-right-style: groove;

設(shè)置一個(gè)插圖風(fēng)格的右邊框。

＃CSS右邊框的寬度

像border-width，但是對(duì)于右邊界只。

default border-right-width: 0;

刪除右邊框。

border-right-width: 4px;

您可以使用像素值。

＃CSS右邊框

border-right: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border-right: 2px solid;

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

＃CSS邊框樣式

定義元素邊框的風(fēng)格。

default border-style: none;

移除元素的邊界。

border-style: dotted;

變成邊界進(jìn)入點(diǎn)的序列。

border-style: dashed;

打開邊界進(jìn)入短線的序列。

border-style: solid;

打開邊界進(jìn)入實(shí)線。

border-style: double;

拆分邊界進(jìn)入兩行。

border-style: groove;

設(shè)置一個(gè)插圖風(fēng)格的邊界。

＃CSS邊框頂部的顏色

像border-color，但對(duì)于頂部邊框而已。

border-top-color: transparent;

應(yīng)用一個(gè)透明的顏色上邊框。上邊框仍將占用空間的定義border-width值。

border-top-color: red;

您可以使用一個(gè)140+顏色名稱。

border-top-color: #05ffb0;

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

＃CSS邊框左上角的半徑

定義半徑左上角的。

default border-top-left-radius: 0;

刪除任何邊界半徑。

border-top-left-radius: 20px;

您可以使用像素值。

border-top-left-radius: 50%;

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

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

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

＃CSS邊框右上角半徑

定義半徑右上角的。

default border-top-right-radius: 0;

刪除任何邊界半徑。

border-top-right-radius: 20px;

您可以使用像素值。

border-top-right-radius: 50%;

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

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

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

＃CSS邊框頂式

像border-style，但對(duì)于頂部邊框而已。

default border-top-style: none;

刪除頂部邊框。

border-top-style: dotted;

接通頂部邊界進(jìn)入點(diǎn)的序列。

border-top-style: dashed;

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

border-top-style: solid;

打開頂部邊框變成了實(shí)線。

border-top-style: double;

拆分上邊框?yàn)閮尚小?/font>

border-top-style: groove;

設(shè)置一個(gè)插圖風(fēng)格上邊框。

＃CSS邊框頂部寬度

像border-width，但對(duì)于頂部邊框而已。

default border-top-width: 0;

刪除頂部邊框。

border-top-width: 4px;

您可以使用像素值。

＃CSS邊框頂部

border-top: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border-top: 2px solid;

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

＃CSS邊框?qū)挾?/font>

定義元素的邊框的寬度。

border-width: 1px;

定義的寬度都邊框?yàn)?px。

border-width: 2px 0;

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

＃CSS邊界

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

border: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

border: 2px solid;

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

＃CSS底部

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

default bottom: auto;

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

bottom: 20px;

如果該元素是在適當(dāng)?shù)奈恢?/font>相對(duì)，所述元件將移動(dòng)向上通過由限定的量底值。

bottom: 0;

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

＃CSS箱陰影

定義元素的影子。

default box-shadow: none;

刪除被應(yīng)用到任何元素的box-shadow。

box-shadow: 2px 6px;

你至少需要兩個(gè)值：

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

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

box-shadow: 2px 6px red;

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

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

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

可選的第三個(gè)值定義模糊的影子。

顏色會(huì)跨越10px的在這個(gè)例子中被擴(kuò)散，從不透明到透明的。

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

可選的第四個(gè)值定義蔓延的陰影。

傳播定義了陰影多少應(yīng)該成長(zhǎng)：它增強(qiáng)了陰影。

＃CSS箱上漿

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

default box-sizing: content-box;

的寬度和高度的元件的僅適用于內(nèi)容的元素。

例如，該元件具有

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

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

的內(nèi)容具有定義的寬度。盒子可容納這些尺寸。

box-sizing: border-box;

的寬度和高度的元件的應(yīng)用到元件的所有部分：內(nèi)容，該填充和邊界。

例如，該元件具有

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

在全寬是200像素，無(wú)論是什么。

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

＃CSS清

前面所有的浮動(dòng)元素后移動(dòng)元素。

clear: none;

在明確與有兄弟姐妹一起使用時(shí)屬性僅有關(guān)浮點(diǎn)值。

該元素將坐在一起，任何浮動(dòng)元素之前它。

clear: left;

清除的元素會(huì)移動(dòng)后，它前面的左側(cè)浮動(dòng)元素，但仍將沿著右浮動(dòng)元素。

clear: right;

清除的元素會(huì)移動(dòng)后，它前面的任何權(quán)利浮動(dòng)元素，但仍將沿著左浮動(dòng)元素。

clear: both;

清除的元素會(huì)移動(dòng)后，它前面的浮動(dòng)元素。這包括懸空，右浮動(dòng)元素。

＃CSS彩

定義的顏色文本。

color: transparent;

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

color: red;

您可以使用一個(gè)140+顏色名稱。

color: #05ffb0;

您可以使用十六進(jìn)制顏色代碼。

color: rgb(50, 115, 220);

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

  • 的第一個(gè)值是用于 red
  • 第二值是用于 green
  • 第三值是對(duì) blue

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

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

您可以使用RGBA（）色碼：

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

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

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

您可以使用HSL（）色碼：

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

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

您可以使用HSL（）一個(gè)顏色代碼：

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

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

＃CSS列數(shù)

限定了元件的列數(shù)。

default column-count: auto;

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

column-count: 3;

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

＃CSS列隙

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

default column-gap: normal;

列之間的間隙設(shè)置為瀏覽器的默認(rèn)值，這通常是1em的。

column-gap: 2px;

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

注意，間隙只出現(xiàn)之間的列，而不是在邊緣的列的外部側(cè)面。

＃CSS列寬

限定了元件的列數(shù)。

default column-width: auto;

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

column-width: 10px;

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

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

＃CSS內(nèi)容

定義的文本內(nèi)容:before和:after偽元素。

default content: normal;

沒有內(nèi)容被添加到元件。

content: "Foo bar";

考慮到這個(gè)HTML元素：

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

而這個(gè)CSS：

.element：前{
  內(nèi)容：“富巴”;
}

文本內(nèi)容將被前置到元素的內(nèi)容。

請(qǐng)注意如何最終結(jié)果結(jié)合從CSS的HTML和文字文本。

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

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

content: attr(data-something);

考慮到這個(gè)HTML元素：

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

而這個(gè)CSS：

.element：前{
  內(nèi)容：ATTR（數(shù)據(jù)的東西）;
}

該元素將抓住從HTML文本內(nèi)容屬性。

＃CSS光標(biāo)

徘徊在元素時(shí)，設(shè)置鼠標(biāo)光標(biāo)。

cursor: default;

設(shè)置光標(biāo)到元素的默認(rèn)值。對(duì)于一個(gè)鏈接，這將是一個(gè)指針。對(duì)于文本這將是一個(gè)選擇光標(biāo)。

cursor: auto;

汽車

cursor: pointer;

指針

cursor: move;

移動(dòng)

cursor: crosshair;

十字線

cursor: text;

文本

cursor: wait;

等待

cursor: helpe-resize;

helpe調(diào)整大小

cursor: ne-resize;

NE-調(diào)整大小

cursor: nw-resize;

NW-調(diào)整大小

cursor: n-resize;

正調(diào)整大小

cursor: se-resize;

SE-調(diào)整大小

cursor: sw-resize;

SW-調(diào)整大小

cursor: s-resize;

S-調(diào)整大小

cursor: w-resize;

W-調(diào)整大小

＃CSS顯示

設(shè)置元素的顯示行為。

display: none;

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

display: inline;

元素變成一個(gè)內(nèi)聯(lián)元素：它的行為就像純文本。

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

display: block;

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

display: inline-block;

元素都共享一個(gè)屬性內(nèi)聯(lián)和塊元素：

  • 內(nèi)聯(lián)，因?yàn)樵撛氐男袨轭愃朴诤?jiǎn)單的文字，并插入本身的文本塊
  • 塊，因?yàn)槟憧梢陨暾?qǐng)height和width值

例如，這個(gè)元素有：

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

display: list-item;

元素就像一個(gè)列表項(xiàng)：<li>。唯一的區(qū)別塊是一個(gè)列表項(xiàng)具有符號(hào)點(diǎn)。

display: table;

元素就像一個(gè)表：<table>。

其內(nèi)容和子元素表現(xiàn)得像表格單元格。

display: table-cell;

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

其內(nèi)容和子元素表現(xiàn)得像表格單元格。

display: table-row;

元素就像一個(gè)表行：<tr>。

其內(nèi)容和子元素表現(xiàn)得像表格單元格。

display: flex;

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

其子元素會(huì)變成Flexbox的項(xiàng)目。

display: inline-flex;

元素都共享一個(gè)屬性內(nèi)聯(lián)和Flexbox的元素：

  • 內(nèi)聯(lián)，因?yàn)樵撛氐男袨轭愃朴诤?jiǎn)單的文字，并插入本身的文本塊
  • Flexbox的，因?yàn)樗淖釉貙⒒癁镕lexbox的項(xiàng)目

例如，這個(gè)元素有：

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

＃CSS柔性基礎(chǔ)

定義Flexbox的項(xiàng)目的初始大小。

default flex-basis: auto;

元件將根據(jù)它的內(nèi)容被自動(dòng)調(diào)整大小，或任何height或width值，如果它們被定義。

flex-basis: 80px;

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

＃CSS柔性方向

定義Flexbox的項(xiàng)目是如何一個(gè)Flexbox的容器內(nèi)訂購(gòu)。

default flex-direction: row;

的Flexbox的項(xiàng)目被訂購(gòu)的相同方式與文本方向，沿主軸線。

flex-direction: row-reverse;

的Flexbox的項(xiàng)目被訂購(gòu)的相反方式與文本方向，沿主軸。

flex-direction: column;

的Flexbox的項(xiàng)目被訂購(gòu)的相同方式與文本方向，沿橫軸。

flex-direction: column-reverse;

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

＃CSS柔性流動(dòng)

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

＃CSS柔性成長(zhǎng)

定義Flexbox的項(xiàng)目應(yīng)該有多少增長(zhǎng)，如果有可用空間。

default flex-grow: 0;

元素會(huì)不會(huì)，如果有可用空間成長(zhǎng)。它將只使用所需的空間。

flex-grow: 1;

該元素將增加由一個(gè)因素1。這將填補(bǔ)剩余的空間，如果沒有其他Flexbox的項(xiàng)目都有一個(gè)flex-grow值。

flex-grow: 2;

由于柔性成長(zhǎng)值是相對(duì)的，其行為取決于Flexbox的項(xiàng)目的價(jià)值兄弟姐妹。

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

  • 1第三轉(zhuǎn)到綠色項(xiàng)目
  • 2三分之二的進(jìn)入粉紅項(xiàng)目
  • 沒有去的黃色物品，誰(shuí)保留其初始寬度

＃CSS彈性收縮

定義Flexbox的項(xiàng)目應(yīng)該有多少縮水，如果有沒有足夠的可用空間。

default flex-shrink: 1;

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

flex-shrink: 0;

該元素將不會(huì)縮水：將保留它需要的寬度，沒有包裝的內(nèi)容。它的兄弟姐妹將萎縮給空間目標(biāo)元素。

由于目標(biāo)元素不會(huì)換它的內(nèi)容，還有對(duì)Flexbox的容器的內(nèi)容的機(jī)會(huì)溢出。

flex-shrink: 2;

由于柔性收縮值是相對(duì)的，其行為取決于Flexbox的項(xiàng)目的價(jià)值兄弟姐妹。

在本實(shí)施例中，綠色項(xiàng)目要填補(bǔ)的寬度的100％。它需要的空間是取自其兩個(gè)同胞，并在劃分4：

  • 3宿舍是取自紅項(xiàng)目
  • 1季度取自黃項(xiàng)目

＃CSS柔性包裝

如果Flexbox的項(xiàng)目出現(xiàn)在定義單行或多個(gè)行一Flexbox的容器內(nèi)。

default flex-wrap: nowrap;

該Flexbox的項(xiàng)目將保持在一個(gè)單一的線，無(wú)論是什么，最終將溢出如果需要的話。

flex-wrap: wrap;

該Flexbox的項(xiàng)目會(huì)之間進(jìn)行分配多條線路如果需要的話。

flex-wrap: wrap-reverse;

該Flexbox的項(xiàng)目會(huì)之間進(jìn)行分配多條線路如果需要的話。任何額外的生產(chǎn)線將出現(xiàn)前的前一個(gè)。

＃CSS浮

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

default float: none;

刪除以前定義的float值。該元件將保持在該頁(yè)面的自然流動(dòng)。

float: left;

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

float: right;

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

＃CSS FONT-FAMILY

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

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

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

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

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

font-family: serif;

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

font-family: sans-serif;

該瀏覽器將使用無(wú)襯線字體系列：無(wú)角色有中風(fēng)的結(jié)局。

font-family: monospace;

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

font-family: cursive;

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

font-family: fantasy;

瀏覽器將使用一個(gè)幻想字體系列。

＃CSS字體大小

定義文本的大小。

default font-size: medium;

該文本將使用瀏覽器默認(rèn)的中等大小。

font-size: 20px;

您可以使用像素值。

font-size: 1.2em;

您可以使用EM值。

該值是相對(duì)的父母的font-size。
這樣一來，該值將級(jí)聯(lián)如果在子元素中。

font-size: 1.2rem;

您可以使用REM值。

的值是相對(duì)于根元素的font-size，它是<html>元件。
其結(jié)果是，該值將不依賴于變化的深度在HTML層次結(jié)構(gòu)中的元素，并且將reamin上下文無(wú)關(guān)。

font-size: 90%;

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

該值是相對(duì)的父母的font-size。
這樣一來，該值將級(jí)聯(lián)如果在子元素中。

font-size: smaller;

您可以使用相對(duì)的關(guān)鍵字。該值是相對(duì)于親本。

下列是可用的：

  • larger
  • smaller

font-size: x-large;

您可以使用的絕對(duì)關(guān)鍵詞。該值是相對(duì)于根元素 <html>。

下列是可用的：

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

＃CSS字體風(fēng)格

定義文本多少傾斜。

default font-style: normal;

該文本是不傾斜。

font-style: italic;

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

font-style: oblique;

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

＃CSS字體變形

定義了字形用于每個(gè)字母。

default font-variant: normal;

每個(gè)字母使用其正常的字形。

font-variant: small-caps;

每個(gè)字母使用其小型大寫版本。

＃CSS字體重量

定義文本的重量。

default font-weight: normal;

該文本是正常體重。

font-weight: bold;

文本變得大膽。

font-weight: 600;

您可以使用數(shù)字值。它們都對(duì)應(yīng)于特定的命名的重量：

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

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

font-weight: lighter;

您可以使用相對(duì)關(guān)鍵字：lighter或bolder。瀏覽器將使用下一個(gè)可用的重量。

＃CSS字體

＃CSS高度

限定了元件的高度。

default height: auto;

元件將自動(dòng)調(diào)整其高度，以允許正確地顯示其內(nèi)容。

height: 100px;

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

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

＃CSS辯解內(nèi)容

定義Flexbox的項(xiàng)目的方式，根據(jù)所述對(duì)準(zhǔn)主軸線，一個(gè)Flexbox的容器內(nèi)。

default justify-content: flex-start;

該項(xiàng)目Flexbox的朝向推啟動(dòng)容器的主軸線。

justify-content: flex-end;

將Flexbox的項(xiàng)目對(duì)推動(dòng)結(jié)束容器的主軸線。

justify-content: center;

該Flexbox的項(xiàng)目為中心沿著容器的主軸線。

justify-content: space-between;

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

justify-content: space-around;

剩余的空間分布圍繞所述Flexbox的項(xiàng)：這增加了空間之前的第一項(xiàng)和之后的最后一個(gè)。

＃CSS左

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

default left: auto;

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

left: 80px;

如果該元素是在適當(dāng)?shù)奈恢?/font>相對(duì)，所述元件將移動(dòng)向上通過由限定的量左側(cè)的值。

left: -20px;

如果該元素處于位置絕對(duì)的，元素本身會(huì)從位置左側(cè)的第一個(gè)定位的的始祖。

＃CSS字母間距

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

default letter-spacing: normal;

字符之間的間隔是正常。

letter-spacing: 2px;

您可以使用像素值。

letter-spacing: 0.1em;

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

＃CSS線高

限定單個(gè)文本行的高度。

default line-height: normal;

還原為默認(rèn)瀏覽器的價(jià)值。

recommended line-height: 1.6;

您可以使用無(wú)單位值：行高將是相對(duì)的字體大小。

line-height: 30px;

您可以使用像素值。

line-height: 0.8em;

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

＃CSS列表樣式圖像

定義的圖像被用作列表項(xiàng)的項(xiàng)目符號(hào)。

default list-style-image: none;

列表項(xiàng)將使用所定義的子彈點(diǎn)list-style-type值，默認(rèn)情況下是一個(gè)圓盤。

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

列表項(xiàng)將使用圖像位于指定URL作為他們的子彈點(diǎn)
的圖像不能調(diào)整大小。

＃CSS列表樣式位置

定義位置列表的要點(diǎn)的。

default list-style-position: outside;

子彈點(diǎn)將外列表項(xiàng)，因?yàn)槿绻皇橇斜眄?xiàng)的一部分。

每個(gè)的開始行列表項(xiàng)將被垂直對(duì)齊。

list-style-position: inside;

子彈點(diǎn)將內(nèi)部列表項(xiàng)。

因?yàn)樗?/font>是該列表項(xiàng)的一部分，這將是文本的一部分，并在開始推文本。

＃CSS列表樣式類型

定義類型列表項(xiàng)的的圓點(diǎn)。

default list-style-type: disc;

列表項(xiàng)將使用光盤作為他們的子彈點(diǎn)。

list-style-type: circle;

列表項(xiàng)會(huì)用一個(gè)圓圈作為圓點(diǎn)。

list-style-type: square;

列表項(xiàng)將使用方作為項(xiàng)目符號(hào)。

list-style-type: decimal;

列表項(xiàng)將使用十進(jìn)制作為他們的子彈點(diǎn)。

list-style-type: none;

該列表中的項(xiàng)目將有沒有小點(diǎn)。

＃CSS列表樣式

＃CSS保證金底

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

default margin-bottom: 0;

刪除底部的任何保證金。

margin-bottom: 30px;

您可以使用像素值。

margin-bottom: 2em;

你可以使用（R）EM值。

值是相對(duì)于對(duì)字體大?。?/font>

  • EM：相對(duì)于元素的當(dāng)前字體大小
  • REM：相對(duì)于<html>所述根元素的字體大小

margin-bottom: 10%;

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

＃CSS保證金左

限定空間以外的元素，在左側(cè)。

default margin-left: 0;

刪除左側(cè)的任何保證金。

margin-left: 50px;

您可以使用像素值。

margin-left: 7em;

你可以使用（R）EM值。

值是相對(duì)于對(duì)字體大?。?/font>

  • EM：相對(duì)于元素的當(dāng)前字體大小
  • REM：相對(duì)于<html>所述根元素的字體大小

margin-left: 30%;

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

margin-left: auto;

該自動(dòng)關(guān)鍵字將會(huì)給左側(cè)的比重剩余空間。

當(dāng)結(jié)合margin-right: auto，它將為中心的元素，如果一個(gè)固定的寬度被定義。

＃CSS保證金權(quán)

限定空間以外的元素，在右側(cè)。

default margin-right: 0;

刪除右邊的任何保證金。

margin-right: 50px;

您可以使用像素值。

margin-right: 7em;

你可以使用（R）EM值。

值是相對(duì)于對(duì)字體大小：

  • EM：相對(duì)于元素的當(dāng)前字體大小
  • REM：相對(duì)于<html>所述根元素的字體大小

margin-right: 30%;

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

margin-right: auto;

該自動(dòng)關(guān)鍵字將會(huì)給右側(cè)的每股剩余空間。

當(dāng)結(jié)合margin-left: auto，它將為中心的元素，如果一個(gè)固定的寬度被定義。

＃CSS的margin-top

限定空間以外的元素，在頂側(cè)。

default margin-top: 0;

除去頂部的任何保證金。

margin-top: 30px;

您可以使用像素值。

margin-top: 2em;

你可以使用（R）EM值。

值是相對(duì)于對(duì)字體大?。?/font>

  • EM：相對(duì)于元素的當(dāng)前字體大小
  • REM：相對(duì)于<html>所述根元素的字體大小

margin-top: 10%;

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

＃CSS保證金

default margin: 0;

刪除所有的利潤(rùn)。

margin: 30px;

當(dāng)使用1值，則將邊距設(shè)置為所有4個(gè)方面。

margin: 30px 60px;

當(dāng)使用2的值：

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

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

如果輸入2的值（前/右），你忽略設(shè)置底部和左側(cè)。因?yàn)榈撞渴琼敳康拇怪睂?duì)應(yīng)，它將使用頂部的值。而且因?yàn)樽筮吺怯疫叺乃綄?duì)應(yīng)，它將使用權(quán)的價(jià)值。

margin: 30px 60px 45px;

當(dāng)使用3的值：

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

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

如果輸入3的值（上/右/下），你忽略設(shè)置離開。作為右的對(duì)手，它會(huì)用它的價(jià)值。

margin: 30px 60px 45px 85px;

當(dāng)使用4的值：

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

記住順序，開始在頂部和去順時(shí)針。

＃CSS最大高度

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

default max-height: none;

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

max-height: 2000px;

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

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

max-height: 100px;

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

＃CSS最大寬度

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

default max-width: none;

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

max-width: 2000px;

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

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

max-width: 150px;

如果內(nèi)容沒有最大寬度內(nèi)適合時(shí)，會(huì)自動(dòng)改變高度的元件，以適應(yīng)對(duì)內(nèi)容的包裝紙。

＃CSS最小高度

限定了元件的最小高度。

default min-height: 0;

該元素有沒有最低高度。

min-height: 200px;

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

如果該最小高度是大的比元件的實(shí)際高度，最小高度將被應(yīng)用。

min-height: 5px;

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

＃CSS最小寬度

限定了元件的最小寬度。

default min-width: 0;

該元素沒有最小寬度。

min-width: 300px;

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

如果該最小寬度較大比元件的實(shí)際寬度，最小寬度將被應(yīng)用。

min-width: 5px;

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

＃CSS混合混合模式

定義了元素應(yīng)該如何混合與背景。

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;

該元素使用減倉(cāng)混合模式。

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（一個(gè)）可以使元素半透明。

＃CSS秩序

定義Flexbox的項(xiàng)目的順序。

default order: 0;

所述Flexbox的項(xiàng)目的順序是在定義的HTML代碼。

order: 1;

順序是相對(duì)的Flexbox的項(xiàng)目的兄弟姐妹。當(dāng)所有個(gè)體Flexbox的項(xiàng)目次序值都考慮到最后的順序定義。

order: -1;

您可以使用負(fù)的值。

order: 9;

您可以設(shè)置不同的每個(gè)Flexbox的項(xiàng)目值。

＃CSS輪廓色

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

default outline-color: transparent;

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

outline-color: red;

您可以使用一個(gè)140+顏色名稱。

outline-color: #05ffb0;

您可以使用十六進(jìn)制顏色代碼。

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

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

  • 的第一個(gè)值是用于 red
  • 第二值是用于 green
  • 第三值是對(duì) blue

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

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

您可以使用RGBA（）色碼：

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

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

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

您可以使用HSL（）色碼：

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

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

您可以使用HSL（）一個(gè)顏色代碼：

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

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

＃CSS提綱式

定義元素的輪廓風(fēng)格。

default outline-style: none;

移除元素的輪廓。

outline-style: dotted;

接通輪廓成的點(diǎn)的序列。

outline-style: dashed;

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

outline-style: solid;

轉(zhuǎn)動(dòng)輪廓成實(shí)線。

outline-style: double;

拆分大綱為兩行。

outline-style: groove;

設(shè)置一個(gè)插圖風(fēng)格的輪廓。

＃CSS輪廓寬度

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

default outline-width: medium;

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

outline-width: 1px;

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

＃CSS大綱

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

outline: 4px dotted red;

該順序是非常重要的：

  • 寬度
  • 樣式
  • 顏色

outline: 2px solid;

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

＃CSS溢出包裝

定義是否達(dá)到行的末尾時(shí)的話應(yīng)該打破。

default overflow-wrap: normal;

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

overflow-wrap: break-word;

以無(wú)間隙的話會(huì)打破，因?yàn)樗鼈兊竭_(dá)行末，盡快。

＃CSS溢出-X

定義如何在橫軸上溢出的內(nèi)容顯示出來。

default overflow-x: visible;

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

overflow-x: hidden;

溢出的內(nèi)容是隱藏的，并且不能被訪問。

overflow-x: scroll;

四溢的內(nèi)容可訪問多虧了水平滾動(dòng)條。

overflow-x: auto;

瀏覽器決定是否顯示水平滾動(dòng)條或沒有。

＃CSS溢出-Y

定義如何在垂直軸上溢出的內(nèi)容顯示出來。

default overflow-y: visible;

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

overflow-y: hidden;

溢出的內(nèi)容是隱藏的，并且不能被訪問。

overflow-y: scroll;

四溢的內(nèi)容可訪問多虧了垂直滾動(dòng)條。

overflow-y: auto;

瀏覽器決定是否顯示垂直滾動(dòng)條或沒有。

＃CSS溢出

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

default overflow: visible;

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

overflow: hidden;

溢出的內(nèi)容是隱藏的，并且不能被訪問。

overflow: scroll;

四溢的內(nèi)容可訪問多虧了垂直滾動(dòng)條。

overflow: auto;

瀏覽器決定是否顯示垂直滾動(dòng)條或沒有。

＃CSS填充底

限定空間內(nèi)的元件，在底側(cè)。

default padding-bottom: 0;

刪除底部任何填充。

padding-bottom: 50px;

您可以使用像素值。

padding-bottom: 7em;

你可以使用（R）EM值。

值是相對(duì)于對(duì)字體大?。?/font>

  • EM：相對(duì)于元素的當(dāng)前字體大小
  • REM：相對(duì)于<html>所述根元素的字體大小

padding-bottom: 30%;

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

＃CSS填充左

限定空間內(nèi)的元件，在左側(cè)邊。

default padding-left: 0;

刪除左側(cè)的任何填充。

padding-left: 50px;

您可以使用像素值。

padding-left: 7em;

你可以使用（R）EM值。

值是相對(duì)于對(duì)字體大?。?/font>

  • EM：相對(duì)于元素的當(dāng)前字體大小
  • REM：相對(duì)于<html>所述根元素的字體大小

padding-left: 30%;

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

＃CSS填充右

限定空間內(nèi)的元件，在右側(cè)。

default padding-right: 0;

刪除右邊任何填充。

padding-right: 50px;

您可以使用像素值。

padding-right: 7em;

你可以使用（R）EM值。

值是相對(duì)于對(duì)字體大?。?/font>

  • EM：相對(duì)于元素的當(dāng)前字體大小
  • REM：相對(duì)于<html>所述根元素的字體大小

padding-right: 30%;

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

＃CSS填充頂

限定空間內(nèi)的元件，在頂側(cè)。

default padding-top: 0;

刪除頂部任何填充。

padding-top: 50px;

您可以使用像素值。

padding-top: 7em;

你可以使用（R）EM值。

值是相對(duì)于對(duì)字體大小：

  • EM：相對(duì)于元素的當(dāng)前字體大小
  • REM：相對(duì)于<html>所述根元素的字體大小

padding-top: 30%;

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

＃CSS填充

default padding: 0;

刪除所有墊。

padding: 30px;

當(dāng)使用1值，填充設(shè)置為所有4個(gè)方面。

padding: 30px 60px;

當(dāng)使用2的值：

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

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

如果輸入2的值（前/右），你忽略設(shè)置底部和左側(cè)。因?yàn)榈撞渴琼敳康拇怪睂?duì)應(yīng)，它將使用頂部的值。而且因?yàn)樽筮吺怯疫叺乃綄?duì)應(yīng)，它將使用權(quán)的價(jià)值。

padding: 30px 60px 45px;

當(dāng)使用3的值：

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

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

如果輸入3的值（上/右/下），你忽略設(shè)置離開。作為右的對(duì)手，它會(huì)用它的價(jià)值。

padding: 30px 60px 45px 85px;

當(dāng)使用4的值：

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

記住順序，開始在頂部和去順時(shí)針。

＃CSS指針事件

如果定義元素反應(yīng)指針事件與否。

default pointer-events: auto;

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

pointer-events: none;

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

＃CSS位置

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

default position: static;

該元件將保持在自然流動(dòng)的網(wǎng)頁(yè)。

其結(jié)果是，它將不充當(dāng)錨點(diǎn)的絕對(duì)定位的黃色塊。

此外，它會(huì)不反應(yīng)以下列性質(zhì)：

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

position: relative;

該元件將保持在自然流動(dòng)的網(wǎng)頁(yè)。

這也使得該元素的位置：它會(huì)作為一個(gè)錨點(diǎn)的絕對(duì)定位的黃色阻止作用。

此外，它會(huì)發(fā)生反應(yīng)，以下列屬性：

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

position: absolute;

的元件將不留在網(wǎng)頁(yè)的自然流動(dòng)。它會(huì)根據(jù)自身定位最接近的定位的祖先。

因?yàn)樗?/font>位置，這將作為一個(gè)錨點(diǎn)絕對(duì)定位黃色塊。

此外，它會(huì)發(fā)生反應(yīng)，以下列屬性：

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

position: fixed;

的元件將不留在網(wǎng)頁(yè)的自然流動(dòng)。它會(huì)根據(jù)自身定位視。

因?yàn)樗?/font>位置，這將作為一個(gè)錨點(diǎn)絕對(duì)定位黃色塊。

此外，它會(huì)發(fā)生反應(yīng)，以下列屬性：

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

＃CSS調(diào)整大小

如果定義textarea的是可調(diào)整大小與否。

default resize: none;

textarea的是不調(diào)整大小。

resize: horizontal;

textarea的是可調(diào)整大小的水平。

resize: vertical;

textarea的是大小可調(diào)整垂直。

resize: both;

textarea的是可調(diào)整大小的兩個(gè)水平和垂直方向。

＃CSS文本對(duì)齊

如何定義元素的文本內(nèi)容是水平排列。

text-align: left;

文本內(nèi)容對(duì)齊的左側(cè)。

text-align: right;

文本內(nèi)容被對(duì)準(zhǔn)到右邊。

text-align: center;

文本內(nèi)容居中。

text-align: justify;

文字內(nèi)容是有道理的。

＃CSS文本修飾

如何定義元素的文本內(nèi)容的裝飾。

default text-decoration: none;

刪除任何文本修飾。

text-decoration: underline;

強(qiáng)調(diào)文本內(nèi)容。

＃CSS文本縮進(jìn)

定義元素的文本第一行的縮進(jìn)。

default text-indent: 0;

該文本是不縮進(jìn)。

text-indent: 40px;

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

注意怎么只有第一行縮進(jìn)。

text-indent: -2em;

您也可以使用負(fù)的值。

＃CSS文本溢出

定義隱藏的文本內(nèi)容，如果它溢出的行為。

default text-overflow: clip;

文字內(nèi)容是裁剪和不可訪問。

text-overflow: ellipsis;

該溢出的內(nèi)容被替換用省略號(hào)：…

＃CSS文字陰影

定義文本內(nèi)容的影子。

default text-shadow: none;

之后文本內(nèi)容已沒有陰影。

text-shadow: 2px 6px;

你至少需要兩個(gè)值：

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

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

text-shadow: 2px 6px red;

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

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

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

可選的第三個(gè)值定義模糊的影子。

顏色會(huì)跨越10px的在這個(gè)例子中被擴(kuò)散，從不透明到透明的。

＃CSS文本轉(zhuǎn)換

定義文本內(nèi)容應(yīng)該如何改變。

default text-transform: none;

刪除任何文本轉(zhuǎn)換：文本將出現(xiàn)在相同的HTML代碼。

text-transform: capitalize;

打開的第一個(gè)字母每個(gè)字變成了大寫字母。

text-transform: uppercase;

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

text-transform: lowercase;

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

＃CSS頂部

定義根據(jù)其上邊緣的元件的位置。

default top: auto;

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

top: 20px;

如果該元素是在適當(dāng)?shù)奈恢?/font>相對(duì)，所述元件將移動(dòng)向上通過由限定的量最高值。

top: 0;

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

＃CSS變換原點(diǎn)

定義由定義的轉(zhuǎn)換原點(diǎn)transform屬性。

default transform-origin: 50% 50% 0;

變換原點(diǎn)在中心的元素。

transform-origin: 20px 70%;

您可以使用2個(gè)值：

  • 的第一個(gè)值是水平軸
  • 第二個(gè)是垂直軸

transform-origin: top right;

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

transform-origin: center bottom;

當(dāng)使用關(guān)鍵字，您可以更改訂單軸的，只要每個(gè)關(guān)鍵字是明確的。

＃CSS變換

定義元素如何轉(zhuǎn)換。

default transform: none;

刪除任何改造。

transform: translateX(40px);

移動(dòng)的元素水平軸。

transform: translateY(20px);

移動(dòng)的元素垂直軸。

transform: translateY(100%);

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

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

您可以translate()有兩個(gè)值：

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

transform: scaleX(1.5);

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

transform: scaleY(0.4);

縮放的元素垂直軸。

transform: scaleY(-2);

你可以用消極的價(jià)值觀：它會(huì)反轉(zhuǎn)的元素。

transform: scale(0.8, 0.8);

您可以scale()有兩個(gè)值：

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

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

transform: rotate(45deg);

旋轉(zhuǎn)元件。

您可以使用：

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

transform: skewX(15deg);

歪斜上的元件的水平軸。

transform: skewY(45deg);

歪斜的元素垂直軸。

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

您可以skew()有兩個(gè)值：

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

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

您可以將多個(gè)中間用空格分隔的轉(zhuǎn)換。

＃CSS過渡延遲

定義轉(zhuǎn)換有多久前等待的時(shí)間開始。

default transition-delay: 0s;

過渡將等待零點(diǎn)幾秒，因此馬上開始。

transition-delay: 1.2s;

您可以使用十進(jìn)制值中秒的關(guān)鍵字s。

transition-delay: 2400ms;

您可以使用毫秒代替秒，關(guān)鍵字ms。

transition-delay: -500ms;

您可以使用負(fù)值：轉(zhuǎn)型開始就好像它已經(jīng)被打了500ms。

＃CSS過渡期限

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

default transition-duration: 0s;

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

transition-duration: 1.2s;

您可以使用十進(jìn)制值中秒的關(guān)鍵字s。

transition-duration: 2400ms;

您可以使用毫秒代替秒，關(guān)鍵字ms。

＃CSS轉(zhuǎn)換屬性

定義哪些屬性將過渡。

default transition-property: all;

該元素將轉(zhuǎn)型的所有屬性：

transition-property: none;

該元素將轉(zhuǎn)型沒有財(cái)產(chǎn)：過渡從而瞬間。

transition-property: background;

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

transition-property: color;

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

transition-property: transform;

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

＃CSS轉(zhuǎn)換定時(shí)功能的

如何定義之間的值開始和結(jié)束計(jì)算的過渡。

default transition-timing-function: ease;

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

transition-timing-function: ease-in;

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

transition-timing-function: ease-out;

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

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

像ease，但更明顯。

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

transition-timing-function: linear;

過渡有一個(gè)*恒定的速度。

transition-timing-function: step-start;

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

transition-timing-function: step-end;

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

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

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

＃CSS轉(zhuǎn)換

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

僅transition-duration被需要。

transition: 1s;

  • transition-duration被設(shè)置到1s
  • transition-property 默認(rèn)為all
  • transition-timing-function 默認(rèn)為ease
  • transition-delay 默認(rèn)為0s

transition: 1s linear;

  • transition-duration被設(shè)置到1s
  • transition-property 默認(rèn)為all
  • transition-timing-function被設(shè)置到linear
  • transition-delay 默認(rèn)為0s

transition: background 1s linear;

  • transition-duration被設(shè)置到1s
  • transition-property被設(shè)置到background
  • transition-timing-function被設(shè)置到linear
  • transition-delay 默認(rèn)為0s

transition: background 1s linear 500ms;

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

transition: background 4s, transform 1s;

您可以將多個(gè)屬性用自己的過渡時(shí)間。

＃CSS空白

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

default white-space: normal;

的空間序列被合并成一個(gè)。
換行被忽略。
文本內(nèi)容被包裹。

white-space: nowrap;

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

white-space: pre;

白色空間究竟保留。

  • 的空間序列被保留
  • 行只對(duì)新的生產(chǎn)線，并突破 <br>

white-space: pre-wrap;

白色空間大多保存完好。

  • 的空間序列被保留
  • 線打破新的生產(chǎn)線，<br>但也達(dá)到了元素的結(jié)尾時(shí)，

white-space: pre-line;

只有新的生產(chǎn)線將被保留。

  • 的空間序列組合成一個(gè)
  • 線打破新的生產(chǎn)線，<br>但也達(dá)到了元素的結(jié)尾時(shí)，

＃CSS寬

限定了元件的寬度。

default width: auto;

元件將自動(dòng)地調(diào)整其寬度，以允許正確地顯示其內(nèi)容。

width: 240px;

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

width: 50%;

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

＃CSS將變

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

default will-change: auto;

不告訴瀏覽器優(yōu)化的任何財(cái)產(chǎn)。

will-change: scroll-position;

告訴瀏覽器優(yōu)化元素的滾動(dòng)位置，因?yàn)樗赡軙?huì)在未來改變。

will-change: contents;

告訴瀏覽器優(yōu)化元素的內(nèi)容，因?yàn)樗赡軙?huì)在未來改變。

will-change: box-shadow;

您可以指定任何其他的CSS 屬性。例如，這告訴瀏覽器優(yōu)化元素的箱陰影，因?yàn)樗赡軙?huì)在未來改變。

＃CSS字?jǐn)?/font>

定義達(dá)到行的末尾時(shí)的話應(yīng)該怎么休息。

default word-break: normal;

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

word-break: break-all;

以無(wú)間隙的話會(huì)打破，因?yàn)樗鼈兊竭_(dá)行末，盡快。

＃CSS字間距

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

default word-spacing: normal;

字符之間的間隔是正常。

word-spacing: 5px;

您可以使用像素值。

word-spacing: 2em;

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

＃CSS z索引

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

default z-index: auto;

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

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

z-index: 1;

的z索引值是相對(duì)于其他的。目標(biāo)元素是運(yùn)動(dòng)前的兄弟姐妹。

z-index: -1;

您可以使用負(fù)值。目標(biāo)元素是移動(dòng)在后面的兄弟姐妹。