【FCC前端教程】44關學習CSS與CSS3基礎「一」

「前言」

歡迎回來三鑽的FCC前端教程上一篇文章我們通過28關學會了HTML與HTML5網頁開發基礎。這一期我們一起攻破前端第二大知識點《CSS基礎入門》。因爲這一課一共有44關,我把文章分成兩期更新。敬請期待!

「CSS基礎知識」

Cascading Style Sheet縮寫爲CSS,顧名思義就是層疊樣式表的意思。CSS是HTML中的一個樣式表,告訴瀏覽器網頁上的文字和其他內容是如何展示的。

理解CSS

以上是一個官方的定義。我們用一個更簡單的方式理解CSS到底是一個什麼東東:

如果HTML是骨架,那CSS就是裝飾這個骨架的一層皮和身上的裝飾品。我們可以通過CSS控制皮膚的顏色,毛孔的粗細。甚至還可以控制我們裝飾品上的特效,動效等等(有LED燈的口罩也是一種特效)。

迴歸HTML中的CSS,我們可以使用CSS控制哪些東西呢?

  • color:顏色
  • fonts:字體
  • positioning:定位
  • spacing:間隙
  • sizing:大小
  • decoration:裝飾
  • transition:過渡/特效/動效

應用方式

我們一共有3種應用CSS樣式的方法。

  1. 我們可以在HTML元素行內的style中編寫樣式;
  2. 在HTML文檔中添加<style>標籤,然後在標籤內編寫CSS代碼;
  3. 把CSS樣式單獨寫入一個CSS樣式文件,然後在需要使用的HTML文檔中使用<link>引入。

一般項目中都會選擇使用第三種方式,因爲比較大型的前端頁面,很多樣式都是有重複性的,應用引入型的CSS樣式,我們就可以把通用的寫在一起然後在所有HTML中引入即可,不需要重複編寫。並且可以把CSS分類存放提高可讀性可維護性

CSS原理

CSS背後的原理是,使用CSS選擇器選中DOM(文檔對象模型)裏面的某個HTML元素。然後將各種CSS樣式和屬性應用到該元素中,從而改變元素在頁面中的展現方式或者樣式。

在本節中,我們將學會如何應用CSS樣式到CatPhotoApp的元素中,從而將它從簡單的文本裝修成一個頁面。讓我們立即開始吧!

「第一關」改變文字顏色

關卡名:Change the Color of Text

知識點
  • 我們這一關來嘗試改變文本中一些文字的顏色;
  • 我們可以給h2元素添加style屬性,然後使用樣式屬性改變文字顏色;
  • color就是用來定義文字顏色的樣式屬性;

以下例子演示如何給h2應用一個藍色字體顏色的代碼:

<h2 style="color: blue;">CatPhotoApp</h2>

注意: 在行內樣式中,所有樣式屬性結束後需要加上一個;符號,代表這一個樣式屬性定義結束。然後後面還可以加入更多的樣式屬性。

過關目標
  • 改變h2的文字顏色爲紅色(red);
過關條件
  • h2元素中需要有style屬性;
  • h2元素的color樣式屬性應該賦予red這個值;
  • style屬性值裏的樣式屬性應該以;符號結束;
學會了什麼?

這關卡主要教會我們:

  1. 行內添加style樣式屬性;
  2. 字體顏色樣式屬性color;

答案

「第二關」使用CSS選擇器改變元素樣式

關卡名:Change the Color of Text

知識點
  • CSS有幾百種樣式屬性可應用到一個HTML元素中,來改變它在頁面中的顯示方式。
  • 上一關編寫的<h2 style="color: red;">CatPhotoApp</h2>,這裏我們使用行內樣式,使用了文字顏色樣式來單獨改變h2元素中的文字。
  • 這種應用方式只能單獨針對HTML中某一個元素進行樣式影響,但是更好的方式是使用CSS樣式表。

在代碼的最頂端加入style標籤:

<style>
</style>

style中,使用CSS選擇器選中所有h2標籤,並且給所有h2標籤加入字體顏色樣式屬性color: red

<style>
  h2 {
    color: red;
  }
</style>

