目錄

樣式優(yōu)先級(jí)

自閉和標(biāo)簽

box-shadow

fixed定位

hsl()

顏色漸變

::before和::after?

關(guān)鍵幀和動(dòng)畫

animation

@keyframes

媒體查詢

自適應(yīng)

圖片自適應(yīng)

Flex容器

?justify-content屬性

align-items屬性

flex-shrink和flex-grow屬性

flex短方法屬性

align-self屬性

?CSS網(wǎng)格

調(diào)整大小

間距

grid-column

grid-area

repeat函數(shù)

auto-fill/fit 創(chuàng)建彈性布局

---

樣式優(yōu)先級(jí)

！important > 內(nèi)聯(lián) > id選擇器 > 類選擇器

自閉和標(biāo)簽

<img> <hr>

box-shadow

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

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

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

fixed定位

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

但 fixed 和 absolute 的最明顯的區(qū)別在于，前者定位的元素不會(huì)隨著屏幕滾動(dòng)而移動(dòng)。

hsl()

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

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

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

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

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

顏色漸變

HTML 元素的背景色并不局限于單色。 CSS 還為我們提供了顏色漸變。 可通過?background?里的?linear-gradient()?實(shí)現(xiàn)線性漸變， 以下是它的語法：

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

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

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

::before和::after?

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

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

::before?和?::after?必須配合?content?來使用。 這個(gè)屬性通常用來給元素添加內(nèi)容諸如圖片或者文字。 盡管有時(shí)?::before?和?::after?是用來實(shí)現(xiàn)形狀而非文字，但?content?屬性仍然是必需的，此時(shí)它的值可以是空字符串。 在上面的例子里，class 為?heart?元素的?::before?偽類添加了一個(gè)黃色的長方形，長方形的高和寬分別為?50px?和?70px。 這個(gè)矩形有圓角，因?yàn)樗?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>

關(guān)鍵幀和動(dòng)畫

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

animation

1. animation-name?用來設(shè)置動(dòng)畫的名稱。

2. animation-duration?設(shè)置動(dòng)畫所花費(fèi)的時(shí)間。

3. animation-fill-mode?指定了在動(dòng)畫結(jié)束時(shí)元素的樣式： 你可以這樣設(shè)置：

animation-fill-mode: forwards;

4. animation-iteration-count，這個(gè)屬性允許你控制動(dòng)畫循環(huán)的次數(shù)。

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

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

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

@keyframes

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

媒體查詢

媒體查詢是 CSS3 中引入的一項(xiàng)新技術(shù)，它可以根據(jù)不同的視口大小調(diào)整內(nèi)容的布局。 視口是指瀏覽器中，用戶可見的網(wǎng)頁內(nèi)容。 視口會(huì)隨訪問網(wǎng)站的設(shè)備不同而改變。

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

下面是一個(gè)媒體查詢的例子，當(dāng)設(shè)備寬度小于或等于?100px?時(shí)返回內(nèi)容：

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

自適應(yīng)

圖片自適應(yīng)

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

Flex容器

?justify-content屬性

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

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

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

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

align-items屬性

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

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

align-items?的可選值包括：

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

flex-shrink和flex-grow屬性

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

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

與?flex-shrink?相對的是?flex-grow。 你應(yīng)該還記得，flex-shrink?會(huì)在容器太小時(shí)對子元素作出調(diào)整。 相應(yīng)地，flex-grow?會(huì)在容器太大時(shí)對子元素作出調(diào)整。

flex短方法屬性

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

例如，flex: 1 0 10px;?會(huì)把項(xiàng)目屬性設(shè)為?flex-grow: 1;、flex-shrink: 0;?以及?flex-basis: 10px;。

屬性的默認(rèn)設(shè)置是?flex: 0 1 auto;。

align-self屬性

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

align-self?可設(shè)置的值與?align-items?的一樣，并且它會(huì)覆蓋?align-items?所設(shè)置的值。

?CSS網(wǎng)格

調(diào)整大小

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

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

auto：設(shè)置列寬或行高自動(dòng)等于它的內(nèi)容的寬度或高度，

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

間距

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

grid-column

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

網(wǎng)格中，假想的水平線和垂直線被稱為線（lines）。 這些線在網(wǎng)格的左上角從 1 開始編號(hào)，垂直線向右、水平線向下累加計(jì)數(shù)。

這是一個(gè) 3x3 網(wǎng)格的線條：

要設(shè)置一個(gè)網(wǎng)格項(xiàng)占據(jù)幾列，你可以使用?grid-column?屬性加上網(wǎng)格線條的編號(hào)來定義網(wǎng)格項(xiàng)開始和結(jié)束的位置。

示例如下：

grid-column: 1 / 3;

這會(huì)讓網(wǎng)格項(xiàng)從左側(cè)第一條線開始到第三條線結(jié)束，占用兩列。

grid-area

我們在上一次挑戰(zhàn)中學(xué)到的?grid-area?屬性還有另一種使用方式。 如果網(wǎng)格中沒有定義區(qū)域模板，你也可以像這樣為它添加一個(gè)模板：

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

這里使用了你之前學(xué)習(xí)的網(wǎng)格線編號(hào)來定義網(wǎng)格項(xiàng)的區(qū)域。 上例中數(shù)字代表這些值：

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

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

repeat函數(shù)

你還可以用 repeat 方法重復(fù)多個(gè)值，并在定義網(wǎng)格結(jié)構(gòu)時(shí)與其他值一起使用。 比如：

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

效果相當(dāng)于：

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

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

auto-fill/fit 創(chuàng)建彈性布局

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

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

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

auto-fit?效果幾乎和?auto-fill?一樣。 不同點(diǎn)僅在于，當(dāng)容器的大小大于各網(wǎng)格項(xiàng)之和時(shí)，auto-fill?會(huì)持續(xù)地在一端放入空行或空列，這樣就會(huì)使所有網(wǎng)格項(xiàng)擠到另一邊；而?auto-fit?則不會(huì)在一端放入空行或空列，而是會(huì)將所有網(wǎng)格項(xiàng)拉伸至合適的大小。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。