css盒模型理解

xingqiba 發布于2019-08-30 15:43 / 3513人閱讀

摘要：盒模型概念盒子模型又稱框模型，包含了元素內容內邊距邊框外邊距幾個要素。盒子垂直方向的距離由決定。屬于同一個的兩個相鄰盒子垂直方向的會發生重疊。計算高度時，自然也會檢測浮動的子盒子高度。總寬度總高度盒子設置的值其實是除外的的總寬度。

css盒模型概念

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

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

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

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

css外邊距合并(疊加)

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




    
    Document
    


    
        上
        margin-bottom:30px;
    
    
        下
        margin-top:50px;

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

邊距合并解決方案(BFC)

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

元素產生BFC的條件

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

position為absolute或fixed

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

overflow不為visible

BFC元素所具有的特性

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

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

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

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

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

應用場景

自適應兩欄布局

清除內部浮動

防止垂直margin重疊

上面邊距合并例子調整：


        上
        margin-bottom:30px;
    

 
 
   
       下
         margin-top:50px;

關于bfc的應用的案例這里就不在一一舉出了，大家去網上找一些其他的文章看一下。

box-sizing屬性介紹

box-sizing : content-box|border-box|inherit

content-box(標準盒子),默認值,可以使設置的寬度和高度值應用到元素的內容框。盒子的寬高只包含內容。總寬度=margin+border+padding+width;總高度=margin+border+padding+height

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

inherit , 規定應從父元素繼承 box-sizing 屬性的值

偷兩張圖貼起來~

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型盒遙控

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

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

CSS中盒模型的理解

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

shmily 2019-04-23 11:49 評論0 收藏0
我理解的css盒模型以及使用場景

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

icyfire 2019-08-30 15:55 評論0 收藏0
前端人人都應該理解的盒模型BFC渲染機制

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

testHs 2019-08-30 13:52 評論0 收藏0
【快速入門系列】CSS盒模型基礎

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

Code4App 2019-08-29 15:20 評論0 收藏0
【快速入門系列】CSS盒模型基礎

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

LinkedME2016 2019-08-02 10:22 評論0 收藏0
深入理解盒模型與BFC

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

gself 2019-08-29 17:14 評論0 收藏0