注意: 選擇器名中的樣式元素必須用兩個大括號包裹着 (開始{與結束})。在樣式屬性的最後必須加入一個分號;來結束。

過關目標
  • 刪除h2行內樣式;
  • 在代碼頂部加入style樣式表代碼區;
  • 在樣式代碼區使用CSS選擇器把所有h2元素內的字體改變爲藍色blue;
過關條件
  • h2元素中的style屬性需要被移除;
  • 需要創建一個style元素;
  • h2元素中的文字應該是藍色blue的;
  • 樣式表中的樣式屬性都應該遵循規範,有大括號和結束時的分號
  • style元素有接受標籤;
學會了什麼?

這關卡主要教會我們:

  1. 使用style元素
  2. CSS樣式元素規範

答案

「第三關」使用CSS類

關卡名:Use a CSS Class to Style an Element

知識點
  • CSS中的類是爲了解決服用樣式的問題;

類聲明例子:

<style>
  .blue-text {
    color: blue;
  }
</style>
  • style元素中我們編寫了一個.blue-textCSS類(CSS類需要在我們的名字前加入.符號, 然後CSS類的命名規範必須使用-分割);
  • 接着我們可以把這個類加入HTML元素中,比如:<h2 class="blue-text">CatPhotoApp</h2>
  • 只要給我們需要應用字體顏色爲藍色的HTML元素上加入class="blue-text",即可獲得該CSS類的樣式屬性。
  • 記住在HTML中加入類,是不需要.這個符號在最前面的。
過關目標
  • style元素中,把h2CSS選擇器改爲.red-text
  • 並且把顏色值從blue改爲red;
過關條件
  • h2元素的問題應該是紅色的;
  • h2元素應該擁有一個red-text的類;
  • style樣式表中有定義一個.red-text,並且樣式屬性color的值爲red;
  • 不允許在h2中使用行內style屬性來改變元素的字體顏色;
學會了什麼?

這關卡主要教會我們:

  1. 在CSS樣式表中定義類;
  2. 在HTML元素中加入類;
  3. 用類改變HTML元素的樣式;

答案

「第四關」使用CSS類改變多個元素樣式

關卡名:Change the Color of Text

知識點
  • 一個類可以賦予給多個元素,讓所有被賦予同一個類的元素擁有同一套樣式;

幾年前twitter公司很火的前端框架bootstrap,就是結合很多這種分類好的的類,讓我們在HTML元素中組合使用就可以快速佈局網頁。所以合理的分類好不同種類的類,然後給他們一種特定用途,有利於CSS開發時提高代碼複用性,提高可讀性和可維護性。

過關目標
  • 給代碼中第一個p元素也加入red-text類;
過關條件
  • h2元素的文字應該是紅色;
  • h2元素應該擁有一個red-text類屬性;
  • 第一個p元素的內容應該是紅色;
  • 第二和第三個p元素的內容顏色應該不是紅色;
  • 第一個p元素應該擁有一個red-text類屬性;
學會了什麼?

這關卡主要教會我們:

  1. 用類名對多個HTML元素賦予同一個樣式;

答案

「第五關」改變文字大小

關卡名:Change the Color of Text

知識點
  • 字體大小是font-size樣式屬性控制的;
h1 {
  font-size: 30px;
}
過關目標
  • style元素中,.red-text下方加入p元素選擇器;
  • p選擇器中加入font-size樣式屬性,並且把值設置爲16px(16像素);
過關條件
  • style元素中爲p元素的內容的字體改爲16px的大小;
學會了什麼?

這關卡主要教會我們:

  1. 改變元素字體大小;

答案

「第六關」改變元素字體

關卡名:Set the Font Family of an Element

知識點
  • 使用font-family樣式屬性,我們可以定義一個元素所使用的字體;
  • 舉例,如果我們想h2元素使用sans-serif字體,在CSS中需要這麼些:
h2 {
  font-family: sans-serif;
}
過關目標
  • 讓所有p元素使用monospace字體;
過關條件
  • 所有p元素都使用monospace字體;
學會了什麼?

這關卡主要教會我們:

  1. 使用CSS樣式屬性制定元素使用的字體;

