国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入css布局 (1) — 盒模型 & 元素分類

ky0ncheng / 840人閱讀

摘要:深入布局盒模型元素分類在知識體系中,除了選擇器,樣式屬性等基礎知識外,布局相關的知識才是比較核心和重要的點。從元素的布局特性來分,主要可以分為三類元素塊級元素,行內元素,行內塊級元素。行內級元素屬性取的元素。

?

深入css布局(1)—— 盒模型 & 元素分類

?

? ? “ 在css知識體系中,除了css選擇器,樣式屬性等基礎知識外,css布局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css布局相關的知識。”

?

首先來列下大綱

  • 盒模型
    • IE盒模型
    • W3C盒模型
    • box-sizing
  • 元素的分類
    • 塊級元素
    • 行內元素
    • 行內塊級元素
    • 行框
  • 定位與浮動
    • 文檔流
    • 包含塊
    • 浮動清除
  • margin問題
  • 格式化上下文(formatting context)
    • BFC、IFC、FFC、GFC
  • 常見布局實戰
    • 水平垂直居中
    • 兩欄 & 三欄布局


一、css盒模型

1.1 IE盒模型與W3C盒模型

首先大家都知道一個頁面是由眾多HTML元素組成的,每一個元素都有自己的一個矩形的顯示區域,這就是我們平時經常提及的css盒模型。

這個盒模型或者說這個矩形的顯示區域呢 就是向下面這張圖一樣,包括四部分:

margin(外邊距)+border(邊框)+padding(內邊距)+content(內容)

?

?

在css的發展歷程中,有兩種版本的盒模型,一個叫IE盒模型(又叫怪異盒模型),一個叫W3C標準盒模型,在早期的微軟出的IE瀏覽器中采用的是自己的盒模型標準成為IE盒模型或者叫怪異盒模型。

規定:元素width和height屬性是包含元素的border(邊框)+padding(內邊距)+content(內容)的。

而后來W3C組織(中文叫做萬維網聯盟,是一家中立性的技術標準指定機構),一個專門制定互聯網技術標準的機構,為了標準化前端的技術規范,他規定了個標準稱為W3C標準盒模型。

規定:元素width和height屬性只包含元素的content(內容)。 

后來微軟也慢慢轉向了W3C的標準,在IE6以后支持了W3C標準盒模型。在我們現在的主流瀏覽器里面默認都是使用w3c標準盒模型。

我們來看下面這張圖

?

在圖的上半部分中展示的W3C盒模型標準,比如我聲明一個div的width屬性為100px,那我只是規定了這個div的content內容顯示區域的大小為100px,如果之后我再聲明div的padding為10px, border為15px solid black, 那么這個div最終的整體寬度就會變成 100 + 10 * 2 + 15 * 2 = 150px 了。

而如果同樣的css運用到了IE盒模型身上那么當我規定div的width屬性為100px時,他整體的寬度就已經確定了,就是100px,再之后我去聲明div的padding為10px,border為15px solid black,也不會影響我這個div的整體寬度,只是會壓縮這個div的content內容顯示區域的大小。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 15px solid black;
        }

        /*
            在W3C盒模型下 #div的整體寬度是150px;
            在IE盒模型下 #div的整體寬度是100px;
         */

    style>
head>
<body>
    <div id="div1">div>
body>
html>

?

1.2 box-sizing

box-sizing干嘛用的?

我們剛在說道目前主流瀏覽器默認都是采用W3C盒模型,如果你就是想在這些瀏覽器里使用IE盒模型呢?你就需要使用box-sizing這個屬性,這是個css3中新出的屬性:默認值是content-box就是指的使用W3C盒模型標準,另外一個值是border-box,指的就是我要在這個元素上使用IE盒模型標準。

#div1 {
    box-sizing: border-box || content-box(默認值)
}

那么這里就有個問題了,為啥W3C組織好不容易將IE盒模型摒棄調,統一了前端這個盒模型標準而且所有瀏覽器廠商也都默認支持了,現在反而在css3中加入了box-sizing屬性讓我們可以自由選擇盒模型標準了呢?

答案就是W3C突然發現在某些情況下,IE盒模型比自己家的那個盒模型標準更好用。 =。=…(這就很尷尬了…) 于是在css3中加入了box-sizing這個屬性讓開發者可以自由選擇要使用哪種標準(估計是被噴慘了…)

我們來看這樣一個例子:如果現在我們要實現這樣一個簡單布局,我要一個div的整體寬度是頁面的50%,并且呢這個div還帶有一個10px的邊框。我們要怎么做呢?
如果我們用IE盒模型標準的話就很簡單

    div{
        width: 50%;
        border: 10px solid black;
        box-sizing: border-box; /* 設置為IE盒模型標準 */
    }

就可以了 是吧。

那么如果我們使用W3C盒模型呢。
我們知道如果我們聲明這個div寬度為50%,然后聲明border為10px的話 那么這個div實際寬度應該是50% + 20px對吧 所以這樣不符合我們的要求,那么要怎么做呢。

