前言
網(wǎng)頁原生布局的方法其實(shí)網(wǎng)上有很多卒暂，大概為Flow（流動(dòng)布局模型）、Float（浮動(dòng)布局模型）娄帖、Layer（層級布局模型）也祠。
Flow布局
流動(dòng)布局模型其實(shí)就是默認(rèn)的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的HTML網(wǎng)頁元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁內(nèi)容的块茁。
流動(dòng)布局將會(huì)有兩個(gè)比較典型的特征齿坷，
第一桂肌，塊級元素都會(huì)在所處的最近父級容器元素內(nèi)自上而下按順序垂直順延分布，因?yàn)樵谀J(rèn)狀態(tài)下永淌，塊級元素的寬度都是100%（即父級元素寬度的100%）崎场。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置遂蛀。如下代碼所示谭跨，
<html>
<body>
<h1>我是h1</h1>
<div>我是div</div>
</body>
</html>
如上述代碼所示，在沒有外在樣式的影響下李滴，h1和div的寬度都將是100%（為頁面的默認(rèn)寬度）螃宙。
第二，在流動(dòng)模型下所坯，內(nèi)聯(lián)元素都會(huì)在所處的最近父級容器元素內(nèi)從左到右水平分布顯示谆扎。
<html>
<body>
<a>我是a</a>
<span>我是span</span>
</body>
</html>
內(nèi)聯(lián)元素不會(huì)像塊級元素那樣獨(dú)自的占據(jù)一行抒倚。
Float布局
任何元素在默認(rèn)的情況下都是處于整個(gè)文檔流中的撰豺，不會(huì)浮動(dòng)的陨帆。當(dāng)我們給某一個(gè)元素設(shè)置浮動(dòng)時(shí)掀虎，即可讓該元素?cái)[脫當(dāng)前文檔流差油，成為浮動(dòng)元素汽抚。
如下代碼喇完，給div元素設(shè)置浮動(dòng)檀轨，讓兩個(gè)div并排顯示蒙谓。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
這里有一點(diǎn)需要注意斥季，如果我給div設(shè)置的浮動(dòng)是float: right，那么div1將會(huì)貼在右側(cè)累驮，而div2將會(huì)貼在div1的左側(cè)酣倾。
Layer布局
什么是層級布局模型？
層級布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣慰照，每個(gè)圖層能夠精確定位操作灶挟，但在網(wǎng)頁設(shè)計(jì)領(lǐng)域，由于網(wǎng)頁大小的活動(dòng)性毒租，層級布局模型沒能受到熱捧稚铣。但是在網(wǎng)頁上局部使用層級布局還是有其方便之處的。
應(yīng)用層級布局墅垮，往往需要定位屬性的配合惕医。CSS中有3種定位類型，
- 絕對定位(position: absolute)
- 相對定位(position: relative)
- 固定定位(position: fixed)
絕對定位
如果想為元素設(shè)置層級布局模型中的絕對定位算色，需要設(shè)置position:absolute(表示絕對定位)抬伺，這條語句的作用將元素從文檔流中拖出來，然后使用left灾梦、right峡钓、top妓笙、bottom屬性相對于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的包含塊能岩，則相對于body元素寞宫，即相對于瀏覽器窗口。
相對定位
如果想為元素設(shè)置層級布局模型中的相對定位拉鹃，需要設(shè)置position:relative（表示相對定位）辈赋，它通過left、right膏燕、top钥屈、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)坝辫，然后相對于以前的位置移動(dòng)篷就，移動(dòng)的方向和幅度由left、right近忙、top腻脏、bottom屬性確定，偏移前的位置保留不動(dòng)银锻。
相對定位與絕對定位最大的區(qū)別在于，前者沒有脫離當(dāng)前文檔流而后者已經(jīng)脫離了當(dāng)前文檔流做鹰。脫離當(dāng)前文檔流的意思是击纬，該元素的前后元素在計(jì)算位置和偏移時(shí)將不再計(jì)算該元素的大小和位置。
固定定位
position: fixed钾麸，表示固定定位更振，與absolute定位類型類似，但它的相對移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身饭尝。由于視圖本身是固定的肯腕，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置钥平，或改變?yōu)g覽器窗口的顯示大小实撒，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響涉瘾，這與background-attachment:fixed?（用于定位背景圖片的位置）屬性功能相同知态。
固定定位在某一種場景下很有用，當(dāng)我們需要在頁面的某一位置固定的展示某一元素立叛，且不受頁面滾動(dòng)條的影響负敏。比如，常見的“返回頂部”之類的按鈕秘蛇。
混合使用
現(xiàn)代網(wǎng)頁布局中其做，經(jīng)常將相對定位和絕對定位混合使用顶考，以達(dá)到更加靈活的目的。如下代碼妖泄，
<style>
#box1{
width:200px;
height:200px;
position:relative; /* 前輩元素的定位必須設(shè)置為relative */
}
#box2{
position:absolute; /* 相對于最近的一個(gè)定位設(shè)置為relative的前輩元素的絕對定位 */
top:20px;
left:30px;
}
</style>
<div id="box1">
<div id="box2">相對參照元素進(jìn)行定位</div>
</div>
即驹沿，box2相對于box1是絕對定位的。當(dāng)改變box1的位置時(shí)浮庐，box1內(nèi)部的子元素是不會(huì)發(fā)生變化的甚负，因?yàn)樗麄兌际窍鄬ox1絕對定位的。
常見布局方式(兩列)
兩列情況暫定左側(cè)寬為100PX
方法一：
float + calc()
.right {
width: calc(100% - 100px);
}
方法二：
position / float + margin-left
//html部分同上
//css
.left {
position:absolute;left: 0; /*或 float:left; */
width: 100px;
background: blue;
}
.right{
margin-left: 100px;
background: red;
text-align:center;
}
兩列布局中审残，左邊固定梭域，右邊自適應(yīng)如何實(shí)現(xiàn)。
1.左浮動(dòng)搅轿，右邊用margin-left長度為左邊的固定寬度病涨，寬為100%
2.利用的是創(chuàng)建一個(gè)新的BFC（塊級格式化上下文）來防止文字環(huán)繞的原理來實(shí)現(xiàn)的。BFC就是一個(gè)相對獨(dú)立的布局環(huán)境璧坟，它內(nèi)部元素的布局不受外面布局的影響既穆。它可以通過以下任何一種方式來創(chuàng)建：
- float的值不為none
- position的值不為static或者relative
- display的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個(gè)
- overflow的值不為visible
三列布局左右固定中間自適應(yīng)
圣杯
思路
首先有三行，頭部和尾部各占一行雀鹃，中間內(nèi)容區(qū)一行幻工，頭尾不重要
中間內(nèi)容分為三列對應(yīng)三個(gè)div,為了先展示中間的主要內(nèi)容所以把中間那列放前面，然后是左和右對應(yīng)的div
中間內(nèi)容自適應(yīng)寬度為100%黎茎，此時(shí)已經(jīng)把3個(gè)div所在的父容器占滿了囊颅，所以想辦法讓左右2個(gè)div放置在左右側(cè)，
左側(cè)采取margin-left取-100%讓其在最左側(cè)傅瞻，
右側(cè)同理取值-200px(像素值為寬度大小)踢代，保證剛好占滿自身寬度
這時(shí)候測試發(fā)現(xiàn)已經(jīng)有自適應(yīng)效果了，但是縮小到一定程度頁面就出問題了嗅骄，左右不在了胳挎，
所以加上最低寬度就是左右2個(gè)DIV的寬度（另外得考慮瀏覽器默認(rèn)的body下的margin為8px,做了樣式重置不考慮）
這時(shí)候發(fā)現(xiàn)中間的內(nèi)容文字被左右遮擋了，對父容器用pading左右值為左右元素寬度溺森，
為什么不對中間的DIV設(shè)置padding,我發(fā)現(xiàn)設(shè)置了不起作用慕爬，具體的原因我暫時(shí)也搞不懂來龍去脈，
發(fā)現(xiàn)padding后左右有留白屏积，這個(gè)時(shí)候左邊需要用 left: -200px;position: relative;來設(shè)置DIV位置澡罚，
辦法確實(shí)巧妙。右邊實(shí)現(xiàn)同理肾请。
這時(shí)候發(fā)現(xiàn)已經(jīng)大致有了點(diǎn)樣子了留搔，效果也看的到，此時(shí)典型的三欄布局铛铁，左右固定隔显，中間內(nèi)容自適應(yīng)已經(jīng)完成却妨。
總結(jié)：
其實(shí)這個(gè)布局已經(jīng)有點(diǎn)年頭（圣杯布局），通過左右兩塊DIV來遮擋了中間div寬度為100%的區(qū)域括眠，
然后壓縮了三個(gè)DIV共有的父容器彪标，來實(shí)現(xiàn)對中間內(nèi)容展示的完善，也使左右2個(gè)不在遮擋中間了掷豺。
然后我又趁機(jī)試了下z-index屬性捞烟，這里有個(gè)小問題要注意（要讓z-index起作用有個(gè)小小前提，
就是元素的position屬性要是relative当船，absolute或是fixed）我之前的想法是讓中間的內(nèi)容置于頂層题画，不受div會(huì)因?yàn)槟撤Nhack導(dǎo)致位置變更遮擋了中間內(nèi)容。
只需要設(shè)置下z-index屬性值即可德频，左右可不設(shè)置苍息，也可以設(shè)置以防萬一，不同瀏覽器對z-index的默認(rèn)值解析不同壹置，可能會(huì)導(dǎo)致問題竞思。基本的布局架構(gòu)就是如此，根據(jù)實(shí)際項(xiàng)目需求在此架構(gòu)上完善钞护，或者以后遇到這種類似的問題能打開思路盖喷，便算是有點(diǎn)收獲了。
核心代碼
<style>
body {
/*因?yàn)闉g覽器默認(rèn)body為margin:8px所以多加了16px*/
min-width: 616px;
}
header {
width: 100%;
height: 40px;
background-color: darkseagreen;
}
.container {
/*height: 200px;*/
/*overflow: hidden;*/
padding: 0 200px;
}
.middle {
width: 100%;
height: 200px;
background-color: deeppink;
float: left;
/*position: relative;*/
}
.left {
width: 200px;
height: 200px;
background-color: blue;
float: left;
margin-left: -100%;
left: -200px;
position: relative;
}
.right {
width: 200px;
height: 200px;
background-color: darkorchid;
float: left;
margin-left: -200px;
right: -200px;
position: relative;
}
footer {
clear: both;
width: 100%;
height: 30px;
background-color: darkslategray;
}
</style>
<header>
<h4>Header內(nèi)容區(qū)</h4>
</header>
<div class="container">
<div class="middle">
<h4>中間彈性區(qū)</h4>
<p>
我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容
</p>
</div>
<div class="left">
<h4>左邊欄</h4>
</div>
<div class="right">
<h4>右邊欄</h4>
</div>
</div>
<footer>
<h4>Footer內(nèi)容區(qū)</h4>
</footer>
雙飛翼
思路
雙飛翼布局的方式跟圣杯在前部分是一樣难咕，不同之處主要在于如何處理中間的內(nèi)容塊被遮擋的問題
圣杯用padding的思路传蹈，使之壓縮，但是父容器壓縮步藕，左右DIV位置變更，只能用相對位置進(jìn)行l(wèi)eft
設(shè)置位移為元素寬度來調(diào)整
而雙飛翼的路線為采用的方式相比圣杯的父容器padding挑格，
改變的是中間內(nèi)容的內(nèi)層div的外邊框咙冗，相對來說對布局的破壞不大，
但是要采用這種方式又不破壞頁面結(jié)構(gòu)漂彤，就只能在中間內(nèi)容div內(nèi)部的再加個(gè)DIV設(shè)置margin或padding.
使之內(nèi)容變相“壓縮”等同padding效果雾消，并且不會(huì)改變中間內(nèi)容DIV外部的結(jié)構(gòu)，只是內(nèi)部的挫望。
細(xì)心的人留意下我注釋的代碼立润，這里其實(shí)還有個(gè)CSS浮動(dòng)的樣式問題，出現(xiàn)這種情況有各種方式清除浮動(dòng)媳板，
我就不多講解桑腮。大概有6種。
清除浮動(dòng)(常用)
1.一般目前常用就是用：after偽元素給使用的浮動(dòng)的父容器設(shè)置蛉幸。
新浪使用方式
.clearfix:after{
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix:after{ /*最簡方式*/
content: '';
display: block;
clear: both;
}
2.給父元素定高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
border: 1px solid black;
width: 300px;
height: 50px;
}
.inner{
width: 50px;
height: 50px;
background-color: #ff4400;
margin-right: 20px;
float: left;
}
.footer{
background-color: #005FC3;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="footer"></div>
</body>
</html>
3.利用 overflow:hidden 屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer{
border: 1px solid black;
width: 300px;
overflow: hidden;
zoom: 1;/*兼容 IE*/
}
.inner{
width: 50px;
height: 50px;
background-color: #ff4400;
margin-right: 20px;
float: left;
}
.footer{
background-color: #005FC3;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="footer"></div>
</body>
</html>
核心代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>雙飛翼</title>
<style>
header {
width: 100%;
height: 40px;
background-color: darkseagreen;
}
.container {
/*height: 200px;*/
/*overflow: hidden;*/
}
.middle {
width: 100%;
height: 200px;
background-color: deeppink;
float: left;
word-break: break-all;
}
.left {
width: 200px;
height: 200px;
background-color: blue;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
background-color: darkorchid;
float: left;
margin-left: -200px;
}
footer {
width: 100%;
height: 30px;
background-color: darkslategray;
clear: both;
}
.div-middle {
margin: 0 200px;
/*padding: 0 200px;*/
}
</style>
</head>
<body>
<header>
<h4>Header內(nèi)容區(qū)</h4>
</header>
<div class="container">
<div class="middle">
<div class="div-middle">
<h4>中間彈性區(qū)</h4>
<p>
我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容
</p>
</div>
</div>
<div class="left">
<h4>左邊欄</h4>
</div>
<div class="right">
<h4>右邊欄</h4>
</div>
</div>
<footer>
<h4>Footer內(nèi)容區(qū)</h4>
</footer>
</body>
</html>
End
本篇只做階段性的初級總結(jié)破讨，原諒我沒有貼出代碼的效果圖丛晦，以后有機(jī)會(huì)再擴(kuò)展并進(jìn)行效果圖片展示，希望大家自己在編輯器下嘗試效果提陶。
