很多前端初學(xué)者對 CSS 表示很頭大，咨詢w3cschool小獅妹”如何學(xué)習(xí) CSS “悲雳。總結(jié)發(fā)現(xiàn)一部分原因是由于我們對 CSS 沒有很好的認(rèn)識沾乘。雖然 CSS 只是前端工作的一小部分怜奖，但是它直接關(guān)系到網(wǎng)頁最終顯示效果，很值得我們?nèi)W(xué)習(xí)翅阵。
本文主要概述 CSS 的一些常見基礎(chǔ)知識歪玲，幫助大家更好的理解 CSS 。
什么是 CSS掷匠？
CSS（層疊樣式表）——英文 Cascading Style Sheets 的縮寫滥崩，是一種計算機(jī)標(biāo)記語言，用來表現(xiàn) HTML （標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或 XML （標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式讹语。
CSS 知識點太多記不赘破ぁ？
CSS 知識點確實很多，我們只需要學(xué)習(xí)并理解它的基礎(chǔ)知識和原理短条，需要用到的時候再到w3cschool 查詢CSS參考手冊 导匣，不需要學(xué)習(xí)完所有的屬性和值，但是學(xué)習(xí) CSS 要有一些前端基礎(chǔ)茸时，如果沒有這些基礎(chǔ)贡定，您將很難理解它，你可以先在W3Cschool上學(xué)習(xí)HTML 可都。 這樣可以節(jié)省大量時間缓待、少走很多彎路。
認(rèn)識選擇器（SELECTORS）
HTML 頁面中的元素是通過 CSS 選擇器 來進(jìn)行控制的渠牲，可以實現(xiàn)一對一旋炒，一對多或者多對一的控制，學(xué)習(xí) CSS 首先要掌握的就是選擇器签杈。一般使用 class 選擇器（程序中稱“類選擇器”）瘫镇，或直接在 body 中使用 HTML 元素(elements) （指的是從開始標(biāo)簽(start tag)到結(jié)束標(biāo)簽(end tag)的所有代碼。）來設(shè)置樣式(Style)芹壕，但是一些更復(fù)雜的操作就需要更高級的選擇器來實現(xiàn)了汇四，如一些對象直接位于元素之后，或者是要選擇表格中的奇數(shù)行踢涌，就需要根據(jù)元素在文檔中的位置來選擇元素通孽。
這些選擇器屬于 CSS3 規(guī)范的一部分（你可能聽說過它們被稱為 CSS3 選擇器）具有出色的瀏覽器支持。 有關(guān)可以使用的各種選擇器的詳細(xì)信息睁壁，請參閱W3Cschool的 CSS 選擇器 背苦。
有些選擇器的行為就好像你已經(jīng)將“類”（ class） 應(yīng)用于文檔中的某些內(nèi)容一樣。 例如p:first-child就像你在第一個p元素中添加了一個“類”一樣潘明，這些被稱為“偽對象選擇符”(Pseudo-Element Selectors)行剂。 “偽對象選擇符”的作用類似于動態(tài)插入元素，例如::first-line的作用與用span 包裹第一行文本類似钳降。但是厚宰，如果該行的長度發(fā)生變化，它將重新應(yīng)用遂填，如果插入該元素铲觉，就不會出現(xiàn)這種情況。 現(xiàn)在你可能會覺得這些選擇器很復(fù)雜吓坚， 下面示例中是一個用偽類(Pseudo-class ) 的偽元素(Pseudo Element) 例子撵幽。 我們使用 :first-child 偽類定位第一個 p 元素，然后 ::first-line 選擇器選擇該元素的第一行礁击，就好像在第一行周圍添加了一個<span>以使其變粗并更改顏色一樣盐杂。
HTML代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>認(rèn)識CSS選擇器（SELECTORS）- 編程獅(w3cschool.cn)</title>
<style type="text/css">
@import url("style/style.css");
</style>
</head>
<body>
<div class="container">
<p>大學(xué)之道逗载，在明明德，在親民链烈，在止于至善厉斟。</p>
<p>知止而后有定，定而后能靜测垛，靜而后能安捏膨，安而后能慮，慮而后能得食侮。物有本末，事有終始目胡。知所先后锯七，則近道矣。</p>
<p>古之欲明明德于天下者誉己，先治其國眉尸；欲治其國者，先齊其家巨双；欲齊其家者噪猾，先修其身；欲修其身者筑累，先正其心袱蜡；欲正其心者，先誠其意慢宗；欲誠其意者坪蚁，先致其知。致知在格物镜沽。物格而后知至敏晤，知至而后意誠，意誠而后心正缅茉，心正而后身修嘴脾，身修而后家齊，家齊而后國治蔬墩，國治而后天下平译打。自天子以至于庶人，壹是皆以修身為本筹我。</p>
<p>其本亂而末治者扶平，否矣。其所厚者薄蔬蕊，而其所薄者厚结澄，未之有也哥谷。</p>
</div>
</body>
</html>
CSS代碼：
body {
padding: 20px;
font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
background-color: wheat;
}
* {box-sizing: border-box;}
p {
margin: 0 0 1.7em 0;
}
.container {
border: 1px solid rgb(254,106,0);
border-radius: .5em;
padding: 20px;
column-count: 1;
}
.container p:first-child::first-line {
font-weight: bold;
color: rgb(254,106,0);
}
效果：
繼承和層疊（INHERITANCE AND THE CASCADE）
層疊定義了一個元素應(yīng)用了多個樣式規(guī)則時，應(yīng)該哪個規(guī)則優(yōu)先應(yīng)用麻献。 如果你無法理解為什么某些 CSS 似乎沒有應(yīng)用的情況们妥，那可能是層疊沒有運用好。 層疊與繼承緊密相關(guān)勉吻，繼承定義了子元素可以繼承父元素的樣式屬性监婶。 它還與特異性有關(guān)，不同的選擇器具有不同的特異性齿桃，當(dāng)有幾個選擇器可以應(yīng)用于一個元素時惑惶，繼承可以決定應(yīng)用哪個規(guī)則。
注意：為了理解這些內(nèi)容短纵，建議閱讀 W3Cschool 中的 CSS 樣式級聯(lián)带污。
如果你正在嘗試將一些 CSS 應(yīng)用于一個元素，那么你的瀏覽器開發(fā)者工具（DevTools）是最好的選擇香到∮慵剑看看下面這個例子，我用元素選擇器 h1 將 h1 標(biāo)題設(shè)置為橙色悠就。同時千绪，我也使用類選擇器將h1 標(biāo)題設(shè)置為紫色。 由于類的優(yōu)先級更高梗脾，因此h1標(biāo)題是紫色的荸型。 在開發(fā)者工具中，您可以看到元素選擇器被劃掉了藐唠，因為它沒有被應(yīng)用帆疟。 一旦你看到瀏覽器正在獲取你的 CSS（但其他東西已經(jīng)推翻了它），那么你可以開始找出原因了宇立。
HTML代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>繼承和層疊 - 編程獅(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1 class="greatlearning">大學(xué)</h1>
<p>大學(xué)之道踪宠，在明明德，在親民妈嘹，在止于至善柳琢。</p>
<p>知止而后有定，定而后能靜润脸，靜而后能安柬脸，安而后能慮，慮而后能得毙驯。物有本末倒堕，事有終始。知所先后爆价，則近道矣垦巴。</p>
<p>古之欲明明德于天下者媳搪，先治其國；欲治其國者骤宣，先齊其家秦爆；欲齊其家者，先修其身憔披；欲修其身者等限，先正其心；欲正其心者芬膝，先誠其意望门；欲誠其意者，先致其知锰霜。致知在格物怒允。物格而后知至，知至而后意誠锈遥，意誠而后心正，心正而后身修勘畔，身修而后家齊所灸，家齊而后國治，國治而后天下平炫七。自天子以至于庶人爬立，壹是皆以修身為本。</p>
<p>其本亂而末治者万哪，否矣侠驯。其所厚者薄，而其所薄者厚奕巍，未之有也吟策。</p>
</div>
</body>
</html>
CSS代碼：
body {
padding: 20px;
font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
background-color: wheat;
}
* {box-sizing: border-box;}
p {
margin: 0 0 1.7em 0;
}
.container {
border: 1px solid rgb(254,106,0);
border-radius: .5em;
padding: 20px;
column-count: 1;
}
.greatlearning {
color: rebeccapurple;
}
h1 {
color: orange;
}
效果：
盒模型（Box Model ）
css將html元素看作一個個盒子，來設(shè)計和布局的止。盒子有它們的屬性檩坚，盒子之間也可嵌套。標(biāo)準(zhǔn)的 CSS 盒模型 (CSS Box Model) 采用你給定元素的寬度诅福，然后將內(nèi)邊框和邊框添加到該寬度上——這意味著元素占用的空間大于給定的寬度匾委。
- 屬性：margin、padding氓润、border赂乐、content
- 根據(jù)display屬性值的不同，如咖气，block\\inline-block\\inline（默認(rèn)）挨措，可設(shè)置為塊模型\\內(nèi)聯(lián)塊模型\\內(nèi)聯(lián)模型
- 分類：標(biāo)準(zhǔn)模型挖滤、IE模型（替代盒子模型）
除了標(biāo)準(zhǔn)盒子模型外還有一個盒子模型叫 IE 模型（替代盒子模型），盒子的寬度是頁面上可見框的寬度运嗜，因此內(nèi)容區(qū)域的寬度是該寬度減去填充和邊框的寬度壶辜。詳細(xì)請查閱W3Cschool上的CSS Box Model (盒子模型) 。
下面演示兩個盒子担租， 兩者的寬度均為200像素砸民，邊框為1像素，內(nèi)邊距為20像素奋救。 第一個框使用標(biāo)準(zhǔn)盒子模型岭参，因此占用總寬度為 242 像素，第二個框使用替代盒子模型尝艘，因此實際上是 200 像素寬演侯。
HTML代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 盒模型 -編程獅(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="box">
我是標(biāo)準(zhǔn)盒子模型。
</div>
<div class="box box2">
我是替代盒子模型背亥。
</div>
</body>
</html>
CSS代碼：
body {
padding: 20px;
font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
background-color: wheat;
}
p {
margin: 0 0 1em 0;
}
.box {
border: 1px solid rgb(254,106,0);
border-radius: .5em;
padding: 20px;
width: 200px;
margin-bottom: 2em;
}
.box2 {
box-sizing: border-box;
}
效果：
瀏覽器開發(fā)者工具(DevTools)可以再次幫助你了解正在使用的盒子模型秒际。 在下圖中，我使用火狐瀏覽器的開發(fā)者工具使用默認(rèn)的 content-box盒模型工具狡汉。 工具告訴我這是正在使用的盒模型娄徊，我可以看到大小以及如何將邊框和內(nèi)邊框添加到指定的寬度。
DevTools可幫助您了解為什么盒具有一定大小以及所使用的盒模型
注意：在 IE8 以前盾戴，如果想要兼容的話寄锐，就需要用 W3C 標(biāo)準(zhǔn)，聲明尖啡。在 IE8+ 橄仆，瀏覽器中使用哪個盒模型可以由 box-sizing 控制，默認(rèn)值為 content-box衅斩，即標(biāo)準(zhǔn)盒模型盆顾。
在 W3Cschool的 CSS Box Model 中，有關(guān)于盒模型矛渴、盒子尺寸詳細(xì)說明椎扬。
常規(guī)流（normal flow）
也有人翻譯為“文檔流”，具體叫什么名字不重要具温，我們理解它的原理就行了蚕涤。標(biāo)題和段落將以新行開始，單詞顯示為句子铣猩，并且它們之間只有一個空格揖铜。用于格式化的標(biāo)簽（例如em）不會破壞句子流。此內(nèi)容以“常規(guī)流(normal flow)”或“塊流布局(Block Flow Layout)”顯示达皿。內(nèi)容的每個部分都被描述為“在流中(in flow)”天吓；它知道其余內(nèi)容贿肩，因此不會重疊。
我們要接受這種行為龄寞，學(xué)起來才會變得更加輕松汰规。這是為什么從一個正確標(biāo)記的HTML文檔開始很有意義的原因之一，由于瀏覽器遵守常規(guī)流和內(nèi)置樣式表物邑，你的內(nèi)容從可讀的地方開始溜哮。
格式化上下文（FORMATTING CONTEXTS）
一旦文檔的內(nèi)容處于正常流程中，您可能希望更改其中一些內(nèi)容的外觀色解。 你可以通過更改元素的格式上下文來完成此操作茂嗓。 舉個一個非常簡單的示例，如果你希望所有段落連在一起而不是從新行開始科阎，你可以設(shè)置 p 元素的樣式屬性display:inline 述吸，將 p 元素由塊級元素變成內(nèi)聯(lián)元素。
本質(zhì)上锣笨，格式化上下文定義了外部和內(nèi)部類型蝌矛。外部控制元素與頁面上其他元素的行為，內(nèi)部控制子元素的外觀错英。例如朴读，當(dāng)你設(shè)置 display:flex ，你在設(shè)置外部為塊格式化上下文走趋，設(shè)置子元素為 flex 格式化上下文。
注意：最新版本的 Display 規(guī)范改變了
display的值噪伊，顯式聲明外部和內(nèi)部的類型簿煌。因此，將你可能會聲明display:block flex;（外部為block鉴吹，內(nèi)部為flex）姨伟。
在W3Cschool的 CSS display顯示 上閱讀更多關(guān)于 display的信息。
在流中或脫離流（BEING IN OR OUT OF FLOW）
CSS 中的元素被描述為“在流中(in flow)”或“脫離流(out of flow)”豆励。流中的元素被賦予空間夺荒，并且空間被流中的其他元素所影響。 如果通過浮動或定位元素使元素脫離流良蒸，則該元素的空間將不再受到其他流元素的影響技扼。
對于絕對定位的元素，是最明顯的嫩痰。 如果你設(shè)置一個元素 position: absolute 剿吻，該元素會從流中脫離，你需要確保這個元素不會與流中的元素重疊串纺，且不影響你布局的其他部分的可讀性丽旅。
HTML代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS flow - 編程獅(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<p>子曰：“學(xué)而時習(xí)之椰棘，不亦說乎？有朋自遠(yuǎn)方來榄笙，不亦樂乎邪狞？人不知而不慍，不亦君子乎茅撞？</p>
<p>有子曰:“其為人也孝弟而好犯上者帆卓，鮮矣；不好犯上而好作亂者乡翅，未之有也鳞疲。君子務(wù)本，本立而道生蠕蚜。孝弟也者尚洽，其為仁之本與!”</p>
<p>子曰:“巧言令色，鮮矣仁靶累！”</p>
<p>曾子曰“吾日三省吾身:為人謀而不忠乎?與朋友交而不信乎?傳不習(xí)乎?”</p>
<p>子曰:“道千乘之國,敬事而信腺毫，節(jié)用而愛人，使民以時挣柬〕本疲”</p>
<p>子曰：“弟子入則孝，出則弟邪蛔，謹(jǐn)而信急黎，泛愛眾，而親仁侧到。行有余力勃教，則以學(xué)文〗晨梗”</p>
<p>子夏曰：“賢賢易色故源；事父母，能竭其力汞贸；事君绳军，能致其身；與朋友交矢腻，言而有信门驾。雖曰未學(xué)，吾必謂之學(xué)矣多柑×匝洌”</p>
<p>子曰：“君子不重則不威，學(xué)則不固。主忠信诫隅，無友不如己者腐魂，過則勿憚改≈鹞常”</p>
<p>曾子曰：“慎終追遠(yuǎn)蛔屹，民德歸厚矣』砩”</p>
<p>子禽問于子貢曰：“夫子至于是邦也兔毒，必聞其政，求之與甸箱，抑與之與育叁？”子貢曰：“夫子溫、良芍殖、恭豪嗽、儉、讓以得之豌骏。夫子之求之也龟梦，其諸異乎人之求之與？”</p>
<p>子曰：“父在窃躲，觀其志计贰。父沒，觀其行蒂窒；三年無改于父之道躁倒，可謂孝矣∪髯粒”</p>
<p>有子曰：“禮之用樱溉，和為貴。先王之道纬凤，斯為美，小大由之撩嚼。有所不行停士，知和而和，不以禮節(jié)之完丽，亦不可行也恋技。”</p>
<p>有子曰：“信近于義逻族，言可復(fù)也蜻底。恭近于禮，遠(yuǎn)恥辱也聘鳞。因不失其親薄辅，亦可宗也要拂。”</p>
<p>子曰：“君子食無求飽站楚，居無求安脱惰，敏于事而慎于言，就有道而正焉窿春±唬可謂好學(xué)也已【善颍”</p>
<p>子貢曰：“貧而無諂蔚润，富而無驕，何如尺栖？”子曰：“可也嫡纠。未若貧而樂，富而好禮者也决瞳』踽悖”子貢曰：“《詩》云：‘如切如磋，如琢如磨’皮胡，其斯之謂與痴颊？”子曰：“賜也，始可與言《詩》已矣屡贺，告諸往而知來者蠢棱。”</p>
<p>子曰：“不患人之不己知甩栈，患不知人也泻仙。”</p>
<div class="item">絕對定位和脫離流量没。</div>
</div>
</body>
</html>
CSS代碼：
body {
padding: 20px;
font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
background-color: wheat;
}
* {box-sizing: border-box;}
p {
margin: 0 0 1em 0;
}
.container {
border: 1px solid rgb(254,106,0);
border-radius: .5em;
padding: 10px;
column-count: 2;
max-width: 400px;
position: relative;
}
.item {
border-radius:.5em;
position: absolute;
top: 10px;
left: 20px;
background-color: rgba(254,106,0,.9);
color: #fff;
padding: 20px;
width: 200px;
}
效果：
然而玉转，浮動元素也會從流中脫離，但后面的元素的文本將環(huán)繞該浮動元素殴蹄。你可以設(shè)置后面元素的背景顏色究抓，你會看到他們會上升并占用了原來浮動元素原來的空間。
HTML代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS flow - 編程獅(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="item">浮動和脫離流</div>
<p>子曰：“學(xué)而時習(xí)之袭灯，不亦說乎刺下？有朋自遠(yuǎn)方來，不亦樂乎稽荧？人不知而不慍橘茉，不亦君子乎？</p>
<p>有子曰:“其為人也孝弟而好犯上者，鮮矣畅卓；不好犯上而好作亂者擅腰，未之有也。君子務(wù)本髓介，本立而道生惕鼓。孝弟也者，其為仁之本與!”</p>
<p>子曰:“巧言令色唐础，鮮矣仁箱歧！”</p>
<p>曾子曰“吾日三省吾身:為人謀而不忠乎?與朋友交而不信乎?傳不習(xí)乎?”</p>
<p>子曰:“道千乘之國,敬事而信，節(jié)用而愛人一膨，使民以時呀邢。”</p>
<p>子曰：“弟子入則孝豹绪，出則弟价淌，謹(jǐn)而信，泛愛眾瞒津，而親仁蝉衣。行有余力，則以學(xué)文巷蚪〔≌保”</p>
<p>子夏曰：“賢賢易色；事父母屁柏，能竭其力啦膜；事君，能致其身淌喻；與朋友交辽社，言而有信息楔。雖曰未學(xué)，吾必謂之學(xué)矣议双∠纷裕”</p>
<p>子曰：“君子不重則不威腊敲，學(xué)則不固找爱。主忠信膜赃，無友不如己者，過則勿憚改伤塌。”</p>
<p>曾子曰：“慎終追遠(yuǎn)轧铁，民德歸厚矣每聪。”</p>
<p>子禽問于子貢曰：“夫子至于是邦也，必聞其政药薯，求之與绑洛，抑與之與？”子貢曰：“夫子溫童本、良真屯、恭、儉穷娱、讓以得之绑蔫。夫子之求之也，其諸異乎人之求之與泵额？”</p>
<p>子曰：“父在配深，觀其志。父沒嫁盲，觀其行篓叶；三年無改于父之道，可謂孝矣羞秤「淄校”</p>
<p>有子曰：“禮之用，和為貴瘾蛋。先王之道俐镐，斯為美，小大由之瘦黑。有所不行京革，知和而和，不以禮節(jié)之幸斥，亦不可行也匹摇。”</p>
<p>有子曰：“信近于義甲葬，言可復(fù)也廊勃。恭近于禮，遠(yuǎn)恥辱也经窖。因不失其親坡垫，亦可宗也』拢”</p>
<p>子曰：“君子食無求飽冰悠，居無求安，敏于事而慎于言配乱，就有道而正焉溉卓∑こ伲可謂好學(xué)也已∩Ｕ”</p>
<p>子貢曰：“貧而無諂伏尼，富而無驕，何如尉尾？”子曰：“可也爆阶。未若貧而樂，富而好禮者也沙咏”嫱迹”子貢曰：“《詩》云：‘如切如磋，如琢如磨’芭碍，其斯之謂與徒役？”子曰：“賜也，始可與言《詩》已矣窖壕，告諸往而知來者忧勿。”</p>
<p>子曰：“不患人之不己知瞻讽，患不知人也鸳吸。”</p>
</div>
</body>
</html>
CSS代碼：
body {
padding: 20px;
font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
background-color: wheat;
}
* {box-sizing: border-box;}
p {
margin: 0 0 1em 0;
}
.container {
border: 1px solid rgb(254,106,0);
border-radius: .5em;
padding: 10px;
max-width: 500px;
}
.item {
border-radius:.5em;
float: left;
background-color: rgba(254,106,0,.9);
color: #fff;
padding: 20px;
width: 100px;
margin: 10px;
}
.container p:nth-of-type(1) {
background-color: yellow;
}
效果：
注意： 需要記住的重要一點是速勇，如果從流中取出一個元素晌砾，則需要自己管理重疊，因為塊流布局的常規(guī)規(guī)則不再適用烦磁。
布局（Layout）
過去我們們在 HTML 中一般使用 CSS 進(jìn)行布局养匈，常見的布局有：單列布局、兩列自適應(yīng)布局都伪、圣飛布局和雙飛翼布局呕乎、偽等高布局、粘連布局陨晶。重點介紹下 Flex 布局和 grid 布局：
Flex布局
Flex布局猬仁，也叫彈性盒子布局，區(qū)區(qū)簡單幾行代碼就可以實現(xiàn)各種頁面的的布局先誉。
//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}
推薦W3Cschool上的的Flexbox布局基礎(chǔ)入門 湿刽，可以更好的幫你掌握Flex。
grid布局
Grid 布局褐耳，是一個基于網(wǎng)格的二維布局系統(tǒng)诈闺，目的是用來優(yōu)化用戶界面設(shè)計。
//html部分同上
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}
對齊（Alignment）
大多數(shù)人都會把對齊（Alignment）當(dāng)作 Flexbox 的一部分铃芦，但是這些屬性適用于所有布局方法值得在這種情況下理解它們雅镊，而不是考慮“ Flexbox Alignment”或“ Flexbox Alignment” “ CSS網(wǎng)格對齊把曼。” 我們有一組Alignment屬性漓穿，它們在可能的情況下可以以一種通用的方式工作。然后注盈，由于不同的布局方法的行為方式晃危，它們會有一些差異。
尺寸（Sizing）
在 web 上老客，我們習(xí)慣用長度或百分比來設(shè)置尺寸僚饭，這就是我們?nèi)绾问褂酶觼碇谱骶W(wǎng)格類型布局的方法。然而胧砰，現(xiàn)代的布局方法可以為我們做很多空間分配——如果我們允許的話鳍鸵。值得花時間去了解 Flexbox 如何分配空間(或 Grid fr 單元如何工作)。
響應(yīng)式設(shè)計（Responsive Design）
通常尉间，新的 Grid 和 Flexbox 布局方法意味著我們可以使用比舊方法更少的媒體查詢偿乖，因為它們非常靈活，可以響應(yīng)視口或組件大小的變化哲嘲，而無需我們更改元素的寬度贪薪。 但是，有些地方需要添加一些斷點來進(jìn)一步增強設(shè)計眠副。
字體和排版
與布局一樣画切，網(wǎng)絡(luò)上的字體使用在發(fā)生了巨大的變化。現(xiàn)在囱怕，可變字體霍弹，使單個字體文件具有無限的變化。 要了解它們是什么以及它們?nèi)绾喂ぷ魍薰堄^看Mandy Michael的精彩簡短演講：可變字體和網(wǎng)頁設(shè)計的未來典格。 另外，我會推薦Jason Pamental的動態(tài)排版與現(xiàn)代CSS和可變字體忘闻。
為了探索可變字體和它們的功能钝计，微軟提供了一個有趣的演示，以及一些嘗試可變字體的游樂場 - Axis Praxis是最知名的（我也喜歡字體游樂場）齐佳。
MDN上的指南將證明一開始使用可變字體是非常有用的私恬。要了解如何為不支持可變字體的瀏覽器實現(xiàn)回退解決方案，請閱讀 Oliver Schondorfer的《使用回退Web字體實現(xiàn)可變字體》Firefox DevTools字體編輯器還支持使用可變字體炼吴。
變形和動畫
CSS轉(zhuǎn)換和動畫絕對是我需要知道的基礎(chǔ)本鸣。 我不經(jīng)常需要使用它們，在使用時會忘記語法硅蹦。 值得慶幸的是荣德，MDN上的參考資料幫助了我闷煤，我建議從使用CSS變換和使用CSS3動畫的指南開始。 Zell Liew也有一篇很好的文章涮瞻，為CSS過渡提供了很好的解釋鲤拿。
要發(fā)現(xiàn)一些可能的事情，請查看Animista網(wǎng)站署咽。
關(guān)于動畫可能令人困惑的事情之一是采取哪種方法近顷。 除了 CSS 支持的內(nèi)容之外，你可能還需要涉及 JavaScript 宁否，SVG 或 Web Animation API窒升，而這些事情往往都會被混為一談。 在她的演講中慕匠，選擇你的動畫冒險記錄在事件中饱须，Val Head解釋了這些選項。
使用參考手冊
在使用 Grid 或 Flexbox 很多人會很依賴w3cschool上的CSS參考手冊 台谊，如果沒有參考手冊就沒法工作蓉媳。這是沒有問題的，前面我們也提到可以合理的利用參考手冊來提升開發(fā)效率锅铅，但是前提是得先理解透原理督怜。否則我們在復(fù)制語法時，可能會忽略為什么要這樣寫狠角。然后号杠，當(dāng)遇到該屬性似乎表現(xiàn)不同的情況時，這種明顯的不一致會令人困惑找不出問題出在哪丰歌。
CSS 是一門經(jīng)過多年進(jìn)化的語言姨蟋，一直在更新，如果是把自己當(dāng)成學(xué)習(xí)者的心態(tài)來學(xué)習(xí)的話立帖，永遠(yuǎn)也是學(xué)不完的眼溶。然而，一旦你把基礎(chǔ)知識及底層原理打牢了以后晓勇，你就可以很輕松的面對各種變化了堂飞。如果要系統(tǒng)的學(xué)習(xí)前端推薦學(xué)習(xí)W3Cschool上的從0基礎(chǔ)到前端開發(fā) 課程。
以上就是編程獅為你整理的關(guān)于web前端開發(fā)初學(xué)者如何科學(xué)的快速學(xué)會CSS绑咱？的全部內(nèi)容绰筛，希望給對css望而生畏初學(xué)者有所幫助，如果你有更好的學(xué)習(xí)方法歡迎分享~
