CSS2中盒模型與布局的一些概念關系

happyhuangjinjin 發(fā)布于2019-08-30 15:55 / 3208人閱讀

摘要：的一些名詞和概念用來幫你更明確地去描述世界的事物。具體信息可以參考盒模型的解釋，這里暫且不作展開。的位置和大小時根據(jù)一個稱為的邊界進行計算的。其它情況，依據(jù)設定的值進行處理指定值最終表現(xiàn)值與指定值相同

CSS的一些名詞和概念

用來幫你更明確地去描述HTML/CSS世界的事物。

box

在CSS中，一個元素就可以看作一個box。具體信息可以參考盒模型的解釋，這里暫且不作展開。

containing blocks

Box的位置和大小時根據(jù)一個稱為containing blocks的邊界進行計算的。

block-level elements 和 block boxes

block-level elements 一般指HTML中的特定類型的元素，比如div，p，ul等。
block boxes 指形成一個block formatting contexts的boxes。可以確定的時正常的block-level（沒有改變它的position，display等默認屬性值）可以形成一個BFC。But，如果元素等display屬性值為 "block", "list-item", 或 "table"中的一種，也可以對外表現(xiàn)出塊級元素的行為。也會成為一個block box。

BFC（Block formatting contexts）

哪些情況會產(chǎn)生一個BFC：

根元素

float元素（float屬性不是none）

display： block，table-cell，table-captain，list-item， table、table-row、 table-row-group、table-header-group、table-footer-group

position是absolute的元素（絕對定位）

overflow不等于visible

flex 元素

grid 元素

在一個BFC中，形成一個獨立的布局環(huán)境，里面元素等布局位置不會受外部元素影響。

IFC （Inline formatting contexts）

與BFC對應，一個行內(nèi)元素默認也會形成一個IFC（行內(nèi)格式化上下文）。IFC有個不同于一般的常識的特性：

當inline-level box寬度大于父容器寬度時會被拆分成多個inline-level box;
當屬性direction為ltr時，margin/border/padding-left將作用于第一個的inline-level box，margin/border/padding-right將作用于最后一個的 inline-level box;
若屬性direction為rtl時，margin/border/padding-right將作用于第一個的inline-level box，margin/border/padding-left將作用于最后一個的inline-level box;

before An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a "display" value of "inline" generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. after

注意示例中，content 元素這段話開頭和結尾的外邊距大小。

在CSS2中，一個盒子的定位模式通常是一下三種：

Normal flow：正常的文檔流是由 BFC、IFC和position是relative的 block boxes或inline boxes 組成。

Floats float屬性值不等于none的元素通常稱之為浮動元素。

absolute positioning （絕對定位元素）絕對定位的元素完全從正常的文檔流中移除，它的位置不會影響它后面元素的位置。

positioned element

position屬性值不是static的元素稱之positioned element。

display，position和float的相對關系

我們知道，display，position和float都會對元素的布局位置表現(xiàn)產(chǎn)生影響。那么它們?nèi)咧g是如何起作用的呢？

如果display:none; position和float將不會再起任何作用；

如果position屬性是absolute或fixed，則float屬性置為none（可以理解為不再存在float行為，即使手動設置了float不為none）， display行為依據(jù)下表的規(guī)則展示；元素的定位會依據(jù)top/right/bottom/left進行計算。

如果float屬性值不為none，則display屬性依據(jù)下表的規(guī)則展示；

如果元素是根元素，則display的展示依據(jù)下表規(guī)則表現(xiàn)。

其它情況，依據(jù)display設定的值進行處理

指定值	最終表現(xiàn)值
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	與指定值相同

云服務器 GPU云服務器關系數(shù)據(jù)模型的數(shù)據(jù)庫管理系統(tǒng) 關系模型云計算與大數(shù)據(jù)的概念關系數(shù)據(jù)模型

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

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

CSS中的語法與概念

摘要：屬性語法層面僅對屬性作粗略分類。重點還是概念均決定了布局基礎模式。常規(guī)布局的重心與難點。對應標準第章布局上下文格式化上下文在常規(guī)流中的框，都屬于一個格式化的上下文中規(guī)則脫胎自文字排印，核心概念是。發(fā)端自此。本文細節(jié)從略，只做主干梳理。 showImg(https://segmentfault.com/img/bVpFuh); 這個樹主要還是在借CSS2.1標準的骨架，填充進一些新的C...

funnyZhang 2019-08-28 18:12 評論0 收藏0
深入css布局 (2) — 定位與浮動

摘要：深入布局定位與浮動在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。定位后，原來在文檔流中占據(jù)的位置，會被其他元素所占據(jù)。清除浮動的特殊應用清除浮動可以解決父元素高度塌陷問題。? 深入css布局(2) — 定位與浮動 ? ???? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們來深...

Crazy_Coder 2019-04-23 13:42 評論0 收藏0
關于css margin，你需要知道的一切

摘要：前兩個元素之間的是，因為較小的頂部與較大的底部相結合。這是由于兩個重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時，元素周圍的大小都是相同的。為了保證的可讀性，本文采用意譯而非直譯。當我們學習CSS時，我們大多數(shù)人學到的第一件事是CSS中盒子的各個部分的細節(jié)，這部分通過叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周圍的透明區(qū)域，它會將其他元素從盒子...

FreeZinG 2019-08-30 15:44 評論0 收藏0
關于css margin，你需要知道的一切

摘要：前兩個元素之間的是，因為較小的頂部與較大的底部相結合。這是由于兩個重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時，元素周圍的大小都是相同的。為了保證的可讀性，本文采用意譯而非直譯。當我們學習CSS時，我們大多數(shù)人學到的第一件事是CSS中盒子的各個部分的細節(jié)，這部分通過叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周圍的透明區(qū)域，它會將其他元素從盒子...

libxd 2019-08-26 10:28 評論0 收藏0
淺談CSS3 box-sizing 屬性有趣的盒模型

摘要：盒模型的組成大家肯定都懂，由里向外盒模型是有兩種標準的，一個是標準模型，一個是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂，由里向外content,padding,border,margin. 盒模型是有兩種標準的，一個是標準模型，一個是IE模型。 ?從上面兩圖不難看出在標準模型中，盒模型的寬高只是內(nèi)容（content）的寬高，而在IE模型中盒模型...

K_B_Z 2019-04-23 11:41 評論0 收藏0