視覺類型的媒體根據(jù)CSS的視覺格式化模型(Visual formatting model)的規(guī)則來處理文檔樹中的元素,從而將(X)HTML轉(zhuǎn)化成制作者設(shè)計(jì)的樣子。
例如:
如何生成元素框;
處理各元素之間的關(guān)系;
根據(jù)框的尺寸、定位等CSS屬性來確定元素的位置等;
因此,要掌握使用CSS控制頁面內(nèi)元素的技巧,就需要深入了解框模型(Box Model)及視覺格式化模型的原理。
文檔樹中的元素都產(chǎn)生矩形的框(Box),這些框影響了元素內(nèi)容之間的距離、元素內(nèi)容的位置、背景圖片的位置等等。而瀏覽器根據(jù)視覺格式化模型(Visual formatting model)來將這些框布局成訪問者看到的樣子。
視覺格式化模型中也有“布局(layout)”的概念,但是這個(gè)與頁面設(shè)計(jì)經(jīng)常用到的類似“3行2列”或者“3行3列”中的“排版布局”的概念不同,視覺格式化模型中的“布局”是指每個(gè)元素該如何來顯示。
CSS 2.1中,一個(gè)控制框的布局可以根據(jù)三種定位方案:
常規(guī)流向。CSS 2.1中,常規(guī)流向包含塊框的塊格式化,行內(nèi)框的行內(nèi)格式化,塊框或行內(nèi)框的相對(duì)定位,以及插入框的定位。
浮動(dòng)。在浮動(dòng)模型中,一個(gè)框首先根據(jù)常規(guī)流向布局,再將它從流中取出并盡可能地向左或向右偏移。內(nèi)容可以排列在一個(gè)浮動(dòng)的邊上。
絕對(duì)定位。在絕對(duì)定位模型中,一個(gè)框整個(gè)地從常規(guī)流向中脫離(它對(duì)后續(xù)的兄弟元素沒有影響),并根據(jù)包含塊來分配其定位。
在理解視覺格式化的概念之前,要明確一點(diǎn):包含塊(Containing Block)是視覺格式化模型的一個(gè)重要概念,它也可以理解為一個(gè)矩形,而這個(gè)矩形的作用是為它里面包含的元素提供一個(gè)參考,元素的尺寸和位置的計(jì)算往往是由該元素所在的包含塊決定的。
框模型(Box model,也譯作“盒模型”)是CSS非常重要的概念,也是比較抽象的概念。
文檔樹中的元素都產(chǎn)生矩形的框(Box),這些框影響了元素內(nèi)容之間的距離、元素內(nèi)容的位置、背景圖片的位置等等。而瀏覽器根據(jù)視覺格式化模型(Visual formatting model)來將這些框布局成訪問者看到的樣子。
因此,要掌握使用CSS布局的技巧,就需要深入了解框模型和視覺格式化模型的原理。
瀏覽器內(nèi)顯示的元素都可以看作是一個(gè)裝了東西的矩形的盒子,這些矩形的盒子嵌套、疊加或者并列在一起,形成了頁面。
提示:“box model”往往被譯為“盒模型”。但是盒子是具有厚度的,也就是說盒子是三維的,而框則沒有厚度,是二維的,因此本書采用了“框模型”這個(gè)譯法。
圖1顯示了每一個(gè)元素的“框(Box)”由幾部分組成:
內(nèi)容(content)
例如:文字、圖片或者其他元素等,內(nèi)容也可以看作是一個(gè)長方形的框,width(寬度)和height(高度)2個(gè)CSS屬性設(shè)定的就是內(nèi)容框的寬度和高度。
邊框(border)
邊框(也譯為邊界)是可以具體顯示出來的,可以設(shè)定寬度、外觀樣式和顏色。
補(bǔ)白(padding)
補(bǔ)白(也譯為填充、內(nèi)邊距、內(nèi)補(bǔ)丁等)是內(nèi)容框與邊框之間的距離,補(bǔ)白部分顯示的是背景。
邊距(margin)
邊距(也譯為邊白、外邊距、外補(bǔ)丁等)是邊框外的透明區(qū)域,用來設(shè)定本元素與其它元素之間的距離。
一個(gè)元素框,又有上、右、下、左四個(gè)方向的邊,如圖2所示。
由圖2大家可以發(fā)現(xiàn),1個(gè)元素所占的區(qū)域其實(shí)是由幾個(gè)矩形框組成:元素的內(nèi)容框、補(bǔ)白形成的框、元素的邊框以及邊距形成的框。這些框的邊緣又有如下定義:
元素內(nèi)容框的邊緣,稱為“內(nèi)容邊(content edge)”或“內(nèi)邊(inner edge)”,4條內(nèi)容邊形成“內(nèi)容框(content box)”。
補(bǔ)白形成的框的外邊緣,稱為“補(bǔ)白邊(padding edge)”,補(bǔ)白邊圍繞框的補(bǔ)白。如果補(bǔ)白寬度為0,則補(bǔ)白邊和內(nèi)容邊重合。4條補(bǔ)白邊形成“補(bǔ)白框(padding box)”。
邊框形成的框的外邊緣,稱為“邊框邊(border edge)”。如果邊框?qū)挾葹?,則邊框邊和補(bǔ)白邊重合。4條邊框邊形成“邊框框(border box)”。
邊距形成的框的外邊緣,稱為“邊距邊(margin edge)”或“外邊(outer edge)”,邊距邊圍繞框的邊距。如果邊距寬度為0,則邊距邊和邊框邊重合。4條邊距邊形成“邊距框(margin box)”。
內(nèi)容框的尺寸(寬度和高度)取決于若干個(gè)因素,例如:
產(chǎn)生框的元素是否設(shè)定了width屬性或height屬性;
框是否包含文本或其它框;
框是否是一個(gè)表格等等。
例如下列代碼(查看實(shí)例)其內(nèi)容框與框之間的關(guān)系,如圖3、圖4所示。
新聞熱點(diǎn)
疑難解答
圖片精選