答案

「第七關」引入Google字體

關卡名:Import a Google Font

知識點
  • 在我們的操作系統中,會有很多通用的字體可以使用。但是除了這些字體之外我們還可以引入自定義字體,也叫web fonts網頁字體。
  • 在項目中,有一些設計師會使用一些特殊的字體,主要是爲了提高整體頁面的美觀和協調,這種也是非常常見的。
  • 這個時候我們就需要在HTML中引入字體了。
  • 這個關卡我們使用了Google Fonts庫(顧名思義,就是使用谷歌公司提供的公開字體庫 - 也就是免費使用的)

注意: 如果我們無法訪問谷歌字體的話,這一關是無法過的,只能跳過。但是作爲開發人員,我們是有辦法的。(你們懂的 😂)

  • 要引入谷歌字體,我們只需要在HTML中加入谷歌字體的URL;
  • 這個關卡中我們需要引入谷歌字體庫中的Lobster字體;
  • 我們只需要複製黏貼以下代碼,加入到我們代碼的頂端即可(如果是在正常的HTML文件格式中,就是加入到<meta></meta>標籤之中);
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
  • 現在我們可以在CSS中使用font-family: Lobster;, font-family字體屬性值的格式是: font-family: FAMILY_NAME, GENERIC_NAME;;
  • 裏面的FAMILY_NAME就是指定的字體名,如果這個字體找不到,或者語言不適應的話,就會往後面定義的字體進行應用;
  • 換言之GENERIC_NAME就是後備字體,可以用,分割輸入多個,這個也會在下一關詳細解說;
  • 如果我們的字體名中含有空格,那我們就需要用雙引號包裹着,例如:"Open Sans"。因爲Lobster這個字體不存在這種情況,所以不需要使用雙引號;
過關目標
  • 創建一個font-familyCSS規則,並且使用Lobster字體。必須保證我們的h2元素應用了這個字體定義。
過關條件
  • 引入了谷歌字體庫中的Lobster字體;
  • h2元素中的字體使用了Lobster字體;
  • 使用h2CSS選擇器的來改變字體;
  • 其他p元素應該保持原來的monospace字體;
學會了什麼?

這關卡主要教會我們:

  1. 引入谷歌字體;
  2. 使用谷歌字體;

答案

「第八關」定義字體如何往後取用

關卡名:Specify How Fonts Should Degrade

知識點
  • 瀏覽器中有好幾個可用的默認的字體,最普通的字體有:monospace, serifsans-serif
  • 當一個字體不存在或者無法使用時,我們可以告訴瀏覽器**“往後取用”**下一個指定的字體;
  • 舉例:如果Helvetic作爲我們的默認字體,當這個字體無法使用的時候自動往後選擇使用sans-serif字體,這種場景我們就需要用以下方式:
p {
  font-family: Helvetica, sans-serif;
}

Generic font family的字體名是沒有大小寫限制的,只要名字正確就可以了。並且不需要雙引號,因爲它們是CSS關鍵詞而已。

過關目標
  • 首先給h2追加monospace字體,讓h2元素擁有默認字體爲Lobster,備用自己爲monospace
  • 上一關卡,我們使用link標籤引入了谷歌字體庫中的Lobster字體。這裏我們註釋掉這個引用,從而Lobster這個字體就變成無法使用了,所以h2元素中就會往後取用monospcae字體;

注意: 如果我們的電腦中安裝了Lobster字體,那這個例子中的Lobster字體是可用的,自然就無法看到瀏覽器往後取用的效果了。

過關條件
  • h2元素使用Lobster字體;
  • Lobster字體無法使用時,h2元素應該往後取用monospace字體;
  • 註釋掉谷歌字體庫的引用,在link標籤的簽名加入<!--和在結尾加入-->
  • 註釋的結尾必須有-->
學會了什麼?

這關卡主要教會我們:

  1. 給HTML元素追加後備字體;

答案

「第九關」控制圖片大小

關卡名:Size Your Images

