CCS 盒模型分析

Jochen 發布于2019-08-30 15:56 / 2094人閱讀

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

基本概念

頁面中的每個元素都可以看成一個盒子，盒子里面可以裝其他盒子，層層嵌套。html 標簽就是最外面的大盒子。每個盒子由內向外分別是 content, padding, border, margin 。

分類

盒模型有兩種，標準盒模型 和 IE盒模型 。主要區別是它們的 width 和 height 不同

標準盒模型

盒子寬高是 content(內容) 的寬高

IE盒模型

盒子寬高是 border + padding + content 的寬高

瀏覽器默認使用標準盒模型，在 ie8+ 中可以通過設置 box-sizing 樣式屬性改變盒模型

box-sizing:

content-box ---> 標準盒模型（默認）

border-box ---> IE 盒模型

通過js獲取盒子寬高

以下 domElement 是表示 HTML 元素的偽代碼

domElement.style.width/height

只能獲取內聯樣式中的寬高

domElement.currentStyle.width/height

獲取的是瀏覽中渲染完成后元素的寬高，只有 IE 瀏覽器支持

window.getComputedStyle(domElement).width/height

和方式2一樣，但可以兼容更多瀏覽器

domElement.offsetWidth/offsetHeight

不管使用的什么盒模型，獲取的都是 IE盒模型 的寬高

外邊距折疊問題

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

兄弟元素間

父子元素間

外邊距折疊解決方案（BFC）

Block Formatting Context （塊級格式化上下文）

BFC 可以簡單地理解為某個元素的一個 CSS 屬性，只不過這個屬性不能被開發者顯式的修改，擁有這個屬性的元素對內部元素和外部元素會表現出一些特性，這就是BFC。

怎樣讓元素創建 BFC

float 的值不為 none （浮動元素）

overflow 的值不為 visible

display 的值為 inline-block 、table-caption 、 table-cell 、flex 、inline-flex

positon 的值為 absolute 或 fixed

(根元素)

BFC 的布局規則

內部的 box 會在垂直方向上一個接一個地放置（平時說的塊級元素一行行放）

box 間垂直方向的距離由 margin 決定。同一個BFC中的兩個相鄰的 box 還是會產生外邊距重疊問題

BFC 的區域不會與浮動的 box 重疊

BFC 是一個獨立的容器，里面的元素不會影響外面的元素，反之亦然。

包含浮動元素，計算 BFC 的高度時，浮動的元素也會參與計算

BFC 的應用場景

分屬于不同 BFC 的元素可以防止垂直外邊距折疊

清除內部浮動（使浮動元素可以撐起父盒子）

自適應兩欄布局（BFC 區域不會與浮動元素重疊）

防止元素被浮動元素覆蓋

float + BFC 兩欄布局:


    left
    right

閱讀原文

參考文章：
關于CSS-BFC深入理解
css 盒子模型理解

GPU云服務器云服務器盒模型盒模型html嗎簡述html盒模型數據模型分析

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

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

CCS 盒模型分析

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

trigkit4 2019-08-02 14:27 評論0 收藏0
Html知識點

摘要：和的區別表示只讀，只能用于文本框，不能修改內容，它的值可以隨表單提交給服務器表示該元素不可用，不響應事件，不能修改內容。同時不響應事件。通配選擇器屬性為的元素中，所有的子元素均采用該樣式。表示按照格式規則正常定位。1、企業應用計算模式主要有：CS模式（客戶端/服務器）和BS模式（瀏覽器/服務器模式） 2、html:超文本標記語言。以標記和子標記描述網頁元素。　　http：超文本傳輸協議。 3...

番茄西紅柿 2019-04-23 13:35 評論0 收藏0
盒模型/行內框盒子模型及line-height/vertal-align取值分析

摘要：標準盒模型下，設置的的值后，這個值僅包含的寬高，而在盒模型下，這個值是后的寬高。例標準盒模型下，占據的實際寬為實際高度同理。對齊所處行內框盒子的頂部對齊所處行內框盒子的底部。盒模型盒模型之所以稱為盒是因為在一個頁面布局中，文檔中的每一個元素（塊級元素）均呈現為一個矩形的盒子，這個盒子包含：內容（content） + 內邊距（padding） + 邊框（border） + 外邊距（p...

jackwang 2019-08-30 15:52 評論0 收藏0
盒模型/行內框盒子模型及line-height/vertal-align取值分析

摘要：標準盒模型下，設置的的值后，這個值僅包含的寬高，而在盒模型下，這個值是后的寬高。例標準盒模型下，占據的實際寬為實際高度同理。對齊所處行內框盒子的頂部對齊所處行內框盒子的底部。盒模型盒模型之所以稱為盒是因為在一個頁面布局中，文檔中的每一個元素（塊級元素）均呈現為一個矩形的盒子，這個盒子包含：內容（content） + 內邊距（padding） + 邊框（border） + 外邊距（p...

MAX_zuo 2019-08-01 16:16 評論0 收藏0