「前言」
歡迎回來三鑽的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樣式的方法。
- 我們可以在HTML元素行內的
style
中編寫樣式;- 在HTML文檔中添加
<style>
標籤,然後在標籤內編寫CSS代碼;- 把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
屬性值裏的樣式屬性應該以;
符號結束;
學會了什麼?
這關卡主要教會我們:
- 行內添加
style
樣式屬性; - 字體顏色樣式屬性
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
元素有接受標籤;
學會了什麼?
這關卡主要教會我們:
- 使用
style
元素 - CSS樣式元素規範
答案
「第三關」使用CSS類
關卡名:
Use a CSS Class to Style an Element
知識點
- CSS中的類是爲了解決服用樣式的問題;
類聲明例子:
<style>
.blue-text {
color: blue;
}
</style>
- 在
style
元素中我們編寫了一個.blue-text
CSS類(CSS類需要在我們的名字前加入.
符號, 然後CSS類的命名規範必須使用-
分割); - 接着我們可以把這個類加入HTML元素中,比如:
<h2 class="blue-text">CatPhotoApp</h2>
; - 只要給我們需要應用字體顏色爲藍色的HTML元素上加入
class="blue-text"
,即可獲得該CSS類的樣式屬性。 - 記住在HTML中加入類,是不需要
.
這個符號在最前面的。
過關目標
- 在
style
元素中,把h2
CSS選擇器改爲.red-text
; - 並且把顏色值從
blue
改爲red
;
過關條件
h2
元素的問題應該是紅色的;h2
元素應該擁有一個red-text
的類;style
樣式表中有定義一個.red-text
,並且樣式屬性color
的值爲red
;- 不允許在
h2
中使用行內style
屬性來改變元素的字體顏色;
學會了什麼?
這關卡主要教會我們:
- 在CSS樣式表中定義類;
- 在HTML元素中加入類;
- 用類改變HTML元素的樣式;
答案
「第四關」使用CSS類改變多個元素樣式
關卡名:
Change the Color of Text
知識點
- 一個類可以賦予給多個元素,讓所有被賦予同一個類的元素擁有同一套樣式;
幾年前
bootstrap
,就是結合很多這種分類好的的類,讓我們在HTML元素中組合使用就可以快速佈局網頁。所以合理的分類好不同種類的類,然後給他們一種特定用途,有利於CSS開發時提高代碼複用性,提高可讀性和可維護性。
過關目標
- 給代碼中第一個
p
元素也加入red-text
類;
過關條件
h2
元素的文字應該是紅色;h2
元素應該擁有一個red-text
類屬性;- 第一個
p
元素的內容應該是紅色; - 第二和第三個
p
元素的內容顏色應該不是紅色; - 第一個
p
元素應該擁有一個red-text
類屬性;
學會了什麼?
這關卡主要教會我們:
- 用類名對多個HTML元素賦予同一個樣式;
答案
「第五關」改變文字大小
關卡名:
Change the Color of Text
知識點
- 字體大小是
font-size
樣式屬性控制的;
h1 {
font-size: 30px;
}
過關目標
- 在
style
元素中,.red-text
下方加入p
元素選擇器; - 在
p
選擇器中加入font-size
樣式屬性,並且把值設置爲16px
(16像素);
過關條件
- 在
style
元素中爲p
元素的內容的字體改爲16px
的大小;
學會了什麼?
這關卡主要教會我們:
- 改變元素字體大小;
答案
「第六關」改變元素字體
關卡名:
Set the Font Family of an Element
知識點
- 使用
font-family
樣式屬性,我們可以定義一個元素所使用的字體; - 舉例,如果我們想
h2
元素使用sans-serif
字體,在CSS中需要這麼些:
h2 {
font-family: sans-serif;
}
過關目標
- 讓所有
p
元素使用monospace
字體;
過關條件
- 所有
p
元素都使用monospace
字體;
學會了什麼?
這關卡主要教會我們:
- 使用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-family
CSS規則,並且使用Lobster
字體。必須保證我們的h2
元素應用了這個字體定義。
過關條件
- 引入了谷歌字體庫中的
Lobster
字體; h2
元素中的字體使用了Lobster
字體;- 使用
h2
CSS選擇器的來改變字體; - 其他
p
元素應該保持原來的monospace
字體;
學會了什麼?
這關卡主要教會我們:
- 引入谷歌字體;
- 使用谷歌字體;
答案
「第八關」定義字體如何往後取用
關卡名:
Specify How Fonts Should Degrade
知識點
- 瀏覽器中有好幾個可用的默認的字體,最普通的字體有:
monospace
,serif
和sans-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
標籤的簽名加入<!--
和在結尾加入-->
; - 註釋的結尾必須有
-->
;
學會了什麼?
這關卡主要教會我們:
- 給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%;
學會了什麼?
這關卡主要教會我們:
- 控制元素寬度
答案
「第十關」添加元素邊框
關卡名:
Add Borders Around Your Elements
知識點
- CSS邊框有這些屬性:
style
,color
和width
; - 舉例:如果我們想給一個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寬的邊框;
- 圖片應有一個實線的邊框樣式;
- 圖片應有一個綠色的邊框樣式;
學會了什麼?
這關卡主要教會我們:
- 給元素添加邊框;
- 給邊框加入寬度,線的樣式和顏色;
答案
「第十一關」使用border-radius實現圓邊
關卡名:
Add Rounded Corners with border-radius
知識點
- 我們的喵咪圖片現在是直角邊的;
- 我們可以使用
border-radius
把圖片的四個角改圓邊;
過關目標
- 我們可以給
border-radius
一個弧度像素值; - 現在給我們的貓咪圖片一個
10px
的border-radius
;
注意:這一關中,是有多個接單方案的:
- 在
.thick-green-border
中添加border-radius
;- 在
.smaller-image
中添加border-radius
;
過關條件
img
元素需要有thick-green-border
類;- 圖片應有一個10px的邊框弧度;
學會了什麼?
這關卡主要教會我們:
- 給屬性邊框弧度;
答案
「第十二關」實現圓形圖片
關卡名:
Make Circular Images with a border-radius
知識點
- CSS的
border-radius
屬性不止可以使用像素爲單位,我們還可以使用百分比;
過關目標
- 給我們的貓咪圖片一個
50%
的border-radius
;
過關條件
- 圖片應有一個
50%
的邊框弧度; - 圖片的邊框弧度必須是一個百分比值
50%
;
學會了什麼?
這關卡主要教會我們:
- 給元素添加百分比弧度值;
答案
「第十三關」給元素一個背景顏色
關卡名:
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
;
學會了什麼?
這關卡主要教會我們:
- 給元素添加背景顏色;
答案
「第十四關」給元素ID值
關卡名:
Set the id of an Element
知識點
- 除了
class
CSS類屬性,我們還可以給每一個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
;
學會了什麼?
這關卡主要教會我們:
- 給元素添加
id
屬性;
答案
「第十五關」使用ID更改元素樣式
關卡名:
Use an id Attribute to Style an Element
知識點
id
屬性與CSS類一樣可以爲他們綁上CSS樣式;- 但是區別是
id
是無法複用,只能給予一個元素(源自於我們上一關所說的原因); - 在權重之中
id
在樣式表中相對比CSS類,它有更好的權重,如果class
和id
的樣式同時給予一個元素,那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
;
學會了什麼?
這關卡主要教會我們:
- 使用
id
屬性; - 在樣式表中聲明
id
屬性的樣式;
答案
「第十六關」給元素添加內邊距
關卡名:
Adjust the Padding of an Element
知識點
- 我們把Cat Photo App放一邊,先來學習更多的HTML樣式;
- 可能大家都注意到了,HTML的元素基本上都是一個個像積木一樣的正方形盒子組成的;
- 在排版中最常用的三大屬性,它們是用來控制HTML元素之間的空隙的:
padding
(內邊距),margin
(外邊距)和border
( 邊框); - 一個元素的
padding
,控制一個元素內容四邊的空間,還有內容與border
邊框的距離; - 在預覽區中的藍色與紅色盒子被包裹在一個黃色盒子之中,我們應該注意到,紅色盒子的
padding
比藍色盒子的邊距要寬;
如果想更深入的理解內容與margin
,padding
和border
之間距離,我們需要一個更好的圖解方式,請看下圖:
上圖中有3組顏色,從內到外:藍色是content
(內容部分),綠色部分是padding
(內邊距),黃色部分是border
(邊框),最外面的橙色部分是margin
(外邊距)。通過這個圖,我們就能清晰理解這些邊距的實際產生的距離的效果。
- 這裏我們可以看到,當我們加大藍色盒子的
padding
,盒子內容裏面的字體與邊框的距離就越遠;
過關目標
Change the padding
of your blue box to match that of your red box.
- 改變藍色盒子的
padding
,從而讓藍色盒子與紅色盒子的padding
一致;
過關條件
- 藍色盒子的
padding
應改爲20px
;
學會了什麼?
這關卡主要教會我們:
- 使用
padding
(內邊距),margin
(外邊距)和border
(邊框);
答案
「第十七關」調整元素外邊距
關卡名:
Adjust the Margin of an Element
知識點
- 一個元素的
margin
(外邊距),控制這個元素與周圍元素之間的空間; - 所以我們可以看到黃色盒子內的藍色盒子與紅色盒子,紅色盒子擁有一個更大的
margin
,同時讓紅色盒子看起來更小了; - 當我們加大藍色盒子的
margin
的時候,也會看到同等的變化。因爲藍色盒子與周邊元素的間距會加大,同時藍色盒子的content
內容可以用的空間就需要伸縮適應。最後藍色盒子就會變小了;
爲了更好的理解爲什麼內容區域寬高會變動,我們先來看看紅色盒子的空間信息:
首先這個例子中,紅色盒子的content
內容區域是沒有給寬高的,所以會根據瀏覽器窗口大小適應。也就是說,內容區域是一個彈性寬高盒子。這個時候我們給了20px
的padding
,5px
的border
,20px
的margin
。那盒子的總寬高是多少?
這個時候盒子的總寬高 = content寬高
+ padding
+ border
+ margin
對吧?
假設現在瀏覽器窗口的寬度是1000px
,這裏我們先假設外層沒有一個黃色盒子,這個紅色盒子可以填滿這個瀏覽器寬度。這個時候紅色盒子的content
寬度就是:
1000 - 20*2 (左右的
margin
外邊距) - 5*2(左右的border
邊框) - 20*2(左右的padding
內邊距) = 910px。
如果現在我把瀏覽器窗口變成800px呢?安裝剛剛的公式我們會得出710px,對內容部分少了200px。
好了按照我們剛剛的公式,現在瀏覽器窗口寬度不變,只把margin
外邊距加大,這個時候內容是不是也會變?因爲最終內容區域的大小都是受到margin
,border
和padding
的總額所影響的?所以在上面的例子裏面我們發現加大了藍色盒子的margin
後,藍色盒子顯然是變小了。因爲我們加大了margin
。
同時也是因爲我們看到的盒子大小是基於盒子的邊框,不是真的在看盒子的content
內容部分。
如果我們給盒子一個寬高後,我們加大padding
時盒子就會變大。甚至有時候在排版的過程中,使用padding
就會發現盒子會超出了父級的元素盒子。這裏我們可以深入解說一下CSS中的兩種盒模型
:
盒模型:標準盒模型
- 盒子寬度 = 內容的寬度
- 盒子高度 = 內容的高度
其他間距都是額外加入的,會影響盒子總體呈現的寬高
如果不希望使用盒子的
padding
的時候影響盒子總體大小,我們就要把盒子變成IE盒模型
在盒子的CSS中添加
box-sizing: border-box
盒模型:IE盒模型
- 盒子寬度 = border + padding + 內容的寬度
- 盒子高度 = border + padding + 內容的高度
盒子的框高包含了邊框和內邊距,所以整體的盒子高度不受
padding
和border
影響。
過關目標
- 改變藍色盒子的
margin
,從而讓藍色盒子和紅色盒子又一樣的展示效果;
過關條件
blue-box
類應有20px
的margin
;
學會了什麼?
這關卡主要教會我們:
margin
的使用;padding
對盒子的寬高的影響;標準盒模型
和IE盒模型
;
答案
「第十八關」給元素負外邊框
關卡名:
Add a Negative Margin to an Element
知識點
- 一個元素的
margin
控制它的周邊與它的邊框之間的空隙; - 如果我們給一個元素一個負數的
margin
,這個元素會變大;
所以給一個元素負
margin
就會變大?是,也不是!但是爲什麼呢?margin
是外邊框,不應該會對元素的內容產生大小變動呀?
要回答這個疑問,我們首先來看看改爲負margin
之前和之後是怎麼樣的:
- 首先第一最外層的黃色盒子沒有定義寬高,所以它是自適應瀏覽器窗口寬高;
- 第二我們沒有給藍色盒子定義寬高,所以它的內容寬高也是跟隨着父級寬高;
- 藍色盒子原本的
margin
是20px
,那盒子的寬度就是149 (內容)
+20+20 (左右內邊距)
+5+5 (左右邊框)
=199px
,最後還有左右的20px
的margin
; - 藍色黑子換成了
margin
爲-15px
後,這時寬度就是219 (內容)
+20+20 (左右內邊距)
+5+5 (左右邊框)
=269px
,最後左右的-15px
的margin
; - 以上就是最後在瀏覽器的盒子屬性的區別,這兩個之中哪個的數值變了呢?對內容的寬度變了!爲什麼呢?
219
-149
=70px
,那這70像素的增加是從哪裏來的呢?- 對的!就是
-15px
和20px
的區別。因爲藍色盒子沒有定義寬度,所以寬度是自適應的。從左右負15來算一共給這個盒子左右各增加了15像素的空間。然後原本是20像素的邊框現在沒有了,所以另外再加了左右20像素的距離。一共就是15+15+20+20
=70
。就是這樣我們的內容就多了70px
的寬度,所以藍色盒子總體來說是不是寬度擴大了70px
呢?懂了!
問題來了,爲什麼剛剛說給一個元素的
margin
變化時,會,也不會
導致元素放大呢?主要原因是因爲我們這個例子中的藍色盒子沒有給寬度。如果給了寬度,盒子正數的margin
和負數margin
都不會影響這個盒子的寬的。所以只有當這個盒子的寬度是自適應的時候纔會導致盒子變大變小哦。
過關目標
- 給藍色盒子一個負
margin
,讓它與紅色盒子的呈現樣式一樣; - 把藍色盒子的
margin
改爲-15px
,從而讓藍色盒子與紅色盒子一樣佔了黃色盒子的總寬度;
過關條件
blue-gox
的類應有一個-15px
的margin
;
學會了什麼?
這關卡主要教會我們:
- 給元素負
margin
;
答案
「第十九關」給元素每個邊緣不同的內邊距
關卡名:
Add Different Padding to Each Side of an Element
知識點
- 有時候我們需要自定義一個元素,並且要給一個元素每個邊緣一個不同的
padding
; - CSS讓我們可以控制一個元素4個邊的內邊距,控制的屬性分別是:
padding-top (上)
、padding-right (右)
、padding-bottom (下)
和padding-left (左)
;
過關目標
- 給予我們藍色盒子的頂部與左邊
40px
的padding
, 然後底部和右邊20px
;
過關條件
blue-box
類中應有40px
的padding-top
;blue-box
類中應有20px
的padding-right
;blue-box
類中應有20px
的padding-bottom
;blue-box
類中應有40px
的padding-left
;
學會了什麼?
這關卡主要教會我們:
- 單獨給每一個邊緣不同的內邊距;
答案
「第二十關」給元素每個邊緣不同的外邊距
關卡名:
Add Different Margins to Each Side of an Element
知識點
- 有時候我們需要自定義一個元素,並且要給一個元素每個邊緣一個不同的
margin
; - CSS讓我們可以控制一個元素4個邊的外邊距,控制的屬性分別是:
margin-top (上)
、margin-right (右)
、margin-bottom (下)
和margin-left (左)
;
過關目標
- 給予我們藍色盒子的頂部與左邊
40px
的margin
, 然後底部和右邊20px
;
過關條件
blue-box
類中應有40px
的margin-top
;blue-box
類中應有20px
的margin-right
;blue-box
類中應有20px
的margin-bottom
;blue-box
類中應有40px
的margin-left
;
學會了什麼?
這關卡主要教會我們:
- 單獨給每一個邊緣不同的外邊距;
答案
「第二十一關」使用順時針語法指定元素內邊距
關卡名:
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
類的頂部和左邊padding
爲40px
,然後底部和右邊padding
爲20px
;
過關條件
blue-box
類中應有40px
的頂部padding
;blue-box
類中應有20px
的右邊padding
;blue-box
類中應有20px
的底部padding
;blue-box
類中應有40px
的左邊padding
;- 使用順時針語法來分配
padding
;
學會了什麼?
這關卡主要教會我們:
- 使用順時針語法給元素分配內邊距;
答案
「第二十二關」使用順時針語法指定元素外邊距
關卡名:
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
類的頂部和左邊margin
爲40px
,然後底部和右邊margin
爲20px
;
過關條件
blue-box
類中應有40px
的頂部margin
;blue-box
類中應有20px
的右邊margin
;blue-box
類中應有20px
的底部margin
;blue-box
類中應有40px
的左邊margin
;- 使用順時針語法來分配
margin
;
學會了什麼?
這關卡主要教會我們:
- 使用順時針語法給元素分配外邊距;
答案
「待續」總結
這周我們一起闖過了22關,下一期我們會一起把剩餘的22關完成。學習是一種像爬山一樣的過程,要經歷過漫長的上坡路,一步一個腳印。“路漫漫其修遠兮,吾將上下而求索。”, 在追尋知識的道路上,前方的道路還很漫長,但我們將百折不撓,不遺餘力地,上天下地的去追求和探索。讓我們繼續堅持學習,終身學習成長。在大前端的時代爬到技術的巔峯,做一個有深度的技術人員。
我是三鑽,一個在技術銀河中等和你們一起來終身漂泊學習。
點贊是力量,關注是認可,評論是關愛!下期再見 👋!
系列閱讀
- 🔥《勇闖28個關卡學會HTML與HTML5基礎》 — 這周我們一起闖過了22關,下一期我們會一起把剩餘的22關完成。學習是一種像爬山一樣的過程,要經歷過漫長的上坡路,一步一個腳印。“路漫漫其修遠兮,吾將上下而求索。”, 在追尋知識的道路上,前方的道路還很漫長,但我們將百折不撓,不遺餘力地,上天下地的去追求和探索。讓我們繼續堅持學習,終身學習成長。在大前端的時代爬到技術的巔峯,做一個有深度的技術人員。
推薦閱讀
- 🔥《前端必看的8個HTML+CSS技巧》 — CSS是一個很獨特的語言。看起來非常簡單,但是某種特殊效果看似簡單,實現起來就頗有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧,一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們,重新燃起對前端排版和特效的熱愛和熱情!
- 🔥《帶你體驗Vue2和Vue3開發組件有什麼區別》 — 使用Vue2和Vue3開發一個簡單的表格組件來展示一下Vue2和Vue3開發組件的區別。看完這文章後,你將會有一個概念Vue2和Vue3開發組件時的區別,並且爲Vue3的開發之路做好準備。