????有2種方法。

  • 再包裹一層div,讓外層div寬度為50%,然后讓內層div有一個10px邊框,由于內層div沒有是個塊級元素所以寬度會默認撐滿父元素。代碼如下

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        #div1{
            width: 50%;
        }
        #div1{
            border: 10px solid black;
        }

    style>
head>
<body>
    <div id="div1">
        <div id="div2">div>
    div>
body>
html>
  • 另一種方法是使用css3的計算屬性calc(),將div的寬度設為50% - 20px,但是這個屬性兼容性一般。代碼如下
    div{
      width: calc(50% - 20px);
      border: 10px solid black;
    }
    
    ….顯然,IE盒模型的實現方案更加簡潔和直觀。后來W3C也意識到了這個問題 于是為了重新支持IE盒模型,W3C組織在CSS3中添加了box-sizing屬性,用于讓開發者可以隨意切換這兩種盒模型。

二、元素的分類

2.1 塊級元素 & 行內元素 & 行內塊級元素

元素除了自己的盒模型外還有自己的分類。從元素的布局特性來分,主要可以分為三類元素:塊級元素行內元素行內塊級元素

我們現在看下他們的定義:

塊級元素:display屬性取block、table、flex、grid和list-item的元素。

行內級元素:display屬性取inline的元素。

行內塊級元素:display屬性取inline-block、inline-table、inline-flex和inline-grid的元素

很多網上或者書上說: div是個塊級元素,span是個行內元素。這樣的說法是不正確的,或者說是不嚴謹的。我們只能說div默認是個塊級元素,span默認是個行內元素。就是因為每個元素初始都會帶有一些樣式屬性,而div默認的display是block,span的display是inline。但是如果我們在css中去設置他們的display屬性就可以改變他們的類型。

接下來我們看看他們都有什么特點,很簡單

塊級元素

  1. 獨占一行顯示(width默認為100%,height為0);
  2. 可以設置尺寸屬性(width、height等);

行內元素

  1. 一行可以顯示多個;
  2. 不能設置寬高或者說設置的width,height無效;
  3. 受父元素的text-align屬性和自身vertical-align屬性的控制,在水平方向上默認左對齊,在垂直方向上默認在行框的baseline基線上顯示(“行框”的概念,會在后面深入講解)

行內塊級元素( 結合了塊級元素和行內元素的特征 )

  1. 一行可以顯示多個;
  2. 可以設置尺寸屬性(width、height等);
  3. 受父元素的text-align屬性和自身vertical-align屬性的控制

對于塊級元素很簡單,沒有什么可說的。就是一點,無論我們把塊級元素的寬度設置多小,他們也只能在一行里多帶帶顯示,而不會跟這個元素的兄弟元素在同一行顯現。

對于行內或者行內塊級元素來說,有個小注意點。當有多個這樣的元素并排排列時 你會發現他們之間是有幾像素的間距的,我們來看下面的代碼


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        span{
            background: blue;
        }
    style>
head>
<body>
    <div>
        <span>LearnInPro1span>
        <span>LearnInPro2span>
        <span>LearnInPro3span>
    div>
body>
html>

我們會發現 他們之間會有間距 像這樣:

這是由于我們為了代碼的整潔和直觀,一般把每個標簽在多帶帶一行里書寫,這樣就造成了,標簽之間會存在換行符,在渲染過程中,渲染引擎會認為換行符是一種文本,所以導致了我們每個span之間就跟存在著一個空格一樣。

那么我們這里介紹兩個方法來消除這個間距

  1. 很簡單,我們直接把span在一行里書寫就好了,像這樣:
<div>
    <span>LearnInPro1span><span>LearnInPro2span><span>LearnInPro3span>
div>
  1. 由于渲染引擎認為換行符是一種文本,那我把文本的font-size設為0不就可以了么。

注意:由于font-size屬性是一個可繼承屬性,所以在div上將font-size設為0后還需要再span上把font-size設回來,否則span里的文本的font-size也會變成0。像這樣:

div {
    font-size: 0;
}
span{
    font-size: 16px;
    background: blue;
}

?

2.2 行框

關于元素分類,我們再來講一個概念,叫做行框

我們現在看下行框的概念:子元素的虛擬矩形區域,形成的每一行。這個概念有點抽象,我們結合下面這張圖來理解下。

我們可以看到,

  • 當行內元素或者行內塊級元素并排排列的時候,可能他們的字體大小,高度都是不一樣的。那么行框就是包裹他們的一個框。就是圖中Line box所指的區域。
  • 行框規定了這些元素排列時候的對齊方式。默認他們的對齊方式是根據baseline基準線對齊。就如同圖上的對齊方式一樣。
  • 在行框中,我們利用vertical-align來改變他們的對齊方式。他的值有很多,常用的有top,middle,bottom等,這個比較簡單就不多介紹了。

