CSS規範裡的一些事 一

2021-09-14 04:05:24 字數 4408 閱讀 6489

前言:以下內容總結於css2.1規範,

一、盒子模型

以上圖形說的是盒子模型中的content、padding、border、margin邊界。

樣式盒的內容區的尺寸—content width和content height —取決於幾個因素:生成該盒的元素是否設定了'width'或'height'屬性,該盒是否包含文字以及其它盒,該盒是不是**等等。盒的內容,內邊距和邊框區域的背景樣式由生成(該盒的)元素的'background'屬性來指定。外邊距背景總是透明的。

合併外邊距css中,兩個或多個盒(可能但不一定是兄弟)的相鄰的margin會被結合成乙個margin。外邊距按這種方式結合叫做合併(collapse),產生的結合的外邊距叫做摺疊外邊距(collapsed margin 譯註:這裡譯作摺疊表示結果,與合併的動作區分開)

都屬於流內(in-flow)塊級盒,處於同乙個塊格式化上下文;

沒有行框(line box),空隙,內邊距和邊框把它們隔開;

都屬於垂直相鄰框邊界(vertically-adjacent box edges),即形成下列某一對:

盒的上邊距與其第乙個流內(in-flow)孩子的上邊距

盒的下邊距與其下乙個流內緊挨著的兄弟的上邊距

最後乙個流內孩子的下邊距與其height計算值為'auto'的父元素的下邊距

盒的上邊距和下邊距,要求該盒沒有建立新的塊格式化上下文,並且'min-height'計算值為0,'height'計算值為0或'auto',還沒有流內孩子摺疊外邊距也能與另乙個外邊距相鄰,只要其外邊距的任意一部分與那個外邊距相鄰就算

合併後的結果:

當兩個或者更多的margin合併時,產生的margin寬度為被合併的外邊距寬度中的最大值。至於負margin,就從正相鄰margin的最大值中減去負相鄰margin的絕對值的最大值。如果沒有正margin,就用0減去相鄰margin的絕對值的最大值。如果該元素的外邊距與其父元素的上外邊距合併了,盒的上邊框邊界被定義為與其父元素的相同否則,要麼該元素的父元素沒參與外邊距合併,要麼只涉及其父元素的下外邊距。該元素上邊框邊界的位置與元素下邊框非0時的位置相同。

內邊距padding內邊距的屬性和外邊距的屬性類似, 有一點不同的是,內邊距padding不能為負。

邊框border這個屬性比較簡單, 有些樣式而已。

二、視覺格式化模型

在視覺格式化模型中,文件樹中的每個元素根據其盒模型生成0個或多個盒。這些盒的布局由(以下因素)控制:
* 盒尺寸與型別

* 定位方案(常規流,浮動與絕對定位)

* 文件樹中元素間的關係

* 外部資訊(例如,視口大小,的固有尺寸等等)

包含塊

css 2.1中,很多盒的位置和大小是根據被稱為包含塊的矩形框的邊界計算的。一般把生成的盒作為後代盒的包含塊,我們說乙個盒為其後代「建立」了包含塊。「乙個盒的包含塊」表示「盒所在的包含塊」,而不是它生成的(包含塊)每個盒都根據其包含塊確定了乙個位置,但它不受該包含塊的限制,可能會溢位

塊級元素與塊盒

行級元素與行內盒

使用display屬性可以定義block、inline-block、inline、list-item、none等樣式。以下分別是這幾種屬性的作用:

定位方案

浮動 在浮動模型中,盒先根據常規流來放置,然後從常規流中取出來並盡可能遠地向左或向右移動。其它內容可能沿著浮動(盒)的一側排列(content may flow along the side of a float)

* 絕對定位 在絕對定位模型中,乙個盒會從常規流中全部移除(它不會影響後面的兄弟元素)並根據包含塊確定位置

* 如果乙個元素是浮動的,絕對定位的或者是根元素,它就叫流外(out of flow)(元素)。如果乙個元素不是流外的,就叫流內(in-flow)(元素)。

static盒是個常規盒,根據常規流布局。'top','right','bottom'和'left'屬性失效.

relative

盒的位置是根據常規流計算的(被稱為常規流中的位置),然後盒相對於其常規位置偏移。當盒b為相對定位時,後面的盒的位置仍按照b沒有偏移量來計算。table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell和table-caption元素上'position:relative'的效果是未定義的

absolute

盒的位置(及可能的大小)由'top','right','bottom'和'left'屬性指定,這些屬性指定了相對於盒的包含塊的偏移量。絕對定位的盒脫離了常規流,意味著它們不會影響後面兄弟元素的布局,而且,雖然絕對定位的盒有外邊距,但它們不會與任何其它外邊距合併

fixed

除了盒相對於某些參照(reference)是固定的(fixed)之外,盒的位置根據'absolute'模型來計算。如同'absolute'模型一樣,盒的外邊距不會與任何其它外邊距合併。

三、常規流

