久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      什么是外邊距折疊?什么情況下出現(xiàn)?怎么解決?

      本篇文章帶大家了解一下CSS 盒模型,介紹一下什么是外邊距折疊?什么情況下會出現(xiàn)外邊距折疊?并談?wù)劷鉀Q方法。

      什么是外邊距折疊?什么情況下出現(xiàn)?怎么解決?

      在 CSS 中,所有的元素都被一個(gè)個(gè)的 “盒子(box)” 包圍著,我們廣泛地使用兩種“盒子” —— 塊級盒子 (block box) 和 內(nèi)聯(lián)盒子 (inline box)。

      什么是 CSS 盒模型?

      在 CSS 中,盒模型(box model)是在設(shè)計(jì)和布局時(shí)使用。

      盒模型的定義可以分成這幾部分:

      • Content box: 這個(gè)區(qū)域是用來顯示內(nèi)容,大小可以通過設(shè)置 widthheight.
      • Padding box: 包圍在內(nèi)容區(qū)域外部的空白區(qū)域; 大小通過 padding 相關(guān)屬性設(shè)置。
      • Border box: 包裹內(nèi)容和內(nèi)邊距。大小通過 border 相關(guān)屬性設(shè)置。
      • Margin box: 這是最外面的區(qū)域,是盒子和其他元素之間的空白區(qū)域。大小通過 margin 相關(guān)屬性設(shè)置。

      什么是外邊距折疊?什么情況下出現(xiàn)?怎么解決?

      塊級盒子完整地應(yīng)用了 CSS 盒模型,內(nèi)聯(lián)盒子只使用盒模型中定義的部分內(nèi)容。

      box-sizing

      box-sizing 屬性定義了瀏覽器應(yīng)該如何計(jì)算一個(gè)元素的總寬度和總高度。

      • content-box(默認(rèn)值),即標(biāo)準(zhǔn)盒模型,width: 100px 指的是內(nèi)容區(qū)會有 100px 寬。
        • 盒子的大小 = content(100px) + padding + border
      • border-box,即替代(IE)盒模型,width: 100px 指的是 內(nèi)容區(qū) + 邊框 + 內(nèi)邊距 的總和是 100px 寬。
        • 盒子的大小 = content + padding + border = 100px

      不論那種模型,margin 都是不計(jì)入實(shí)際大小 —— 當(dāng)然,它會影響盒子在頁面所占空間,但是影響的是盒子外部空間。

      display

      這里可以補(bǔ)充一個(gè)概念 — 內(nèi)部和外部顯示類型。

      • 外部顯示類型,我們通過對盒子 display 屬性的設(shè)置,比如 inline 或者 block ,來控制盒子的是內(nèi)聯(lián)還是塊級。
      • 內(nèi)部顯示類型,它決定了盒子內(nèi)部元素是如何布局的。

      如果設(shè)置 display: flex,在一個(gè)元素上,外部顯示類型是 block,但是內(nèi)部顯示類型修改為 flex。 該盒子的所有直接子元素都會成為 flex 元素,會根據(jù) 彈性盒子(Flexbox )規(guī)則進(jìn)行布局。

      還有一個(gè)特殊的值 — display: inline-block,它在內(nèi)聯(lián)和塊之間提供了一個(gè)中間狀態(tài)。這對于以下情況非常有用:不發(fā)生換行,但可以設(shè)定寬度和高度,也就是說實(shí)現(xiàn)了塊級的部分效果:

      • 設(shè)置 widthheight 屬性會生效。
      • padding, margin, 以及 border 會推開其他元素。

      行內(nèi)元素 / 塊級元素

      HTML4 中,元素被分成兩大類: inline (內(nèi)聯(lián)元素) 與 block (塊級元素)。

      1. 什么是行內(nèi)元素?

      一個(gè)行內(nèi)元素只占據(jù)它對應(yīng)標(biāo)簽的邊框所包含的空間。

      常見的行內(nèi)元素有 abspan、 img、 strong、 sub sup、 buttoninput、 labelselect、 textarea

      2. 什么是塊級元素?

      塊級元素占據(jù)其父元素(容器)的整個(gè)空間,因此創(chuàng)建了一個(gè)“塊”。通常瀏覽器會在塊級元素前后另起一個(gè)新行。

      常見的塊級元素有 divul 、olli、 dldt、 dd、 h1、 h2 h3、h4 h5、h6 、p

      3. 區(qū)別?

      • 格式上(默認(rèn)情況),行內(nèi)元素不會換行,而塊級元素都會換行。

      • 內(nèi)容上(默認(rèn)情況),行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素。而塊級元素可以包含行內(nèi)元素和其他塊級元素。

      • 在屬性上

        • 行內(nèi)元素
          • widthheight 設(shè)置無效(可以設(shè)置 line-height),
          • 內(nèi)邊距(padding)、外邊距(margin) 和 邊框(border) 在 上下方向 不會對其他元素產(chǎn)生影響。
        • 塊級元素
          • widthheight 屬性可以發(fā)揮作用,
          • 內(nèi)邊距(padding)、外邊距(margin) 和 邊框(border) 會將其他元素從當(dāng)前元素周圍“推開”

      什么是外邊距折疊?什么情況下出現(xiàn)?怎么解決?

      外邊距(margin)折疊

      塊的上外邊距(margin-top)和下外邊距(margin-bottom)有時(shí)合并(折疊)為單個(gè)邊距,其大小為單個(gè)邊距的最大值(或如果它們相等,則僅為其中一個(gè)),這種行為稱為 邊距折疊。

      什么情況才會出現(xiàn)

      2 個(gè)或多個(gè)毗鄰的的普通流中的塊元素垂直方向上的 margin 會折疊

      • 毗鄰: 是指沒有被非空內(nèi)容、padding、border 或 clear 分隔開
      • 垂直方向: 是指只有垂直方向的 margin 才會

      如何解決?

      • 創(chuàng)建了 BFC 的元素 和它的子元素/兄弟元素不會發(fā)生折疊

      • 設(shè)置 padding / border ,一些具體的場景:

        • 父元素的 margin-top 和子元素的 margin-top 發(fā)生重疊。

          發(fā)生重疊是因?yàn)樗鼈兪窍噜彽?,所以我們可以通過這一點(diǎn)來解決這個(gè)問題。我們可以為父元素設(shè) border-toppadding-top 值來分隔它們。

        • 高度為 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 發(fā)生重疊。

          發(fā)生重疊一個(gè)是因?yàn)樗鼈兿?鄰,一個(gè)是因?yàn)楦冈氐母叨炔还潭āR虼宋覀兛梢詾楦冈卦O(shè)置 border-bottom、 padding-bottom 來分隔它們,也可以為父元素設(shè)置一個(gè)高度,max-heightmin-height 也能解決這個(gè)問題。

        • 是沒有內(nèi)容的元素,自身的 margin-topmargin-bottom 發(fā)生的重疊。

          我們可以通過為其設(shè)置 borderpadding 或者高度來解決這個(gè)問題。

      觸發(fā) BFC 的因素

      • float(除了 none)
      • overflow(除了 visible)
      • display(table-cell / table-caption / inline-block)
      • position(除了 static / relative)

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號