Web教程:7個CSS核心概念
2022-05-31 17:16:39

在本文中,將介紹7個關于CSS的核心概念,它們將幫助您了解發生了什么(即使是一點點)。請注意,這篇文章不適合CSS資深人士,沒有任何令人興奮的功能或類似的東西,它只涵蓋了CSS的核心概念。

?

1、Display

?

你是否曾經嘗試過將兩個div并排放置,但另一個div最終位于單獨的一行?或者嘗試將鏈接放在單獨的行上,但其他元素以某種方式在它旁邊結束?我已經覆蓋了你!使用display屬性,您可以控制元素在頁面上的顯示方式。雖然很多網站都在使用flexbox和grid(我不會介紹,因為今天的內容是一個初學者指南),但您肯定會遇到一個仍然使用舊顯示屬性進行布局的網站。

?

1.1、顯示塊

?

塊元素默認占用100%的可用空間,并且不允許任何元素放置在同一行上,即使您減小寬度(如上圖所示),元素大小也會減小,但仍然不會允許在它旁邊放置另一個元素。大多數HTML元素默認是塊元素。

?

1.2、顯示內聯塊

?

Inline-Block元素允許將其他非塊元素放置在它們旁邊,并且只有在沒有空間留給這些元素時才會將其他元素推到下一行。

?

1.3、顯示內聯

?

內聯元素類似于inline-block,因為它們允許將其他元素放在它們旁邊,但是內聯元素的尺寸(寬度和高度)不能更改,它們的尺寸由它們的內容(文本和填充)。注意:您可以使用<;br>;元素在inline/inline-block元素之后換行。

?

2、盒子模型

?

在HTML中,一切都是一個盒子(是的,甚至圓形、三角形等都只是剪切框)。但是,這些盒子是如何工作的呢?盒子內的空白空間是如何添加的?盒子外面呢?“盒子”到底是什么?注意:這是假設下面的代碼塊在使用的CSS文件中,它非常流行,你甚至不需要知道如果它不存在會發生什么。

?

*{box-sizing:border-box;}

?

“盒子”基本上是HTML元素的構建塊,它由四個主要塊組成:邊距(margin)、邊框(border)、填充(padding)和內容(content)。

?

2.1、邊距

?

邊距在所選元素及其周圍的所有元素之間添加空白空間,并且不會影響元素內容的大小?,F在有個巧妙的小秘密,從邊框的外邊緣開始,margin-top將選定的元素向下推動而不移動其他元素,而margin-bottom將所述元素保持在原位并向下推動其他元素。margin-left將所選元素推到右側,并且不移動其他元素,而margin-right將所述元素保持在原位并將其他元素推到右側。雖然一開始可能聽起來令人困惑,但它的工作原理是這樣的,因為HTML是從上到下、從左到右呈現的。我強烈建議在開發工具中使用邊距,以便更好地了解它的工作原理?,F在提出一個開創性的問題:假設我有兩個塊元素——A和B,A在B之上——如果我添加margin-bottom:15px;會發生什么;到A和margin-top:10px;給B?如果您認為它們之間的距離為25像素,我很抱歉地通知您您錯了。為什么?因為邊距崩潰!基本上,如果您有兩個方向相反的邊距,則只會渲染較大的邊距(在本例中為15px),而另一個將被忽略。所以在我們的例子中,A和B僅相隔15px。我知道這需要消化很多,但我保證其他屬性沒有那么復雜。

?

2.2、邊框

?

邊框定義了元素邊緣的外觀,它還帶走了內容并將內容向內推。因此,如果我們有一個100*100px的元素,添加一個10px的邊框將為我們留下90*90px的內容。

?

2.3、填充

?

padding在元素的邊界內添加空白空間——不是空白,這意味著如果元素具有背景顏色,它將不會受到影響——從內容大小中移除,并將其向內推。使用與上面相同的示例,擁有10像素的邊框和10像素的內邊距將為我們留下80x80像素的內容。

?

2.4、內容

?

內容基本上就是計算完padding和border后剩下的空間。它是文本或圖像或子HTML元素開始出現在所選元素中的位置。

?

3、定位

?

我知道你試過給top:50px;你的元素,想知道為什么它沒有移動,我們都去過那里。這就是為什么我們需要討論position屬性,它允許您控制元素的位置。

?

3.1、static

?

所有HTML元素都是position:static;默認情況下。這意味著您不能使用top、left、right、bottom屬性來移動它們,它們仍然可以使用margin、flexbox等來移動。但在某些情況下,您只想將該元素稍微移動到沒有在它周圍移動元素,這就是為什么position:relative;接下來即將到來。

?

3.2、relative

?

好的,但相對于什么?位置:相對;意味著元素將相對于其原始位置放置,而與邊距不同,不會移動它周圍的任何其他元素。通過使用relative,您現在可以使用top、left、right和bottom屬性來重新定位您的元素。

