“小白晃财，網(wǎng)頁分析的怎么樣了？”
“小有感觸典蜕，我發(fā)現(xiàn)很多網(wǎng)站頭部和底部容器都是通欄的断盛，瀏覽器窗口多寬，他們就有多寬愉舔。這些好像是自動(dòng)適應(yīng)的钢猛，主體部分一般都是固定的寬度，并且是居中顯示的轩缤！”
“不錯(cuò)命迈，小白贩绕，看得很仔細(xì)，你之前也自己看了html的標(biāo)簽躺翻，那么你應(yīng)該知道什么是“塊”吧丧叽！”
“知道，塊元素（容器）默認(rèn)寬度跟它父容器的寬度一樣公你，而且前后有換行符踊淳。如果不做特殊的樣式控制，每個(gè)塊容器兩邊都不會(huì)有其他的塊容器陕靠，假如我在html的body里面寫三個(gè)div層迂尝，他們肯定是上下排列的〖艚妫”
“恩垄开，不錯(cuò)，那你現(xiàn)在寫一個(gè)div容器税肪，然后給他設(shè)定點(diǎn)css樣式溉躲，讓他看起來舒服就可以，我們來做幾個(gè)小測試益兄！”
老朱接著說道：“我們只設(shè)定了這個(gè)層的背景色和一些文本樣式锻梳，沒有設(shè)定div的寬度，因此在我們改變?yōu)g覽器窗口大小的時(shí)候净捅，div層的寬度會(huì)隨它父容器的寬度進(jìn)行變化疑枯，這里的div父容器是body，而body的內(nèi)外邊距都是0蛔六，所以div的寬度跟瀏覽器窗口一樣寬荆永。”
“然后我們?cè)賹懸粋€(gè)div容器国章，讓他的寬度固定為400像素具钥，容器的其他樣式隨意設(shè)定一下就可以了∫菏蓿”
“怎么樣骂删！主體區(qū)域的寬度固定以后，瀏覽器窗口不管怎么變他的寬度都不會(huì)發(fā)生變化抵碟。”
小白若有所思的說道：“我看到別人網(wǎng)頁上中間主體區(qū)域?qū)挾裙潭ɑ捣耍珔s是居中的拟逮，這個(gè)怎么實(shí)現(xiàn)呢？”
“很簡單适滓，你只需要把他的margin樣式設(shè)定成auto敦迄，他就主動(dòng)根據(jù)父容器居中了。”
“在我們使用塊容器布局的時(shí)候罚屋，如果是縱向布局苦囱，有時(shí)我們常常讓他們之間保持5個(gè)像素的距離。因此可以給主體區(qū)域設(shè)定一個(gè)margin-top:5px;”
“做網(wǎng)頁布局的時(shí)候脾猛，上中下三個(gè)容器的布局是第一步撕彤，因此在做之前要想好這三個(gè)容器寬度是自適應(yīng)，還是固定寬度猛拴，想好再下手羹铅。”
老朱接著說：“今天我們測試的div容器布局并沒有考慮到邊框愉昆、內(nèi)邊距职员、外邊距的影響，你練習(xí)的時(shí)候可以給容器設(shè)定上這些css樣式跛溉，看看他們對(duì)縱布局的影響焊切。”
“好的芳室！我現(xiàn)在就開始練習(xí)～”
想學(xué)H5的朋友可以關(guān)注老爐专肪，您的關(guān)注是我持續(xù)更新《小白H5成長之路》的動(dòng)力！
