原文
大綱
1欢策、認(rèn)識(shí)可視化模型
2黄鳍、可視化模型的內(nèi)容
3、可視化模型的影響因素
1窃款、認(rèn)識(shí)可視化模型
盒子模型是CSS中所有元素產(chǎn)生的box的自身構(gòu)成课兄，而可視化格式模型則是把這些box，按照規(guī)則擺放到頁面上晨继，也就是通常所說的布局烟阐。換句話說，可視化格式模型是整個(gè)頁面的模型紊扬，這個(gè)模型規(guī)定了怎么在頁面里擺放box蜒茄，box相互作用等等。屬于CSS的最為核心的概念之一餐屎。
可視化格式模型檀葛，官方的說法是，它規(guī)定了用戶端在媒介中如何處理文檔樹(document tree)腹缩。
● 用戶端屿聋，對(duì)我們來說一般指瀏覽器空扎。
● 媒介，相當(dāng)于我們展現(xiàn)頁面的介質(zhì)润讥。如转锈，紙媒介，聽覺瀏覽器和顯示器等象对。
● 文檔樹(document tree)是指源文檔中元素樹的編碼黑忱。樹中，每一個(gè)元素恰好由一個(gè)父元素勒魔。根元素是例外甫煞，它沒有父元素。就是document和頁面上的元素所構(gòu)成的類似樹形的結(jié)構(gòu)冠绢。
2抚吠、可視化模型的內(nèi)容
網(wǎng)頁布局根據(jù)可視化格式模型來進(jìn)行布局，而影響可視化格式模型的大致有幾個(gè)方面弟胀，外部環(huán)境楷力，box模型，定位機(jī)制孵户，文檔樹萧朝。
1、外部環(huán)境指的是設(shè)備夏哭，窗口等外設(shè)信息
2检柬、文檔樹指的是各個(gè)元素在文檔樹中的位置從而影響網(wǎng)頁排版
3、box模型講述的是網(wǎng)頁上的各個(gè)元素以盒子的形式在網(wǎng)頁上布局竖配，但是是以怎樣的盒子在網(wǎng)頁上布局是根據(jù)各種不同的情況而定的
4何址、定位機(jī)制講述的是如何將各個(gè)不同的盒子按照需求排列到網(wǎng)頁上
網(wǎng)頁布局本質(zhì)上就是講各個(gè)HTML元素盒子在網(wǎng)頁上按照不同的定位機(jī)制進(jìn)行排版定位。
塊框( block boxes )和行內(nèi)框( inline boxes )只是三種定位體系之一的常規(guī)流( Normal flow )进胯，而塊級(jí)格式上下文（Block Formatting Context）和行內(nèi)格式上下文( inline formatting )只是他們的元素創(chuàng)建的格式上下文用爪，他們本身其實(shí)并不是上下文，是對(duì)內(nèi)框的排列的一種約束胁镐。
3偎血、可視化模型的影響因素
在可視化格式模型中，每一個(gè)元素都會(huì)根據(jù)盒子模型產(chǎn)生0個(gè)或多個(gè)box盯漂，而這些box的布局受以下因素的影響：
3.1烁巫、box尺寸和類型
類型是指 display 特性所決定的元素類型，如：DIV 是塊級(jí)元素宠能，SPAN 是行內(nèi)元素等亚隙。
3.2、定位體系
元素在布局時(shí)违崇，根據(jù)3種定位體系定位阿弃。分別是诊霹，常規(guī)流、浮動(dòng)和絕對(duì)定位渣淳。這3種定位體系的詳細(xì)內(nèi)容會(huì)在后面講到脾还。
3.3、 在文檔樹中入愧，元素之間的關(guān)系鄙漏。
比如，一個(gè)塊元素包含兩個(gè)互為兄弟節(jié)點(diǎn)的浮動(dòng)元素棺蛛，后面那個(gè)浮動(dòng)元素的布局怔蚌，會(huì)受前面元素以及它包含塊的影響。
3.4旁赊、 外部信息桦踊。
比如，可視窗口的大小终畅，我們有時(shí)候會(huì)做頁面自適應(yīng)窗口大小的功能籍胯，就是因?yàn)椋翱诖笮?duì)布局有影響离福。再如杖狼，圖片的固有尺寸，會(huì)影響行內(nèi)替換元素的尺寸妖爷，進(jìn)而影響這個(gè)布局本刽。