常規流中的盒屬於乙個格式化上下文,可能是塊或是行內(格式化上下文),但不能兩者都是。塊級盒參與塊格式化上下文。行內級盒參與行內格式化上下文.
塊格式化上下文

浮動,絕對定位的元素,非塊盒的塊容器(例如inline-blocks,table-cells和table-captions),以及』overflow』不為』visible』的塊盒(當該值已被傳播到視口時除外(except when that value has been propagated to the viewport))會為其內容建立新的塊格式化上下文.

在乙個塊格式化上下文中,盒在垂直方向乙個接乙個地放置,從包含塊的頂部開始。兩個兄弟盒之間的垂直距離由'margin'屬性決定。同乙個塊格式化上下文中的相鄰塊級盒之間的垂直外邊距會合併.

在乙個塊格式化上下文中,每個盒的左外邊界(left outer edge)挨著包含塊的左外邊界(對於從右向左的格式化,右外邊界挨著)。即使存在浮動(儘管乙個盒的行框可能會因為浮動而收縮 譯註:環繞浮動元素放置的行框比正常的行短一些),這也成立。除非該盒建立了乙個新的塊格式化上下文(這種情況下,該盒自身可能會因為浮動變窄)

行內格式化上下文

在行內格式化上下文中,盒是從包含塊的頂部開始乙個挨乙個水平放置的。這些盒之間的水平外邊距,邊框和內邊距都有效。盒可能會以不同的方式垂直對齊:以它們的底部或者頂部對齊,或者以它們裡面的文字的基線對齊。包含來自同一行的盒的矩形區域叫做行框

行框的寬度由包含塊和浮動情況決定,行框的高度由行高的計算小節給出的規則決定

行框總是足夠高,能夠容納它包含的所有盒。然而,它可能比它所包含的最高的盒還要高(例如,如果盒是以基線對齊的)。當盒b的高度小於它所在的行框的高度時,行框中b的垂直對齊方式由'vertical-align'屬性決定。當幾個行內級盒在水平方向上不能共存於乙個行框時,它們會被分到兩個或多個垂直堆疊的(vertically-stacked) 行框裡。因此,段落就是個行框的垂直棧(vertical stack)。行框沒有垂直間隔地堆放(除非在其它地方有特別說明)並且它們不會重疊

相對定位

當乙個盒根據常規流或者浮動擺放好後,它可能會相對於該位置移動,稱之為相對定位。用這種方式偏移盒(b1)的位置不影響盒(b2),遵循:給定b2位置時就當b1沒有偏移,並且b2在b1應用偏移之後沒有重新定位(re-positioned)。這表明相對定位可能會導致盒重疊。然而,如果相對定位導致有'overflow:auto'或'overflow:scroll'的盒溢位了的話,ua必須讓使用者能夠訪問這部分內容(在其偏移位置),此時,滾動條的建立可能會影響布局
絕對定位

絕對定位模型中,盒相對其包含塊明確偏移,它會從常規流中全部移除(不會影響後面的兄弟)。絕對定位的盒會為常規流中的子級和絕對(不包括fixed)定位的後代建立乙個新的包含塊。然而絕對定位的元素的內容不會沿著任何其它盒排列。它們可能會遮住其它盒的內容(或者它們自身被遮住),取決於重疊盒的堆疊層級(stack levels)

fixed定位是絕對定位的子類(subcategory)。fixed定位的盒唯一的區別是,包含塊由視口建立。對於連續**,當文件滾動時,fixed盒不會移動。在這一點上,它們和fixed背景影象類似。對於分頁**,fixed定位的盒會在每一頁上重複(出現)。這在排版(placing)方面很有用,例如,每一頁的底部都有乙個簽名。fixed定位的盒比頁區(page area)大的部分會被裁剪。fixed定位盒在初始包含塊中不可見的部分將不會被列印

學習CSS一些事(上)

p.s 這是我在學習中總結出來知識,如有不對,請多包涵。謝謝。css樣式 行內樣式,內部樣式,外部樣式,他們的優先順序是 行內,內部,外部,遵循就近原則。一 html css布局分為三大類,一是流式布局,二是浮動布局,三是絕對定位布局。1 流式布局 流式布局,如同水經過不同通道,呈現出不一樣的方式。...

一些人,一些事,一些

我覺得這是國內it企業浮躁和傳統的官本位性質決定的,導致國內企業都本末倒置。要想改變命運,我覺得有以下出路 1.不做技術了,改做混混 混混的概念很廣泛的,比如銷售 經理 幹部 皮包公司之類其實都屬於這類。中國就是這樣,越浮越掙錢,只有混混才能發財。要不更進一步,做流氓,廣義的流氓,也很不錯。2.專心...

一些程式設計規範

類和介面命名 類名是個名詞,採用大小寫混合的方式,首字母必須大寫,如果為片語,則每個單詞的首字母也必須要大寫,類名必須使用名詞,或名詞片語。介面一般要使用able ible er 等字尾。方法的命名 方法名是乙個動詞,採用大小寫混合的方式,第乙個單詞的首字母小寫,其後單詞的首字母大寫。類中常用方法的...