?

3.3、absolute

?

我建議您將以下句子閱讀10遍,因為一開始它很混亂。位置:絕對;相對于最近的非位置定位所選元素:靜態;parent(如果沒有這樣的元素,它相對于body放置),并將元素從HTML流中取出,導致元素浮動在其他元素之上。您絕對應該只在創建需要浮動在其他元素之上的東西(例如彈出或關閉按鈕)時才使用此屬性,通常,您使用該屬性的次數越少越好。

?

3.4、Fixed位置

?

固定;與absolute類似,它使元素浮動在其他元素之上。但是,它始終是相對于正文放置的,即使您滾動頁面,它也會保持在原來的位置。

?

4、選擇器

?

盡管我很想討論這個話題,但已經有上千篇關于它的文章了,我沒有太多要補充的,我最喜歡的一篇是MDN官方文檔,(地址:#/en-US/docs/Web/CSS/Specificity)您應該在大多數時間使用類來設置元素的樣式,并盡可能避免使用!important。但是,我將在調試部分討論如何直接從開發工具中了解哪個選擇器具有更高的特異性。

?

5、繼承

?

一些CSS屬性——font-size、font-family和color等等——是從它們最近的父級繼承的,當且僅當它們沒有為給定元素指定時。以下HTML:

?

<;divclass="grand-parent">;<;divclass="parent">;<;divclass="child">;<;/div>;<;/div>;<;/div>;

?

如果我們給祖父母div顏色:紅色;考慮到所述div沒有指定顏色屬性,父div和子div都將具有紅色文本顏色。如果它們中的任何一個指定了顏色,它將覆蓋繼承,不,在祖父母上添加!important不會覆蓋其孩子的顏色。同樣,我將在調試部分討論更多關于如何查找哪些屬性被繼承的內容。

?

6、z-index堆棧

?

我也希望z-index像具有更高z-index的元素將顯示在頂部一樣簡單,但這不是它的工作原理。再次看以下HTML:

?

<;divclass="sibling-1parent">;<;divclass="child">;<;/div>;<;/div>;<;divclass="sibling-2">;<;/div>;

?

考慮到兄弟1的z-index:10;兄弟2的z-index:20;在這種情況下,兄弟2將位于兄弟1之上,這很棒!現在,考慮child的z-index:30;在這種情況下,它不會顯示在兄弟2的頂部,因為它的父級(sibling-1)的z-index較小。因此z-index僅適用于兄弟元素,如果該兄弟元素的z-index高于父元素,則子元素不能顯示在其父兄弟元素的頂部。您可能可以使用position:absolute;做一些巫術魔術。以及所有這些,但不建議這樣做,因為它幾乎不可能維護您的布局。如果您希望一個元素始終位于其他元素之上,建議您將其直接附加到正文中。

?

7、調試

?

雖然調試不是CSS的一部分,但您可以使用開發工具來幫助您了解正在發生的事情。我在下面的例子中使用Chrome,我沒有嘗試過其他瀏覽器,但我相信它們確實有類似的界面(無論你做什么,都不要使用InternetExplorer。讓它死吧。)既然你已經走到了這一步,我假設你知道如何打開開發工具,所以我將跳過這部分。打開元素選項卡并從那里選擇要檢查的元素。

?

7.1、盒子模型

?

在樣式選項卡的最底部,您可以看到盒子模型的不同部分以及它們所覆蓋的區域,將鼠標懸停在它們上方,元素的相應部分將突出顯示。

?

7.2、計算樣式

?

在Styles選項卡旁邊有Computed選項卡,您可以在其中看到應用于所選元素的所有不同CSS屬性。例如,如果您的元素在沒有指定任何內容的情況下具有紅色,您可以單擊箭頭圖標以查看該樣式的來源,它可能是繼承的,也可能是由另一個選擇器意外提供的。如果一個屬性變暗(如本例中的高度和寬度),很可能是因為使用了flexbox或網格來指定所述屬性(在這種情況下,請隨意檢查Layout選項卡,如前所述,我不會介紹那些科目)。您很可能會遇到您不知道它們如何運作的屬性(例如用戶選擇),在這種情況下,Google是您最好的朋友。您需要找出該屬性的作用,以了解它對您的元素有什么樣的影響。

?

7.3、選擇器

?

在Styles選項卡中,您可以看到所有針對所選元素的選擇器,在以下示例中,從5個不同的選擇器中為span賦予了顏色。藍色沒有被劃掉的原因是它具有最高的特異性。所以選擇器的特異性越高,它在列表中的位置就越高(當然!important打破了這個規則。)

本文摘自 :https://blog.51cto.com/u


更多科技新聞 ......

欧美五月丁香六月综合合_成年在线视频免费观看完整版_交换国产精品视频一区_免费一本色道久久一区