APP
在本文中，將介紹7個(gè)關(guān)于CSS的核心概念，它們將幫助您了解發(fā)生了什么(即使是一點(diǎn)點(diǎn))。請(qǐng)注意，這篇文章不適合CSS資深人士，沒有任何令人興奮的功能或類似的東西，它只涵蓋了CSS的核心概念。
?
1、Display
?
你是否曾經(jīng)嘗試過將兩個(gè)div并排放置，但另一個(gè)div最終位于單獨(dú)的一行？或者嘗試將鏈接放在單獨(dú)的行上，但其他元素以某種方式在它旁邊結(jié)束？我已經(jīng)覆蓋了你！使用display屬性，您可以控制元素在頁面上的顯示方式。雖然很多網(wǎng)站都在使用flexbox和grid(我不會(huì)介紹，因?yàn)榻裉斓膬?nèi)容是一個(gè)初學(xué)者指南)，但您肯定會(huì)遇到一個(gè)仍然使用舊顯示屬性進(jìn)行布局的網(wǎng)站。
?
1.1、顯示塊
?
塊元素默認(rèn)占用100%的可用空間，并且不允許任何元素放置在同一行上，即使您減小寬度(如上圖所示)，元素大小也會(huì)減小，但仍然不會(huì)允許在它旁邊放置另一個(gè)元素。大多數(shù)HTML元素默認(rèn)是塊元素。
?
1.2、顯示內(nèi)聯(lián)塊
?
Inline-Block元素允許將其他非塊元素放置在它們旁邊，并且只有在沒有空間留給這些元素時(shí)才會(huì)將其他元素推到下一行。
?
1.3、顯示內(nèi)聯(lián)
?
內(nèi)聯(lián)元素類似于inline-block，因?yàn)樗鼈冊(cè)试S將其他元素放在它們旁邊，但是內(nèi)聯(lián)元素的尺寸(寬度和高度)不能更改，它們的尺寸由它們的內(nèi)容(文本和填充)。注意：您可以使用<；br>；元素在inline/inline-block元素之后換行。
?
2、盒子模型
?
在HTML中，一切都是一個(gè)盒子(是的，甚至圓形、三角形等都只是剪切框)。但是，這些盒子是如何工作的呢？盒子內(nèi)的空白空間是如何添加的？盒子外面呢？“盒子”到底是什么？注意：這是假設(shè)下面的代碼塊在使用的CSS文件中，它非常流行，你甚至不需要知道如果它不存在會(huì)發(fā)生什么。
?
*{box-sizing:border-box；}
?
“盒子”基本上是HTML元素的構(gòu)建塊，它由四個(gè)主要塊組成：邊距(margin)、邊框(border)、填充(padding)和內(nèi)容(content)。
?
2.1、邊距
?
邊距在所選元素及其周圍的所有元素之間添加空白空間，并且不會(huì)影響元素內(nèi)容的大小?，F(xiàn)在有個(gè)巧妙的小秘密，從邊框的外邊緣開始，margin-top將選定的元素向下推動(dòng)而不移動(dòng)其他元素，而margin-bottom將所述元素保持在原位并向下推動(dòng)其他元素。margin-left將所選元素推到右側(cè)，并且不移動(dòng)其他元素，而margin-right將所述元素保持在原位并將其他元素推到右側(cè)。雖然一開始可能聽起來令人困惑，但它的工作原理是這樣的，因?yàn)镠TML是從上到下、從左到右呈現(xiàn)的。我強(qiáng)烈建議在開發(fā)工具中使用邊距，以便更好地了解它的工作原理?，F(xiàn)在提出一個(gè)開創(chuàng)性的問題：假設(shè)我有兩個(gè)塊元素——A和B，A在B之上——如果我添加margin-bottom:15px；會(huì)發(fā)生什么；到A和margin-top:10px；給B？如果您認(rèn)為它們之間的距離為25像素，我很抱歉地通知您您錯(cuò)了。為什么？因?yàn)檫吘啾罎?！基本上，如果您有兩個(gè)方向相反的邊距，則只會(huì)渲染較大的邊距(在本例中為15px)，而另一個(gè)將被忽略。所以在我們的例子中，A和B僅相隔15px。我知道這需要消化很多，但我保證其他屬性沒有那么復(fù)雜。
?
2.2、邊框
?
邊框定義了元素邊緣的外觀，它還帶走了內(nèi)容并將內(nèi)容向內(nèi)推。因此，如果我們有一個(gè)100*100px的元素，添加一個(gè)10px的邊框?qū)槲覀兞粝?0*90px的內(nèi)容。
?
2.3、填充
?
padding在元素的邊界內(nèi)添加空白空間——不是空白，這意味著如果元素具有背景顏色，它將不會(huì)受到影響——從內(nèi)容大小中移除，并將其向內(nèi)推。使用與上面相同的示例，擁有10像素的邊框和10像素的內(nèi)邊距將為我們留下80x80像素的內(nèi)容。
?
2.4、內(nèi)容
?
內(nèi)容基本上就是計(jì)算完padding和border后剩下的空間。它是文本或圖像或子HTML元素開始出現(xiàn)在所選元素中的位置。
?
3、定位
?
我知道你試過給top:50px；你的元素，想知道為什么它沒有移動(dòng)，我們都去過那里。這就是為什么我們需要討論position屬性，它允許您控制元素的位置。
?
3.1、static
?
所有HTML元素都是position:static；默認(rèn)情況下。這意味著您不能使用top、left、right、bottom屬性來移動(dòng)它們，它們?nèi)匀豢梢允褂胢argin、flexbox等來移動(dòng)。但在某些情況下，您只想將該元素稍微移動(dòng)到?jīng)]有在它周圍移動(dòng)元素，這就是為什么position:relative；接下來即將到來。
?
3.2、relative
?
好的，但相對(duì)于什么？位置：相對(duì)；意味著元素將相對(duì)于其原始位置放置，而與邊距不同，不會(huì)移動(dòng)它周圍的任何其他元素。通過使用relative，您現(xiàn)在可以使用top、left、right和bottom屬性來重新定位您的元素。
?
3.3、absolute
?
我建議您將以下句子閱讀10遍，因?yàn)橐婚_始它很混亂。位置：絕對(duì)；相對(duì)于最近的非位置定位所選元素：靜態(tài)；parent(如果沒有這樣的元素，它相對(duì)于body放置)，并將元素從HTML流中取出，導(dǎo)致元素浮動(dòng)在其他元素之上。您絕對(duì)應(yīng)該只在創(chuàng)建需要浮動(dòng)在其他元素之上的東西(例如彈出或關(guān)閉按鈕)時(shí)才使用此屬性，通常，您使用該屬性的次數(shù)越少越好。
?
3.4、Fixed位置
?
固定；與absolute類似，它使元素浮動(dòng)在其他元素之上。但是，它始終是相對(duì)于正文放置的，即使您滾動(dòng)頁面，它也會(huì)保持在原來的位置。
?
4、選擇器
?
盡管我很想討論這個(gè)話題，但已經(jīng)有上千篇關(guān)于它的文章了，我沒有太多要補(bǔ)充的，我最喜歡的一篇是MDN官方文檔，(地址：#/en-US/docs/Web/CSS/Specificity)您應(yīng)該在大多數(shù)時(shí)間使用類來設(shè)置元素的樣式，并盡可能避免使用！important。但是，我將在調(diào)試部分討論如何直接從開發(fā)工具中了解哪個(gè)選擇器具有更高的特異性。
?
5、繼承
?
一些CSS屬性——font-size、font-family和color等等——是從它們最近的父級(jí)繼承的，當(dāng)且僅當(dāng)它們沒有為給定元素指定時(shí)。以下HTML：
?
<；divclass="grand-parent">；<；divclass="parent">；<；divclass="child">；<；/div>；<；/div>；<；/div>；
?
如果我們給祖父母div顏色：紅色；考慮到所述div沒有指定顏色屬性，父div和子div都將具有紅色文本顏色。如果它們中的任何一個(gè)指定了顏色，它將覆蓋繼承，不，在祖父母上添加！important不會(huì)覆蓋其孩子的顏色。同樣，我將在調(diào)試部分討論更多關(guān)于如何查找哪些屬性被繼承的內(nèi)容。
?
6、z-index堆棧
?
我也希望z-index像具有更高z-index的元素將顯示在頂部一樣簡(jiǎn)單，但這不是它的工作原理。再次看以下HTML：
?
<；divclass="sibling-1parent">；<；divclass="child">；<；/div>；<；/div>；<；divclass="sibling-2">；<；/div>；
?
考慮到兄弟1的z-index:10；兄弟2的z-index:20；在這種情況下，兄弟2將位于兄弟1之上，這很棒！現(xiàn)在，考慮child的z-index:30；在這種情況下，它不會(huì)顯示在兄弟2的頂部，因?yàn)樗母讣?jí)(sibling-1)的z-index較小。因此z-index僅適用于兄弟元素，如果該兄弟元素的z-index高于父元素，則子元素不能顯示在其父兄弟元素的頂部。您可能可以使用position:absolute；做一些巫術(shù)魔術(shù)。以及所有這些，但不建議這樣做，因?yàn)樗鼛缀醪豢赡芫S護(hù)您的布局。如果您希望一個(gè)元素始終位于其他元素之上，建議您將其直接附加到正文中。
?
7、調(diào)試
?
雖然調(diào)試不是CSS的一部分，但您可以使用開發(fā)工具來幫助您了解正在發(fā)生的事情。我在下面的例子中使用Chrome，我沒有嘗試過其他瀏覽器，但我相信它們確實(shí)有類似的界面(無論你做什么，都不要使用InternetExplorer。讓它死吧。)既然你已經(jīng)走到了這一步，我假設(shè)你知道如何打開開發(fā)工具，所以我將跳過這部分。打開元素選項(xiàng)卡并從那里選擇要檢查的元素。
?
7.1、盒子模型
?
在樣式選項(xiàng)卡的最底部，您可以看到盒子模型的不同部分以及它們所覆蓋的區(qū)域，將鼠標(biāo)懸停在它們上方，元素的相應(yīng)部分將突出顯示。
?
7.2、計(jì)算樣式
?
在Styles選項(xiàng)卡旁邊有Computed選項(xiàng)卡，您可以在其中看到應(yīng)用于所選元素的所有不同CSS屬性。例如，如果您的元素在沒有指定任何內(nèi)容的情況下具有紅色，您可以單擊箭頭圖標(biāo)以查看該樣式的來源，它可能是繼承的，也可能是由另一個(gè)選擇器意外提供的。如果一個(gè)屬性變暗(如本例中的高度和寬度)，很可能是因?yàn)槭褂昧薴lexbox或網(wǎng)格來指定所述屬性(在這種情況下，請(qǐng)隨意檢查L(zhǎng)ayout選項(xiàng)卡，如前所述，我不會(huì)介紹那些科目)。您很可能會(huì)遇到您不知道它們?nèi)绾芜\(yùn)作的屬性(例如用戶選擇)，在這種情況下，Google是您最好的朋友。您需要找出該屬性的作用，以了解它對(duì)您的元素有什么樣的影響。
?
7.3、選擇器
?
在Styles選項(xiàng)卡中，您可以看到所有針對(duì)所選元素的選擇器，在以下示例中，從5個(gè)不同的選擇器中為span賦予了顏色。藍(lán)色沒有被劃掉的原因是它具有最高的特異性。所以選擇器的特異性越高，它在列表中的位置就越高(當(dāng)然！important打破了這個(gè)規(guī)則。)
本文摘自 ：https://blog.51cto.com/u
