<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          每個前端人員都需要了解的 7 個 CSS 核心概念

          共 4331字,需瀏覽 9分鐘

           ·

          2022-05-16 03:06

          到目前為止,很多人不知道 CSS 是如何工作的,不過這已經(jīng)不是什么秘密了,尤其是當(dāng)你第一次接觸 CSS 時。很難弄清楚為什么一個元素位于某個位置,或者為什么該元素具有紅色,盡管使用了重要的覆蓋它。
          在本文中,我將介紹7個關(guān)于CSS的核心概念,它們將幫助您了解發(fā)生了什么(即使是一點點)。
          請注意,這篇文章不適合 CSS 資深人士,沒有任何令人興奮的功能或類似的東西,它只涵蓋了 CSS 的核心概念。
          1、Display
          你是否曾經(jīng)嘗試過將兩個 div 并排放置,但另一個 div 最終位于單獨的一行?或者嘗試將鏈接放在單獨的行上,但其他元素以某種方式在它旁邊結(jié)束?我已經(jīng)覆蓋了你!使用 display 屬性,您可以控制元素在頁面上的顯示方式。
          雖然很多網(wǎng)站都在使用 flexbox 和 grid(我不會介紹,因為今天的內(nèi)容是一個初學(xué)者指南),但您肯定會遇到一個仍然使用舊顯示屬性進(jìn)行布局的網(wǎng)站。

          1.1 、顯示塊
          塊元素默認(rèn)占用 100% 的可用空間,并且不允許任何元素放置在同一行上,即使您減小寬度(如上圖所示),元素大小也會減小,但仍然不會 允許在它旁邊放置另一個元素。大多數(shù) HTML 元素默認(rèn)是塊元素。
          1.2 、顯示內(nèi)聯(lián)塊
          Inline-Block 元素允許將其他非塊元素放置在它們旁邊,并且只有在沒有空間留給這些元素時才會將其他元素推到下一行。
          1.3、 顯示內(nèi)聯(lián)
          內(nèi)聯(lián)元素類似于 inline-block,因為它們允許將其他元素放在它們旁邊,但是內(nèi)聯(lián)元素的尺寸(寬度和高度)不能更改,它們的尺寸由它們的內(nèi)容(文本 和填充)。
          注意:您可以使用 <br> 元素在 inline/inline-block 元素之后換行。
          2、盒子模型
          在 HTML 中,一切都是一個盒子(是的,甚至圓形、三角形等都只是剪切框)。但是,這些盒子是如何工作的呢?盒子內(nèi)的空白空間是如何添加的?盒子外面呢?“盒子”到底是什么?
          注意:這是假設(shè)下面的代碼塊在使用的 CSS 文件中,它非常流行,你甚至不需要知道如果它不存在會發(fā)生什么。 
          * {box-sizing: border-box;}
          “盒子”基本上是 HTML 元素的構(gòu)建塊,它由四個主要塊組成:邊距(margin)、邊框(border)、填充(padding)和內(nèi)容(content)。

          2.1、 邊距
          邊距在所選元素及其周圍的所有元素之間添加空白空間,并且不會影響元素內(nèi)容的大小?,F(xiàn)在有個巧妙的小秘密,從邊框的外邊緣開始,margin-top 將選定的元素向下推動而不移動其他元素,而 margin-bottom 將所述元素保持在原位并向下推動其他元素。margin-left 將所選元素推到右側(cè),并且不移動其他元素,而 margin-right 將所述元素保持在原位并將其他元素推到右側(cè)。
          雖然一開始可能聽起來令人困惑,但它的工作原理是這樣的,因為 HTML 是從上到下、從左到右呈現(xiàn)的。我強(qiáng)烈建議在開發(fā)工具中使用邊距,以便更好地了解它的工作原理。
          現(xiàn)在提出一個開創(chuàng)性的問題:假設(shè)我有兩個塊元素——A 和 B,A 在 B 之上——如果我添加 margin-bottom: 15px; 會發(fā)生什么;到 A 和 margin-top: 10px;給 B?
          如果您認(rèn)為它們之間的距離為 25 像素,我很抱歉地通知您您錯了。為什么?因為邊距崩潰!基本上,如果您有兩個方向相反的邊距,則只會渲染較大的邊距(在本例中為 15px),而另一個將被忽略。所以在我們的例子中,A 和 B 僅相隔 15px。
          我知道這需要消化很多,但我保證其他屬性沒有那么復(fù)雜。
          2.2、 邊框
          邊框定義了元素邊緣的外觀,它還帶走了內(nèi)容并將內(nèi)容向內(nèi)推。因此,如果我們有一個 100*100px 的元素,添加一個 10px 的邊框?qū)槲覀兞粝?90*90px 的內(nèi)容。
          2.3、 填充
          padding 在元素的邊界內(nèi)添加空白空間——不是空白,這意味著如果元素具有背景顏色,它將不會受到影響——從內(nèi)容大小中移除,并將其向內(nèi)推。使用與上面相同的示例,擁有 10 像素的邊框和 10 像素的內(nèi)邊距將為我們留下 80x80 像素的內(nèi)容。
          2.4 、內(nèi)容
          內(nèi)容基本上就是計算完padding和border后剩下的空間。它是文本或圖像或子 HTML 元素開始出現(xiàn)在所選元素中的位置。
          3、定位
          我知道你試過給 top: 50px;你的元素,想知道為什么它沒有移動,我們都去過那里。這就是為什么我們需要討論 position 屬性,它允許您控制元素的位置。
          3.1 、static
          所有 HTML 元素都是 position: static;默認(rèn)情況下。這意味著您不能使用 top、left、right、bottom 屬性來移動它們,它們?nèi)匀豢梢允褂?margin、flexbox 等來移動。但在某些情況下,您只想將該元素稍微移動到?jīng)]有在它周圍移動元素,這就是為什么 position: relative;接下來即將到來。
          3.2 、relative
          好的,但相對于什么?位置:相對;意味著元素將相對于其原始位置放置,而與邊距不同,不會移動它周圍的任何其他元素。通過使用 relative,您現(xiàn)在可以使用 top、left、right 和 bottom 屬性來重新定位您的元素。
          3.3 、absolute
          我建議您將以下句子閱讀 10 遍,因為一開始它很混亂。位置:絕對;相對于最近的非位置定位所選元素:靜態(tài);parent(如果沒有這樣的元素,它相對于 body 放置),并將元素從 HTML 流中取出,導(dǎo)致元素浮動在其他元素之上。您絕對應(yīng)該只在創(chuàng)建需要浮動在其他元素之上的東西(例如彈出或關(guān)閉按鈕)時才使用此屬性,通常,您使用該屬性的次數(shù)越少越好。
          3.4、 Fixed
          位置:固定;與 absolute 類似,它使元素浮動在其他元素之上。但是,它始終是相對于正文放置的,即使您滾動頁面,它也會保持在原來的位置。
          4、選擇器
          盡管我很想討論這個話題,但已經(jīng)有上千篇關(guān)于它的文章了,我沒有太多要補(bǔ)充的,我最喜歡的一篇是 MDN 官方文檔,(地址:https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity )
          您應(yīng)該在大多數(shù)時間使用類來設(shè)置元素的樣式,并盡可能避免使用 !important。但是,我將在調(diào)試部分討論如何直接從開發(fā)工具中了解哪個選擇器具有更高的特異性。
          5、 繼承
          一些 CSS 屬性——font-size、font-family 和 color 等等——是從它們最近的父級繼承的,當(dāng)且僅當(dāng)它們沒有為給定元素指定時。
          以下 HTML:
          <div class="grand-parent"><div class="parent"><div class="child"></div></div></div>
          如果我們給祖父母 div 顏色:紅色;考慮到所述 div 沒有指定顏色屬性,父 div 和子 div 都將具有紅色文本顏色。如果它們中的任何一個指定了顏色,它將覆蓋繼承,不,在祖父母上添加 !important 不會覆蓋其孩子的顏色。同樣,我將在調(diào)試部分討論更多關(guān)于如何查找哪些屬性被繼承的內(nèi)容。
          6、 z-index 堆棧
          我也希望 z-index 像具有更高 z-index 的元素將顯示在頂部一樣簡單,但這不是它的工作原理。
          再次看以下 HTML:
          <div class="sibling-1 parent"> <div class="child"></div></div><div class="sibling-2"></div>
          考慮到兄弟 1 的 z-index: 10; 兄弟 2 的 z-index: 20; 在這種情況下,兄弟 2 將位于兄弟 1 之上,這很棒!現(xiàn)在,考慮 child 的 z-index: 30; 在這種情況下,它不會顯示在兄弟 2 的頂部,因為它的父級 (sibling-1) 的 z-index 較小。 
          因此 z-index 僅適用于兄弟元素,如果該兄弟元素的 z-index 高于父元素,則子元素不能顯示在其父兄弟元素的頂部。 
          您可能可以使用 position: absolute; 做一些巫術(shù)魔術(shù)。以及所有這些,但不建議這樣做,因為它幾乎不可能維護(hù)您的布局。如果您希望一個元素始終位于其他元素之上,建議您將其直接附加到正文中。
          7、調(diào)試
          雖然調(diào)試不是 CSS 的一部分,但您可以使用開發(fā)工具來幫助您了解正在發(fā)生的事情。我在下面的例子中使用 Chrome,我沒有嘗試過其他瀏覽器,但我相信它們確實有類似的界面(無論你做什么,都不要使用 Internet Explorer。讓它死吧。)
          既然你已經(jīng)走到了這一步,我假設(shè)你知道如何打開開發(fā)工具,所以我將跳過這部分。
          打開元素選項卡并從那里選擇要檢查的元素。
          7.1 、盒子模型
          在樣式選項卡的最底部,您可以看到盒子模型的不同部分以及它們所覆蓋的區(qū)域,將鼠標(biāo)懸停在它們上方,元素的相應(yīng)部分將突出顯示。

          7.2 、計算樣式
          在 Styles 選項卡旁邊有 Computed 選項卡,您可以在其中看到應(yīng)用于所選元素的所有不同 CSS 屬性。例如,如果您的元素在沒有指定任何內(nèi)容的情況下具有紅色,您可以單擊箭頭圖標(biāo)以查看該樣式的來源,它可能是繼承的,也可能是由另一個選擇器意外提供的。
          如果一個屬性變暗(如本例中的高度和寬度),很可能是因為使用了 flexbox 或網(wǎng)格來指定所述屬性(在這種情況下,請隨意檢查 Layout 選項卡,如前所述,我不會介紹 那些科目)。
          您很可能會遇到您不知道它們?nèi)绾芜\作的屬性(例如用戶選擇),在這種情況下,Google 是您最好的朋友。您需要找出該屬性的作用,以了解它對您的元素有什么樣的影響。
          7.3 、選擇器
          在 Styles 選項卡中,您可以看到所有針對所選元素的選擇器,在以下示例中,從 5 個不同的選擇器中為 span 賦予了顏色。藍(lán)色沒有被劃掉的原因是它具有最高的特異性。所以選擇器的特異性越高,它在列表中的位置就越高(當(dāng)然!important 打破了這個規(guī)則。)
          最后的想法
          我希望你在閱讀這篇文章時學(xué)到了一些有用的東西,如果你覺得不錯,請記得點贊我,關(guān)注我,最后,感謝你的閱讀,祝你好運。


          學(xué)習(xí)更多技能

          請點擊下方公眾號

          瀏覽 58
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  大香蕉免费中文 | 97天天操 | 大香蕉中文青草 | 操她自拍| 午夜牛牛 |