知識點
  • CSS中有一個樣式屬性叫width(寬度),顧名思義這個元素是用來控制元素的寬度的;
  • 與字體大小一樣,我們使用px(像素)爲單位來定義圖片的寬度
  • 舉例:如果我們創建一個CSS類larger-image,並且使用這個類來把HTML元素的寬度定義爲500像素,我們就用以下寫法:
<style>
  .larger-image {
    width: 500px;
  }
</style>
過關目標
  • 創建一個smaller-image的CSS類,並且用這個類來縮小一個圖片的大小爲100像素寬;

注意:因爲瀏覽器的設置,有一些用戶會默認把網頁放大縮小了,不是默認的100%。如果是的話,請還原100%伸縮值後才能正常通過此關哦!

過關條件
  • img元素需要有smaller-imge類;
  • img元素應該是100px寬,並且瀏覽器縮放是在100%;
學會了什麼?

這關卡主要教會我們:

  1. 控制元素寬度

答案

「第十關」添加元素邊框

關卡名:Add Borders Around Your Elements

知識點
  • CSS邊框有這些屬性:style, colorwidth
  • 舉例:如果我們想給一個HTML元素創建一個紅色的,5像素邊框,我們就需要用這樣一個CSS類來實現;
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

還有一種更簡單快捷的寫法:

<style>
.thin-red-border {
  border: 5px red solid;
}
</style>
過關目標
  • 創建一個類叫thick-green-border
  • 這個CSS類給HTML元素加入一個10px,實線(solid)和綠色(green)的邊框;
  • 給我們的貓咪圖片加入這個類;

記住:我們是可以給HTML元素中的class屬性添加多個類,只要使用空格分隔即可。如:
<img class="class1 class2">

過關條件
  • img元素需要有smaller-imge類;
  • img元素需要有thick-green-border類;
  • 圖片應有一個10px寬的邊框;
  • 圖片應有一個實線的邊框樣式;
  • 圖片應有一個綠色的邊框樣式;
學會了什麼?

這關卡主要教會我們:

  1. 給元素添加邊框;
  2. 給邊框加入寬度,線的樣式和顏色;

答案

「第十一關」使用border-radius實現圓邊

關卡名:Add Rounded Corners with border-radius

知識點
  • 我們的喵咪圖片現在是直角邊的;
  • 我們可以使用border-radius把圖片的四個角改圓邊;
過關目標
  • 我們可以給border-radius一個弧度像素值;
  • 現在給我們的貓咪圖片一個10pxborder-radius

注意:這一關中,是有多個接單方案的:

  1. .thick-green-border中添加border-radius
  2. .smaller-image中添加border-radius
過關條件
  • img元素需要有thick-green-border類;
  • 圖片應有一個10px的邊框弧度;
學會了什麼?

這關卡主要教會我們:

  1. 給屬性邊框弧度;

答案

「第十二關」實現圓形圖片

關卡名:Make Circular Images with a border-radius

知識點
  • CSS的border-radius屬性不止可以使用像素爲單位,我們還可以使用百分比;
過關目標
  • 給我們的貓咪圖片一個50%border-radius
過關條件
  • 圖片應有一個50%的邊框弧度;
  • 圖片的邊框弧度必須是一個百分比值50%
學會了什麼?

這關卡主要教會我們:

  1. 給元素添加百分比弧度值;

答案

「第十三關」給元素一個背景顏色

關卡名:Give a Background Color to a div Element

知識點
  • 我們可以使用background-color屬性來設置一個元素的背景顏色;
  • 舉例:如果我們想給一個元素綠色(green)的背景,我們就要給予這個元素一個background-color屬性;
.green-background {
  background-color: green;
}
過關目標

Create a class called silver-background with the background-color of silver. Assign this class to your div element.

  • 創建一個CSS類silver-background,其中加入background-color屬性和屬性值爲silver
  • 然後把這個類加入到div元素的class屬性中;
過關條件
  • div元素應有一個silver-background類;
  • div元素應有銀色(silver)背景顏色;
  • style標籤中應該有一個.silver-background類選擇器,並且有background-color屬性和屬性值爲silver
學會了什麼?

這關卡主要教會我們:

  1. 給元素添加背景顏色;

答案

