勇闖44關深刻淺出CSS基礎之一 ｜ FCC前端教程

時間  2020-07-20
標籤 深刻 css 基礎 之一 fcc 前端 教程 欄目 CSS 简体版
原文   原文鏈接

「前言」

歡迎回來三鑽的FCC前端教程，上一篇文章咱們經過28關學會了HTML與HTML5網頁開發基礎。這一期咱們一塊兒攻破前端第二大知識點《CSS基礎入門》。由於這一課一共有44關，我把文章分紅兩期更新。敬請期待！css

「CSS基礎知識」

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

理解CSS

以上是一個官方的定義。咱們用一個更簡單的方式理解CSS究竟是一個什麼東東：前端

若是HTML是骨架，那CSS就是裝飾這個骨架的一層皮和身上的裝飾品。咱們能夠經過CSS控制皮膚的顏色，毛孔的粗細。甚至還能夠控制咱們裝飾品上的特效，動效等等（有LED燈的口罩也是一種特效）。web

迴歸HTML中的CSS，咱們可使用CSS控制哪些東西呢？bootstrap

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

應用方式

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

  1. 咱們能夠在HTML元素行內的style中編寫樣式；
  2. 在HTML文檔中添加<style>標籤，而後在標籤內編寫CSS代碼；
  3. 把CSS樣式單獨寫入一個CSS樣式文件，而後在須要使用的HTML文檔中使用<link>引入。

通常項目中都會選擇使用第三種方式，由於比較大型的前端頁面，不少樣式都是有重複性的，應用引入型的CSS樣式，咱們就能夠把通用的寫在一塊兒而後在全部HTML中引入便可，不須要重複編寫。而且能夠把CSS分類存放，提升可讀性和可維護性。瀏覽器

CSS原理

CSS背後的原理是，使用CSS選擇器選中DOM（文檔對象模型）裏面的某個HTML元素。而後將各類CSS樣式和屬性應用到該元素中，從而改變元素在頁面中的展示方式或者樣式。前端框架

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

「第一關」改變文字顏色

關卡名：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元素內的字體改變爲藍色;
過關條件
  • h2元素中的style屬性須要被移除；
  • 須要建立一個style元素；
  • h2元素中的文字應該是藍色的；
  • 樣式表中的樣式屬性都應該遵循規範，有大括號和結束時的分號；
  • 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, 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標籤的簽名加入<!--和在結尾加入-->；
  • 註釋的結尾必須有-->；
學會了什麼？

這關卡主要教會咱們：

  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, 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寬的邊框；
  • 圖片應有一個實線的邊框樣式；
  • 圖片應有一個綠色的邊框樣式；
學會了什麼？

這關卡主要教會咱們：

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

答案

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

關卡名：Add Rounded Corners with border-radius

知識點
  • 咱們的喵咪圖片如今是直角邊的；
  • 咱們可使用border-radius把圖片的四個角改圓邊；
過關目標
  • 咱們能夠給border-radius一個弧度像素值；
  • 如今給咱們的貓咪圖片一個10px的border-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類，它有更好的權重，若是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；
學會了什麼？

這關卡主要教會咱們：

  1. 使用id屬性；
  2. 在樣式表中聲明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；
學會了什麼？

這關卡主要教會咱們：

  1. 使用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；
學會了什麼？

這關卡主要教會咱們：

  1. margin的使用；
  2. padding對盒子的寬高的影響；
  3. 標準盒模型和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；
學會了什麼？

這關卡主要教會咱們：

  1. 給元素負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；
學會了什麼？

這關卡主要教會咱們：

  1. 單獨給每個邊緣不一樣的內邊距；

答案

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

關卡名：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；
學會了什麼？

這關卡主要教會咱們：

  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類的頂部和左邊padding爲40px，而後底部和右邊padding爲20px；
過關條件
  • 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類的頂部和左邊margin爲40px，而後底部和右邊margin爲20px；
過關條件
  • 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的開發之路作好準備。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程