成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css盒模型理解

xingqiba / 3528人閱讀

摘要：盒模型概念盒子模型又稱框模型，包含了元素內(nèi)容內(nèi)邊距邊框外邊距幾個要素。盒子垂直方向的距離由決定。屬于同一個的兩個相鄰盒子垂直方向的會發(fā)生重疊。計算高度時，自然也會檢測浮動的子盒子高度?？倢挾瓤偢叨群凶釉O(shè)置的值其實是除外的的總寬度。

css盒模型概念

css盒子模型又稱框模型 (Box Model) ，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個要素。

圖中element元素是實際內(nèi)容，也就是元素框，緊挨著元素框外部的是內(nèi)邊距padding，其次是邊框（border），然后最外層是外邊距（margin），整個構(gòu)成了盒子模型。通常我們設(shè)置的背景顯示區(qū)域，就是內(nèi)容、內(nèi)邊距、邊框這一塊范圍。而外邊距margin是透明的，不會遮擋周邊的其他元素。那么：

總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + border的左右寬度 + margin的左邊距和右邊距的值；

總高度 = 元素（element）的height + padding的上下邊距的值 ＋ border的上下寬度 + margin的上下邊距的值。

css外邊距合并(疊加)

兩個上下方向相鄰的元素框垂直相遇時，外邊距會合并，合并后的外邊距的高度等于兩個發(fā)生合并的外邊距中較高的那個邊距值。




    
    Document
    


    

        
上

        margin-bottom:30px;
    

    

        
下

        margin-top:50px;

需要注意的是：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。

邊距合并解決方案(BFC)

BFC其英文拼寫為 Block Formatting Context 直譯為“塊級格式化上下文”

元素產(chǎn)生BFC的條件

float屬性不為none（脫離文檔流）

position為absolute或fixed

display為inline-block,table-cell,table-caption,flex,inine-flex

overflow不為visible

BFC元素所具有的特性

在BFC中，盒子從頂端開始垂直地一個接一個地排列。

盒子垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰盒子垂直方向的margin會發(fā)生重疊。

在BFC中，每一個盒子的左外邊距（margin-left）會觸碰到容器的左外邊緣（border-left），對于從右往左的格式來說，會觸碰到右邊緣。

BFC不會與浮動盒子產(chǎn)生交集，而是緊貼浮動元素邊緣。

計算BFC高度BFC時，自然也會檢測浮動的子盒子高度。

應(yīng)用場景

自適應(yīng)兩欄布局

清除內(nèi)部浮動

防止垂直margin重疊

上面邊距合并例子調(diào)整：


        
上

        margin-bottom:30px;
    


 
 

   

       
下

         margin-top:50px;

關(guān)于bfc的應(yīng)用的案例這里就不在一一舉出了，大家去網(wǎng)上找一些其他的文章看一下。

box-sizing屬性介紹 
box-sizing : content-box|border-box|inherit

content-box(標(biāo)準(zhǔn)盒子),默認(rèn)值,可以使設(shè)置的寬度和高度值應(yīng)用到元素的內(nèi)容框。盒子的寬高只包含內(nèi)容。總寬度=margin+border+padding+width;總高度=margin+border+padding+height

border-box(IE盒子),設(shè)置的width值其實是除margin外的border+padding+element的總寬度。盒子的width包含border+padding+內(nèi)容。總寬度=margin+width; 總高度=margin+height

inherit , 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值

偷兩張圖貼起來~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116047.html

相關(guān)文章

  • CSS中盒模型的理解

    摘要：如圖為了方便大家理解和嘗試，我寫了一個小放上來方便大家嘗試顯示盒模型盒模型計算規(guī)則元素框的總寬度元素的的左邊距和右邊距的值的左邊距和右邊距的值的左右寬度元素框的總高度元素的的上下邊距的值的上下邊距的值的上下寬度。今天突然看到一篇關(guān)于CSS中盒模型的文章，忽然覺得自己竟然遺忘了很多小的地方，所以寫一篇文章來記憶一下 （摘抄于千與千尋寫的CSS盒子模型理解，并在自己基礎(chǔ)上添加了一些東西，希望更完...

    shmily 評論0 收藏0

  • 我理解的css盒模型以及使用場景

    摘要：在中我們可以通過設(shè)置的屬性來完成標(biāo)準(zhǔn)或者怪異模式之間的切換。設(shè)為之后，和的厚度可以隨意調(diào)，并不會溢出父元素。 - css盒模型是什么網(wǎng)頁設(shè)計中css技術(shù)所使用的一種思維模型 - 盒模型的組成 showImg(https://segmentfault.com/img/bVboot5?w=736&h=388); - 盒模型的兩種標(biāo)準(zhǔn)（在不考慮css3的情況下） showImg(https:...

    icyfire 評論0 收藏0

  • 前端人人都應(yīng)該理解的盒模型BFC渲染機制

    摘要：如圖所示如果你眼力不錯或者親自試試會發(fā)現(xiàn)個之間設(shè)置了的距離但是他們現(xiàn)在實際的間距卻是。如何設(shè)置盒模型的類型通過的就可以設(shè)置為盒模型了默認(rèn)是盒模型渲染機制基本慨念是英文縮寫翻譯為塊級格式化上下文。說白了就是一種盒模型的渲染規(guī)則。 前端人人都要懂的盒模型BFC渲染機制 為什么我們說,前端工程師有必要需要了解BFC渲染機制? 因為如果你一個前端壓根沒聽說過BFC,那你是如何理解下面這幾個cs...

    testHs 評論0 收藏0

  • 【快速入門系列】CSS盒模型基礎(chǔ)

    摘要：引言盒模型是頁面布局中經(jīng)常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。 引言 CSS盒模型是頁面布局中經(jīng)常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。 一、什么是...

    Code4App 評論0 收藏0

  • 【快速入門系列】CSS盒模型基礎(chǔ)

    摘要：引言盒模型是頁面布局中經(jīng)常會使用到的一種思維模型，將等概念運用日常生活中的盒子來形容，因此稱之為盒模型。一什么是盒模型我們首先來看一下在中盒模型的樣子我們可以清楚的看出，盒模型由內(nèi)容內(nèi)邊距邊框外邊距組成。 引言 CSS盒模型是頁面布局中經(jīng)常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為盒模型。 一、什么是...

    LinkedME2016 評論0 收藏0

  • 深入理解盒模型與BFC

    摘要：標(biāo)準(zhǔn)盒模型與盒模型開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個盒模型。即的標(biāo)準(zhǔn)盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個元素的組成分為。 標(biāo)準(zhǔn)盒模型與IE盒模型 開發(fā)者們都知道，由于歷史遺留問題與既定標(biāo)準(zhǔn)的發(fā)展，存在著兩個css盒模型。即W3C的標(biāo)準(zhǔn)盒模型以及IE的怪異盒模型。在css中，...

    gself 評論0 收藏0

發(fā)表評論

0條評論

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