「第十四關」給元素ID值

關卡名:Set the id of an Element

知識點
  • 除了classCSS類屬性,我們還可以給每一個HTML元素一個id屬性;
  • id屬性是有好幾個實用的用途的:我們可以用id選擇器來給一個元素CSS樣式屬性,同時也可以讓JavaScript找到指定id的元素,並且對此進行修改等;
  • 記住,id屬性的屬性值應該是唯一的;
  • 瀏覽器不會強制要求id的唯一性,但是在實踐中被廣大認可id是需要唯一的,所以不要在多個一個元素中賦予同一個id屬性;

舉例:在我們的h2元素中添加一個id屬性cat-photo-app

<h2 id="cat-photo-app">
過關目標
  • form元素添加一個id屬性值cat-photo-form
過關條件
  • 表格元素中需要有個id屬性值爲cat-photo-form
學會了什麼?

這關卡主要教會我們:

  1. 給元素添加id屬性;

答案

「第十五關」使用ID更改元素樣式

關卡名:Use an id Attribute to Style an Element

知識點
  • id屬性與CSS類一樣可以爲他們綁上CSS樣式;
  • 但是區別是id是無法複用,只能給予一個元素(源自於我們上一關所說的原因);
  • 在權重之中id在樣式表中相對比CSS類,它有更好的權重,如果classid的樣式同時給予一個元素,那id的樣式會覆蓋類的樣式;

舉例:我們現在給一個id屬性爲cat-photo-element,然後給這個id屬性在樣式表中綁定一個背景顏色background-color爲綠色green

#cat-photo-element {
  background-color: green;
}

注意:在我們的樣式表<style>中,我們用. + 類名來聲明類的樣式,但是如果是id的話我們會用# + id名來聲明id的樣式。

過關目標
  • 現在嘗試給我們的form元素一個id屬性,屬性值爲cat-photo-form
  • 並且在樣式表中給予這個id一個綠色(green)的背景顏色;
過關條件
  • form元素中應有一個id屬性爲cat-photo-form
  • form元素的背景顏色應該是綠色的;
  • form元素應有id屬性;
  • form元素中不能有class或者style
學會了什麼?

這關卡主要教會我們:

  1. 使用id屬性;
  2. 在樣式表中聲明id屬性的樣式;

答案

「第十六關」給元素添加內邊距

關卡名:Adjust the Padding of an Element

知識點
  • 我們把Cat Photo App放一邊,先來學習更多的HTML樣式;
  • 可能大家都注意到了,HTML的元素基本上都是一個個像積木一樣的正方形盒子組成的;
  • 在排版中最常用的三大屬性,它們是用來控制HTML元素之間的空隙的:padding(內邊距),margin(外邊距)和border( 邊框);
  • 一個元素的padding,控制一個元素內容四邊的空間,還有內容與border邊框的距離;
  • 在預覽區中的藍色與紅色盒子被包裹在一個黃色盒子之中,我們應該注意到,紅色盒子的padding比藍色盒子的邊距要寬;

如果想更深入的理解內容與marginpaddingborder之間距離,我們需要一個更好的圖解方式,請看下圖:

上圖中有3組顏色,從內到外:藍色content(內容部分),綠色部分是padding(內邊距),黃色部分是border(邊框),最外面的橙色部分是margin(外邊距)。通過這個圖,我們就能清晰理解這些邊距的實際產生的距離的效果。

  • 這裏我們可以看到,當我們加大藍色盒子的padding,盒子內容裏面的字體與邊框的距離就越遠;
過關目標

Change the padding of your blue box to match that of your red box.

  • 改變藍色盒子的padding,從而讓藍色盒子與紅色盒子的padding一致;
過關條件
  • 藍色盒子的padding應改爲20px
學會了什麼?

這關卡主要教會我們:

  1. 使用padding(內邊距),margin(外邊距)和border(邊框);

答案

「第十七關」調整元素外邊距

關卡名:Adjust the Margin of an Element

