前言:以下內容總結於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 等字尾。方法的命名 方法名是乙個動詞,採用大小寫混合的方式,第乙個單詞的首字母小寫,其後單詞的首字母大寫。類中常用方法的...