目錄

樣式優先級

自閉和標簽

box-shadow

fixed定位

hsl()

顏色漸變

::before和::after?

關鍵幀和動畫

animation

@keyframes

媒體查詢

自適應

圖片自適應

Flex容器

?justify-content屬性

align-items屬性

flex-shrink和flex-grow屬性

flex短方法屬性

align-self屬性

?CSS網格

調整大小

間距

grid-column

grid-area

repeat函數

auto-fill/fit 創建彈性布局

---

樣式優先級

！important > 內聯 > id選擇器 > 類選擇器

自閉和標簽

<img> <hr>

box-shadow

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

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

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

fixed定位

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

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

hsl()

顏色具有多種特性，包括色相、飽和度和亮度。 CSS3 引入了?hsl()?做為顏色的描述方式。

色相?是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。 以顏色光譜為例，光譜左邊從紅色開始，移動到中間的綠色，一直到右邊的藍色，色相值就是沿著這條線的取值。 在?hsl()?里面，色相用色環來代替光譜，色相值就是色環里面的顏色對應的從 0 到 360 度的角度值。

飽和度?是指色彩的純度，也就是顏色里灰色的占比。 飽和度越高則灰色占比越少，色彩也就越純；反之則完全是灰色。 飽和度的取值范圍是表示灰色所占百分比的 0 至 100。

亮度?決定顏色的明暗程度，也就是顏色里白色或者黑色的占比。 其中，100% 的亮度表示純白色， 0% 的亮度則表示純黑色；而 50% 的亮度就表示在色相中選取的顏色

紅	hsl(0, 100%, 50%)
綠	hsl(120, 100%, 50%)
藍	hsl(240, 100%, 50%)
黃	hsl(60, 100%, 50%)

顏色漸變

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));

::before和::after?

::before?和?::after。?::before?創建一個偽元素，它是所選元素的第一個子元素；?::after?創建一個偽元素，它是所選元素的最后一個子元素。 在下面的代碼中，::before?偽元素用來給 class 為?heart?的元素添加一個正方形：

.heart::before {content: "";background-color: yellow;border-radius: 25%;position: absolute;height: 50px;width: 70px;top: -50px;left: 5px; }

::before?和?::after?必須配合?content?來使用。 這個屬性通常用來給元素添加內容諸如圖片或者文字。 盡管有時?::before?和?::after?是用來實現形狀而非文字，但?content?屬性仍然是必需的，此時它的值可以是空字符串。 在上面的例子里，class 為?heart?元素的?::before?偽類添加了一個黃色的長方形，長方形的高和寬分別為?50px?和?70px。 這個矩形有圓角，因為它的?border-radius?為 25%，它的位置是絕對位置，位于離元素左邊和頂部分別是?5px、50px?的位置。?

//愛心 <style>.heart {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;background-color: pink;height: 50px;width: 50px;transform: rotate(-45deg);}.heart::after {background-color: pink;content: "";border-radius: 50%;position: absolute;width: 50px;height: 50px;top: 0px;left: 25px;}.heart::before {content: "";background-color: pink;border-radius: 50%;position: absolute;width: 50px;height: 50px;top: -25px;left: 0px;} </style> <div class="heart"></div>

關鍵幀和動畫

如果要給元素添加動畫，你需要了解 animation 屬性以及?@keyframes?規則。 animation 屬性控制動畫的外觀，@keyframes?規則控制動畫中各階段的變化。 總共有 8 個 animation 屬性。?

animation

1. animation-name?用來設置動畫的名稱。

2. animation-duration?設置動畫所花費的時間。

3. animation-fill-mode?指定了在動畫結束時元素的樣式： 你可以這樣設置：

animation-fill-mode: forwards;

4. animation-iteration-count，這個屬性允許你控制動畫循環的次數。

5. animation-timing-function?用來定義動畫的速度曲線。有一些預定義的關鍵字可用于常見的選項。 比如，默認值是?ease，動畫以低速開始，然后加快，在結束前變慢。 其它常用的值包括?ease-out：動畫以高速開始，以低速結束；ease-in，動畫以低速開始，以高速結束；linear：動畫從頭到尾的速度是相同的。?

?????????cubic-bezier?來定義貝塞爾曲線。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);

@keyframes