知識點
  • 一個元素的margin(外邊距),控制這個元素與周圍元素之間的空間;
  • 所以我們可以看到黃色盒子內的藍色盒子與紅色盒子,紅色盒子擁有一個更大的margin,同時讓紅色盒子看起來更小了;
  • 當我們加大藍色盒子的margin的時候,也會看到同等的變化。因爲藍色盒子與周邊元素的間距會加大,同時藍色盒子的content內容可以用的空間就需要伸縮適應。最後藍色盒子就會變小了;

爲了更好的理解爲什麼內容區域寬高會變動,我們先來看看紅色盒子的空間信息:

首先這個例子中,紅色盒子的content內容區域是沒有給寬高的,所以會根據瀏覽器窗口大小適應。也就是說,內容區域是一個彈性寬高盒子。這個時候我們給了20pxpadding5pxborder20pxmargin。那盒子的總寬高是多少?

這個時候盒子的總寬高 = content寬高 + padding + border + margin 對吧?

假設現在瀏覽器窗口的寬度是1000px,這裏我們先假設外層沒有一個黃色盒子,這個紅色盒子可以填滿這個瀏覽器寬度。這個時候紅色盒子的content寬度就是:

1000 - 20*2 (左右的margin外邊距) - 5*2(左右的border邊框) - 20*2(左右的padding內邊距) = 910px。

如果現在我把瀏覽器窗口變成800px呢?安裝剛剛的公式我們會得出710px,對內容部分少了200px。

好了按照我們剛剛的公式,現在瀏覽器窗口寬度不變,只把margin外邊距加大,這個時候內容是不是也會變?因爲最終內容區域的大小都是受到marginborderpadding的總額所影響的?所以在上面的例子裏面我們發現加大了藍色盒子的margin後,藍色盒子顯然是變小了。因爲我們加大了margin

同時也是因爲我們看到的盒子大小是基於盒子的邊框,不是真的在看盒子的content內容部分。

如果我們給盒子一個寬高後,我們加大padding時盒子就會變大。甚至有時候在排版的過程中,使用padding就會發現盒子會超出了父級的元素盒子。這裏我們可以深入解說一下CSS中的兩種盒模型

盒模型標準盒模型

  • 盒子寬度 = 內容的寬度
  • 盒子高度 = 內容的高度

其他間距都是額外加入的,會影響盒子總體呈現的寬高

如果不希望使用盒子的padding的時候影響盒子總體大小,我們就要把盒子變成IE盒模型

在盒子的CSS中添加box-sizing: border-box

盒模型IE盒模型

  • 盒子寬度 = border + padding + 內容的寬度
  • 盒子高度 = border + padding + 內容的高度

盒子的框高包含了邊框和內邊距,所以整體的盒子高度不受paddingborder影響。

過關目標
  • 改變藍色盒子的margin,從而讓藍色盒子和紅色盒子又一樣的展示效果;
過關條件
  • blue-box類應有20pxmargin
學會了什麼?

這關卡主要教會我們:

  1. margin的使用;
  2. padding對盒子的寬高的影響;
  3. 標準盒模型IE盒模型

答案

「第十八關」給元素負外邊框

關卡名:Add a Negative Margin to an Element

知識點
  • 一個元素的margin控制它的周邊與它的邊框之間的空隙;
  • 如果我們給一個元素一個負數的margin,這個元素會變大;

所以給一個元素負margin就會變大?是,也不是!但是爲什麼呢?margin是外邊框,不應該會對元素的內容產生大小變動呀?

要回答這個疑問,我們首先來看看改爲負margin之前和之後是怎麼樣的:

  • 首先第一最外層的黃色盒子沒有定義寬高,所以它是自適應瀏覽器窗口寬高
  • 第二我們沒有給藍色盒子定義寬高,所以它的內容寬高也是跟隨着父級寬高
  • 藍色盒子原本的margin20px,那盒子的寬度就是149 (內容) + 20+20 (左右內邊距) + 5+5 (左右邊框) = 199px,最後還有左右的20pxmargin
  • 藍色黑子換成了margin-15px後,這時寬度就是 219 (內容) + 20+20 (左右內邊距) + 5+5 (左右邊框) = 269px,最後左右的-15pxmargin
  • 以上就是最後在瀏覽器的盒子屬性的區別,這兩個之中哪個的數值變了呢?對內容的寬度變了!爲什麼呢?
  • 219 - 149 = 70px,那這70像素的增加是從哪裏來的呢?
  • 對的!就是-15px20px的區別。因爲藍色盒子沒有定義寬度,所以寬度是自適應的。從左右負15來算一共給這個盒子左右各增加了15像素的空間。然後原本是20像素的邊框現在沒有了,所以另外再加了左右20像素的距離。一共就是15+15+20+20 = 70。就是這樣我們的內容就多了70px的寬度,所以藍色盒子總體來說是不是寬度擴大了70px呢?懂了!

