如何利用html和css寫好一個頁面？怎么去布局排版芬萍？什么是文檔流尤揣？對于新手來說利用html和css布局好一個頁面至關重要，因為這是我們寫好一個交互的基礎柬祠。
為什么寫這篇文章北戏？
一直以來，很多同學漫蛔，尤其是入門不久的同學都會認為html和css是前端課程中最簡單的語言了嗜愈，以至于沒有給于它們足夠多的關照旧蛾，在之后項目開發(fā)中，常常由于布局的問題蠕嫁，沒有給js留足夠多的發(fā)揮空間锨天，而導致邏輯層無法入手，回過頭又去更改布局拌阴，使開發(fā)效率不能有效的提高绍绘。
瀏覽器的兼容問題一直是一個讓大多數(shù)前端同學頭冷的問題奶镶，其實迟赃，當我們做的足夠多的時候，我們會發(fā)現(xiàn)厂镇，這些大多數(shù)的兼容問題的產(chǎn)生其實都是由于我們在布局的時候不夠嚴謹所導致的纤壁，你要說IE清除浮動和標準瀏覽器的清除浮動不是一種方式，這可以理解捺信，我們使用兼容的語法去寫就可以酌媒，并且代碼量不大，但是迄靠，我們常常因為布局而導致不同瀏覽器上的展示不同秒咨，而去采用大量的相對定位等強搬硬套的方式處理，這顯然不是一個正確的處理方式
在正文開始之前掌挚，我們先簡單了解一下什么是文檔流
什么是文檔流雨席？
當看到文檔流這三個字的時候，相信很多同學都會楞一下吧吠式，那么到底是什么是文檔流呢陡厘，我們不妨就拿流這個字來掰扯掰扯，流我們就理解為水流特占，假如有一個水桶糙置，本身里面沒有水，打開水龍頭之后是目，水會一下就充滿這個桶呢還是會慢慢的變滿谤饭？答案肯定是慢慢的，一點一點的直到水桶中的水滿為止懊纳，那么文檔流也是如此揉抵，本身你的頁面是一個空白的窗戶紙，就和水桶一樣长踊，你呢功舀，就是相當于水龍頭，把水裝到它里面身弊，而這些水也就是我們平常使用到的各種各樣的元素辟汰，比如div列敲、img等，一點一點充滿我們整個屏幕帖汞，這時候配合css等等戴而，一個頁面也就形成了，而元素按照一定的規(guī)則在頁面里排列的過程就是文檔流
正常流情況下翩蘸，水桶中的水自下而上的滿所意，而我們的頁面是自上而下，自左往右的排列催首，如果也自下而上扶踊，那真的就反人類了，排一個頁面還得反著排郎任，我們都知道塊級元素獨占一行秧耗，行內(nèi)元素根據(jù)上下文會和其他行內(nèi)元素并列一行排列，浮動脫離文檔流也只是脫離它父元素的舶治，定位脫離文檔流的范圍也是根據(jù)父元素或其他因素來決定的分井，這個不在這里過多解釋
啰嗦了這么多，我們來正式聊一聊布局的問題
我們都知道布局簡單霉猛，又沒有那么簡單尺锚，因為我們?yōu)榱俗屇切┍涞拇u頭（元素）能夠按照我們的藍圖（UI設計圖）變成一棟漂亮的大別墅（網(wǎng)頁），我們除了合理的搭建惜浅，還需要配合css瘫辩！
1.看下圖，第一眼看到這個頁面的時候赡矢，我們應該如何去設計布局呢杭朱？
實在不知道從何下手？那么我們先簡單劃分一下
其實我們寫布局也就是盒子套盒子吹散，和蓋房子其實是一個道理弧械，需要承重墻，組成客廳空民、臥室的主結構刃唐，我們不能把所有東西不經(jīng)區(qū)分放在一個盒子中，就像你的客廳和臥室需要一棟墻來劃分一樣界轩，然后客廳有客廳的風格画饥，臥室有臥室的韻味，都是在兩個大結構下浊猾，然后細分抖甘，這樣你才能知道哪些是客廳的東西，哪些是臥室的東西葫慎，各司其職衔彻！
我們來分析一下上面的結構：
- 紅色框線的盒子
a) 這個為最大的盒子薇宠，也就是相當于你院子的圍墻一樣，用來裝你的房子艰额，花園等澄港，證明是你獨有的，或這個大模塊獨有的主體結構柄沮，就像我們寫js回梧，習慣把一個模塊定義為一個類一樣 - 左邊藍色框的盒子和右邊綠色線的盒子
a) 我們?yōu)槭裁匆@么分呢？我們能夠清楚的看到左邊是一整塊貫穿而下祖搓，因此我們認為它是一個整體狱意，并且它和右邊的盒子有一個明顯的間距，但是為什么以第一條間隔來分而不是第二個間隔來分呢 棕硫，我們可以看到下面三張圖是一樣的樣式髓涯，明顯是一個整體，因此我們不能把他們分開哈扮，我們分盒子，也是分類的過程蚓再，布局其實先是從宏觀的角度整體去看
b) 這樣我們左邊一個大盒子滑肉，用來承載左邊的內(nèi)容，右邊一個用來承載右邊的內(nèi)容摘仅，一個浮動即可搞定靶庙，也就是讓兩個盒子變?yōu)橐恍校泻芏喾N方式娃属，這里不贅述 - 右邊盒子中的灰色盒子和黃色盒子
a) 我們在前面提到最下面三張圖片明顯可以看出來是一種樣式結構六荒，我們則認為他是一個整體，所以我們需要把它放在一個盒子中矾端，而不是分開掏击，就比如我們不能讓客廳的一部分延伸到臥室一樣
b) 因此，下面是一個整體秩铆，下面承載圖片的整體和上面的塊之間有一個明顯的間距砚亭，因此我們就分為上下兩塊 - 總結，從宏觀角度看設計圖殴玛，先劃分好模塊捅膘，寫出承載子類的大模塊，在往這些模塊中填寫東西滚粟，這樣我們的頁面就不會亂寻仗，很有條理，并且便于維護
接下來凡壤，來個復雜的
紅色部分我們已經(jīng)討論過了署尤，就是用來劃分大區(qū)域蔬咬，先劃分主要區(qū)域
我們對每個大區(qū)域下的小區(qū)域又進行了細分，那么為什么還要套這么多盒子呢沐寺？
我們來舉個栗子：
軍隊中有司林艘、軍、師混坞、旅狐援、團、營究孕、連啥酱、排、班...等等厨诸，我們清楚镶殷，是為了便于管理，一旦有問題微酬，可以快速定位绘趋，也可以明確分工，那么我們布局也是一樣的颗管，都是為了方便管理和維護陷遮，每一個模塊都有一個盒子來存放，一旦需要改垦江，我們只需要改一塊就可以帽馋，而不會影響到其他的部分那么到底怎么劃分呢？
a) 布局位置間距等具有統(tǒng)一性比吭，用盒子包裹
b) 內(nèi)容（元素）樣式具有相似性绽族，我們就劃分為一類
c) 內(nèi)容（元素）超過一個以上，我們用大盒子包裹
建議：
- 細分模塊方便管理衩藤，能夠快速定位問題以及修改吧慢，而盡可能小的影響其他元素
- 通過修改父級盒子就可影響子元素位置間距等，而無需調(diào)整子元素
- 定位少慷彤，引起的瀏覽器展示問題少
- 盡量把行變?yōu)榱新Π瑴p少浮動，盒子塌陷問題少底哗，浮動必須解決父元素高度塌陷問題等岁诉，解決高度塌陷問題的方法至少有四五種以上，這里不贅述
- 盒子嵌套盡量使用多的標簽元素跋选，不要一味使用div或者單獨一個元素涕癣，合理嵌套，比如段落用<p>標簽，加上h5新增的語義化標簽<nav>坠韩、<header>等距潘，增加代碼的可讀性、可維護性
- 開發(fā)完成后多瀏覽器預覽只搁，比如mac下的chrome音比、firefox、safari等等氢惋，windows下的 chrome洞翩、firefox、IE等等焰望，然后進行適當微調(diào)骚亿，因為每個瀏覽器對dom樹和css規(guī)則樹的解析有所區(qū)別，但是當我們布局嚴謹?shù)臅r候熊赖，發(fā)生問題可能性則可以盡量減少来屠，最不濟也只是有的模塊由于寬度不夠而掉下去，我們只需要調(diào)整幾個像素的間距就可以完成所有瀏覽器展示統(tǒng)一了
以上就是我對布局的一些理解震鹉，文字很多俱笛，感謝閱度，如有不合理的地方足陨，請一定一定賜教嫂粟！