@keyframes?可以通過設置特定時間點的行為來創建動畫。 為此，我們只需要給持續時間內的特定幀（從 0% 到 100%）加上 CSS 規則。 如果用一部電影來做類比，那么 CSS 里面的 0% 關鍵幀就像是電影里面的開場鏡頭；100% 關鍵幀就像是電影里的片尾，就是那個之后會出現演職人員列表的片尾。 在動畫設定的時間內，CSS 會根據關鍵幀的規則來給元素添加動畫效果。 100% 位置的 CSS 屬性就是元素最后的樣子，相當于電影里的演職員表或者鳴謝鏡頭。 然后CSS 應用魔法來在給定的時間內轉換元素以使其脫離場景。

媒體查詢

媒體查詢是 CSS3 中引入的一項新技術，它可以根據不同的視口大小調整內容的布局。 視口是指瀏覽器中，用戶可見的網頁內容。 視口會隨訪問網站的設備不同而改變。

媒體查詢由媒體類型組成，如果媒體類型與展示網頁的設備類型匹配，則應用對應的樣式。 你可以在媒體查詢中使用各種選擇器和樣式。

下面是一個媒體查詢的例子，當設備寬度小于或等于?100px?時返回內容：

@media (max-width: 100px) { /* CSS Rules */ }

自適應

圖片自適應

img {max-width: 100%;height: auto; }

Flex容器

?justify-content屬性

lex 子元素有時不能充滿整個 flex 容器， 所以我們經常需要告訴 CSS 以什么方式排列 flex 子元素，以及調整它們的間距。 幸運的是，我們可以通過?justify-content?屬性的不同值來實現。 在介紹屬性的可選值之前，我們要先理解一些重要術語。這張圖片的元素橫著排列，很好的描述了下面概念。

回憶一下，如果把 flex 容器設為一個行，它的子元素會從左到右逐個排列； 如果把 flex 容器設為一個列，它的子元素會從上到下逐個排列。 子元素排列的方向被稱為?main axis（主軸）。 對于行，主軸水平貫穿每一個項目； 對于列，主軸垂直貫穿每一個項目。

對于如何沿主軸線排放 flex 項目，有幾種選擇。 很常用的一種是?justify-content: center;：即 flex 子元素在 flex 容器中居中排列。 其他選擇包括：

• flex-start：從 flex 容器的起始位置開始排列項目。 對行來說是把項目移至左邊， 對于列是把項目移至頂部。 如未設置?justify-content?的值，那么這就是默認值。
• flex-end：從 flex 容器的終止位置開始排列項目。 對行來說是把項目移至右邊， 對于列是把項目移至底部。
• space-between：項目間保留一定間距地沿主軸居中排列。 第一個和最后一個項目被放置在容器邊沿。 例如，在行中第一個項目會緊貼著容器左邊，最后一個項目會緊貼著容器右邊，然后其他項目均勻排布。
• space-around：與space-between相似，但頭尾兩個項目不會緊貼容器邊緣，所有項目之間的空間均勻排布。
• space-evenly：頭尾兩個項目不會緊貼容器邊緣，所有項目之間的空間均勻排布。

align-items屬性

align-items?屬性與?justify-content?類似。 回憶一下，justify-content?屬性使 flex 子元素沿主軸排列。 行的主軸是水平線，列的主軸是垂直線。

Flex 容器中，與主軸垂直的叫做?cross axis（交叉軸）。 行的交叉軸是垂直的，列的交叉軸是水平的。CSS 中的?align-items?屬性用來定義 flex 子元素沿交叉軸的對齊方式。 對行來說，定義的是元素的上下對齊方式； 對列來說，是定義元素的左右對齊方式。

align-items?的可選值包括：

• flex-start：從 flex 容器的起始位置開始對齊項目。 對行來說，把項目移至容器頂部； 對列來說，是把項目移至容器左邊。
• flex-end：從 flex 容器的終止位置開始對齊項目。 對行來說，把項目移至容器底部； 對列來說，把項目移至容器右邊。
• center：把項目居中放置。 對行來說，垂直居中（項目距離頂部和底部的距離相等）； 對列來說，水平居中（項目距離左邊和右邊的距離相等）。
• stretch：拉伸項目，填滿 flex 容器。 例如，排成行的項目從容器頂部拉伸到底部。 如未設置align-items的值，那么這就是默認值。
• baseline：沿基線對齊。 基線是文本相關的概念，可以認為它是字母排列的下端基準線。

flex-shrink和flex-grow屬性

首先介紹的是?flex-shrink?屬性。 使用之后，如果 flex 容器太小，則子元素會自動縮小。 當容器的寬度小于里面所有子元素的寬度之和時，所有子元素都會自動壓縮。