問題來了,爲什麼剛剛說給一個元素的margin變化時,會,也不會導致元素放大呢?主要原因是因爲我們這個例子中的藍色盒子沒有給寬度。如果給了寬度,盒子正數的margin和負數margin都不會影響這個盒子的寬的。所以只有當這個盒子的寬度是自適應的時候纔會導致盒子變大變小哦。

過關目標
  • 給藍色盒子一個負margin,讓它與紅色盒子的呈現樣式一樣;
  • 把藍色盒子的margin改爲-15px,從而讓藍色盒子與紅色盒子一樣佔了黃色盒子的總寬度;
過關條件
  • blue-gox的類應有一個-15pxmargin
學會了什麼?

這關卡主要教會我們:

  1. 給元素負margin

答案

「第十九關」給元素每個邊緣不同的內邊距

關卡名:Add Different Padding to Each Side of an Element

知識點
  • 有時候我們需要自定義一個元素,並且要給一個元素每個邊緣一個不同的padding
  • CSS讓我們可以控制一個元素4個邊的內邊距,控制的屬性分別是:padding-top (上)padding-right (右)padding-bottom (下)padding-left (左)
過關目標
  • 給予我們藍色盒子的頂部左邊40pxpadding, 然後底部右邊20px
過關條件
  • blue-box類中應有40pxpadding-top
  • blue-box類中應有20pxpadding-right
  • blue-box類中應有20pxpadding-bottom
  • blue-box類中應有40pxpadding-left
學會了什麼?

這關卡主要教會我們:

  1. 單獨給每一個邊緣不同的內邊距;

答案

「第二十關」給元素每個邊緣不同的外邊距

關卡名:Add Different Margins to Each Side of an Element

知識點
  • 有時候我們需要自定義一個元素,並且要給一個元素每個邊緣一個不同的margin
  • CSS讓我們可以控制一個元素4個邊的外邊距,控制的屬性分別是:margin-top (上)margin-right (右)margin-bottom (下)margin-left (左)
過關目標
  • 給予我們藍色盒子的頂部左邊40pxmargin, 然後底部右邊20px
過關條件
  • blue-box類中應有40pxmargin-top
  • blue-box類中應有20pxmargin-right
  • blue-box類中應有20pxmargin-bottom
  • blue-box類中應有40pxmargin-left
學會了什麼?

這關卡主要教會我們:

  1. 單獨給每一個邊緣不同的外邊距;

答案

「第二十一關」使用順時針語法指定元素內邊距

關卡名:Use Clockwise Notation to Specify the Padding of an Element

知識點
  • 除了使用padding-top (上)padding-right (右)padding-bottom (下)padding-left (左)來給一個元素特定的內邊距;
  • 我們還可以在一行內寫完一個元素的出內邊距:padding: 10px 20px 10px 20px;
  • 這裏面的四個數值順時針的從上到左旋轉來分配的:上,右,下,左;

其他語法:

/* 應用於四個邊 */
padding: 1em;

/* 垂直方向| 水平方向*/
padding: 5% 10%;

/* 頂部| 水平方向| 底部*/
padding: 1em 2em 2em; 

/* 頂部| 右邊| 底部| 左邊*/
padding: 2px 1em 0 1em;
過關目標
  • 順時針語法指定.blue-box類的頂部和左邊padding40px,然後底部和右邊padding20px
過關條件
  • blue-box類中應有40px的頂部padding
  • blue-box類中應有20px的右邊padding
  • blue-box類中應有20px的底部padding
  • blue-box類中應有40px的左邊padding
  • 使用順時針語法來分配padding