要特別注意的點有兩個

  1. 我們說過行內元素是不能設置高度的,那么他的高度是如何決定的呢? 任何一個行內元素,他的高度是由font-size和line-height共同決定的。
  • 首先,文本的高度是跟line-height無關的。我們可以給span設置一個背景色,然后我們改變他的line-height會發現,無論line-height設置成多高,span的背景色的高度都不會改變,但是span整體的高度會隨line-height的增大而變高。所以說文本的高度是跟line-height無關的(注意這里說的是文本)。
    • 那么,文本的高度只跟font-size有關,但是注意,文本的高度永遠會大于font-size的值。就像下面這張圖,font-size的大小只是規定了text-top到text-bottom的距離,而文本高度是top到bottom的距離,而這之間的距離是多少,每個瀏覽器都不太一樣。總之是為了保護文本,不希望行與行之間產生重疊。( 如果你強行將line-height設置的特別小,希望產生重疊,在大部分現代瀏覽器中是無效的,也就是在大部分瀏覽器中line-height的值最小等于文本的高度,所以不建議將line-height設的比文本高度小。 )
    • 所以,行內元素的高度(不折行的情況下)當沒設置line-height或者line-height小于等于文本的內容高度時,行內元素高度取決于font-size,等于文本的高度。 當line-height大于文本高度時,則由line-height決定。

?

 2. 當行內元素和行內塊級元素在一個行框內排列的時候,比如:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        span{
            background: blue;
            font-size: 20px;
        }
        .inline-block{
            height: 100px;
            width: 100px;
            background: red;
            display: inline-block;
        }

    style>
head>
<body>    
    <div style="background: gray;">
        <span>LearnInProspan>
        <div class="inline-block">div>
    div>
body>
html>

就會變成下圖這樣

我們前面說過 這兩個元素中間的空隙是由于換行符導致的,并且也介紹了解決方案,而這次要說的是這個紅色的行內塊級元素下方的空隙,這個就是由于行框默認的對齊方式導致的。由于行框默認是baseline對齊,行內塊級元素也要遵守所以這個紅框的底部會騎在baseline線上。導致baseline到bottom的區域空著,產生空隙。那么解決方案也很簡單,只要改變行框的對齊方式,在這兩個元素上都加上vertical-align: top || middle || bottom 等就可以把這個空隙消除掉。

由于css布局相關知識,比較重要,知識點也比較多。我們下篇文章再來介紹其他的部分。

?

最后你覺得我們的文章對你有幫助,歡迎關注我們的 微信公眾號LearnInPro,在上面你可以第一時間獲取到我們的技術文章,并且你可以隨時在上面向我們提問,把你在學習前端過程中所遇到的問題發給我們。我們每天都會按時回復大家的每一個問題,希望LearnInPro可以伴隨你從入門到專家。

?

?

?

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/2247.html

相關文章

  • 深入css布局(1) — 模型 &amp; 元素分類

    摘要:深入布局盒模型元素分類在知識體系中,除了選擇器,樣式屬性等基礎知識外,布局相關的知識才是比較核心和重要的點。規定元素和屬性是包含元素的邊框內邊距內容的。后來微軟也慢慢轉向了的標準,在以后支持了標準盒模型。行內級元素屬性取的元素。 深入css布局(1)—— 盒模型 & 元素分類 ????在css知識體系中,除了css選擇器,樣式屬性等基礎知識外,css布局相關的知識才是css比較核心和重...

    blankyao 評論0 收藏0
  • 【前端芝士樹】詳解CSS模型、BFC、OffsetWidth&amp;ClientWidth&am

    摘要:提供了糟糕的支持,而雖然接近標準,但依舊未能完全正確的支持標準。盡管修復了許多的問題,但是依然延續實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發嚴格模式即依據標準的規則渲染網頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始,一步步涉及一些常見的前端筆試和面試點 主要參考自第一篇文章,然而筆者在讀的時...

    binta 評論0 收藏0
  • CCS 模型分析

    摘要:基本概念頁面中的每個元素都可以看成一個盒子,盒子里面可以裝其他盒子,層層嵌套。標簽就是最外面的大盒子。每個盒子由內向外分別是。分類盒模型有兩種,標準盒模型和盒模型。 基本概念 頁面中的每個元素都可以看成一個盒子,盒子里面可以裝其他盒子,層層嵌套。html 標簽就是最外面的大盒子。每個盒子由內向外分別是 content, padding, border, margin 。 showImg...

    Jochen 評論0 收藏0
  • CCS 模型分析

    摘要:基本概念頁面中的每個元素都可以看成一個盒子,盒子里面可以裝其他盒子,層層嵌套。標簽就是最外面的大盒子。每個盒子由內向外分別是。分類盒模型有兩種,標準盒模型和盒模型。 基本概念 頁面中的每個元素都可以看成一個盒子,盒子里面可以裝其他盒子,層層嵌套。html 標簽就是最外面的大盒子。每個盒子由內向外分別是 content, padding, border, margin 。 showImg...

    trigkit4 評論0 收藏0

發表評論

0條評論

ky0ncheng

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<