子元素的?flex-shrink?接受數值作為屬性值。 數值越大，則該元素與其他元素相比會被壓縮得更厲害。

與?flex-shrink?相對的是?flex-grow。 你應該還記得，flex-shrink?會在容器太小時對子元素作出調整。 相應地，flex-grow?會在容器太大時對子元素作出調整。

flex短方法屬性

上面幾個 flex 屬性有一個簡寫方式。?flex-grow、flex-shrink?和?flex-basis?屬性可以在?flex?中一并設置。

例如，flex: 1 0 10px;?會把項目屬性設為?flex-grow: 1;、flex-shrink: 0;?以及?flex-basis: 10px;。

屬性的默認設置是?flex: 0 1 auto;。

align-self屬性

flex 子項目的最后一個屬性是?align-self。 這個屬性允許你調整單個子元素自己的對齊方式，而不會影響到全部子元素。 因為?float、clear?和?vertical-align?等調整對齊方式的屬性都不能應用于 flex 子元素，所以這個屬性顯得十分有用。

align-self?可設置的值與?align-items?的一樣，并且它會覆蓋?align-items?所設置的值。

?CSS網格

調整大小

在 CSS 網格中，可以使用絕對單位（如?px）或相對單位（如?em）來定義行或列的大小。 下面的單位也可以使用：

fr：設置列或行占剩余空間的比例，

auto：設置列寬或行高自動等于它的內容的寬度或高度，

%：將列或行調整為它的容器寬度或高度的百分比，

間距

grid-gap?屬性是前兩個挑戰中出現的?grid-row-gap?和?grid-column-gap?的簡寫屬性，它更方便使用。 如果?grid-gap?只有一個值，那么這個值表示行與行之間、列與列之間的間距均為這個值。 如果有兩個值，那么第一個值表示行間距，第二個值表示列間距。

grid-column

到目前為止，所有的討論都是圍繞網格容器的。?grid-column?屬性是我們要討論的，第一個用于網格項本身的屬性。

網格中，假想的水平線和垂直線被稱為線（lines）。 這些線在網格的左上角從 1 開始編號，垂直線向右、水平線向下累加計數。

這是一個 3x3 網格的線條：

要設置一個網格項占據幾列，你可以使用?grid-column?屬性加上網格線條的編號來定義網格項開始和結束的位置。

示例如下：

grid-column: 1 / 3;

這會讓網格項從左側第一條線開始到第三條線結束，占用兩列。

grid-area

我們在上一次挑戰中學到的?grid-area?屬性還有另一種使用方式。 如果網格中沒有定義區域模板，你也可以像這樣為它添加一個模板：

item1 { grid-area: 1/1/2/4; }

這里使用了你之前學習的網格線編號來定義網格項的區域。 上例中數字代表這些值：

grid-area: 行起始線 / 列起始線 / 行終止線 / 列終止線;

因此，示例中的網格項將占用第 1 條水平網格線（起始）和第 2 條水平網格線（終止）之間的行，及第 1 條垂直網格線（起始）和第 4 條垂直網格線（終止）之間的列。

repeat函數

你還可以用 repeat 方法重復多個值，并在定義網格結構時與其他值一起使用。 比如：

grid-template-columns: repeat(2, 1fr 50px) 20px;

效果相當于：

grid-template-columns: 1fr 50px 1fr 50px 20px;

注意：?1fr 50px?重復了兩次，后面跟著 20px。

auto-fill/fit 創建彈性布局

repeat 方法帶有一個名為自動填充（auto-fill）的功能。 它的功能是根據容器的大小，盡可能多地放入指定大小的行或列。 你可以通過結合?auto-fill?和?minmax?來更靈活地布局。

repeat(auto-fill, minmax(60px, 1fr));

上面的代碼效果是這樣：首先，列的寬度會隨容器大小改變。其次，只要容器寬度不足以插入一個寬為 60px 的列，當前行的所有列就都會一直拉伸。請自己調整寬度，動手試一下就不難理解了。?注意：?如果容器寬度不足以將所有網格項放在同一行，余下的網格項將會移至新的一行。

auto-fit?效果幾乎和?auto-fill?一樣。 不同點僅在于，當容器的大小大于各網格項之和時，auto-fill?會持續地在一端放入空行或空列，這樣就會使所有網格項擠到另一邊；而?auto-fit?則不會在一端放入空行或空列，而是會將所有網格項拉伸至合適的大小。

總結

以上是生活随笔為你收集整理的CSSHTML学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。