學會了什麼?

這關卡主要教會我們:

  1. 使用順時針語法給元素分配內邊距;

答案

「第二十二關」使用順時針語法指定元素外邊距

關卡名:Use Clockwise Notation to Specify the Margin of an Element

知識點
  • 除了padding可以使用順時針語法,margin也一樣可以;
  • 除了使用margin-top (上)margin-right (右)margin-bottom (下)margin-left (左)來給一個元素特定的外邊距;
  • 我們還可以在一行內寫完一個元素的出外邊距:margin: 10px 20px 10px 20px;
  • 這裏面的四個數值順時針的從上到左旋轉來分配的:上,右,下,左;

其他語法:

margin: 5%;                /* 所有的邊都是 5% 的邊距 */

margin: 10px;              /* 所有的邊都是 10像素 的邊距 */

margin: 1.6em 20px;        /* 上和下邊是 1.6字距, 左和右是 20像素 邊距 */

margin: 10px 3% 1em;       /* 上邊 10像素, 左和右 3%, 下邊 1字距 邊距 */

margin: 10px 3px 30px 5px; /* 上邊 10像素, 右邊 3像素, bottom 30px, left 5px margin */

margin: 1em auto;          /* 上和下邊 1字距 邊距, 該盒子是水平居中的 */

margin: auto;              /* 該盒子是水平居中的, 上下邊距爲0 */

在現代瀏覽器中,如果要把一些東西水平居中,使用 display:flex; justify-content: center; .

然而, 在一些老的瀏覽器,如IE8-9, 這些是不可用的. 想要把一個元素在其父元素中居中, 使用 margin: 0 auto;

過關目標
  • 順時針語法指定.blue-box類的頂部和左邊margin40px,然後底部和右邊margin20px
過關條件
  • blue-box類中應有40px的頂部margin
  • blue-box類中應有20px的右邊margin
  • blue-box類中應有20px的底部margin
  • blue-box類中應有40px的左邊margin
  • 使用順時針語法來分配margin
學會了什麼?

這關卡主要教會我們:

  1. 使用順時針語法給元素分配外邊距;

答案

「待續」總結

這周我們一起闖過了22關,下一期我們會一起把剩餘的22關完成。學習是一種像爬山一樣的過程,要經歷過漫長的上坡路,一步一個腳印。“路漫漫其修遠兮,吾將上下而求索。”, 在追尋知識的道路上,前方的道路還很漫長,但我們將百折不撓,不遺餘力地,上天下地的去追求和探索。讓我們繼續堅持學習,終身學習成長。在大前端的時代爬到技術的巔峯,做一個有深度的技術人員。

我是三鑽,一個在技術銀河中等和你們一起來終身漂泊學習。
點贊是力量,關注是認可,評論是關愛!下期再見 👋!

系列閱讀

  1. 🔥《勇闖28個關卡學會HTML與HTML5基礎》 — 這周我們一起闖過了22關,下一期我們會一起把剩餘的22關完成。學習是一種像爬山一樣的過程,要經歷過漫長的上坡路,一步一個腳印。“路漫漫其修遠兮,吾將上下而求索。”, 在追尋知識的道路上,前方的道路還很漫長,但我們將百折不撓,不遺餘力地,上天下地的去追求和探索。讓我們繼續堅持學習,終身學習成長。在大前端的時代爬到技術的巔峯,做一個有深度的技術人員。

推薦閱讀

  • 🔥《前端必看的8個HTML+CSS技巧》 — CSS是一個很獨特的語言。看起來非常簡單,但是某種特殊效果看似簡單,實現起來就頗有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧,一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們,重新燃起對前端排版和特效的熱愛和熱情!
  • 🔥《帶你體驗Vue2和Vue3開發組件有什麼區別》 — 使用Vue2和Vue3開發一個簡單的表格組件來展示一下Vue2和Vue3開發組件的區別。看完這文章後,你將會有一個概念Vue2和Vue3開發組件時的區別,並且爲Vue3的開發之路做好準備。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章