CSS布局在整個前端開發(fā)中占據(jù)了大約50-70%的工作量，在遵循web規(guī)范的前提下亿蒸，編寫合乎規(guī)范的前端代碼凑兰，實現(xiàn)結(jié)構(gòu)、樣式和行為的分離边锁，對于后期代碼的維護以及不同的開發(fā)人員之間的協(xié)作具有重要的意義姑食。
在編寫html的過程中,強調(diào)使用帶有明確語義的標(biāo)簽，Html中標(biāo)簽除了div和span之外都是有明確的語義的茅坛，這樣一方面可以增強代碼的可讀性音半，另一方面可加快瀏覽器的解析速度。
HTML中的每一個標(biāo)簽贡蓖，根據(jù)其其自身的屬性可以區(qū)分為行級元素還是塊級元素，一般情況下，應(yīng)該盡可能使用標(biāo)簽?zāi)J(rèn)的位置進行布局局蚀，當(dāng)默認(rèn)位置不能滿足展示需求的時候急但，再考慮采用css代碼來進一步控制標(biāo)簽元素的位置。 CSS定位的基礎(chǔ)是基于盒子模型晾蜘，介紹如下：
任何頁面元素都可以看成一個盒子
一個盒子模型由content邻眷、padding眠屎、border、margin四部分組成肆饶。
width(height)的值指content的width(height)+padding的值改衩。
border：border-top、border-bottom抖拴、border-left燎字、border-right
width: thin、medium阿宅、thick候衍、數(shù)值
style: none、hidden洒放、dotted蛉鹿、dashed、solid往湿、double妖异、groove、ridge领追、inset他膳、outset
padding：padding-top、padding-bottom绒窑、padding-left棕孙、padding-right
margin：margin-top、margin-bottom些膨、margin-left蟀俊、margin-right
對一行而言，兩個塊的margin = margin-right + margin-left
對換行而言订雾，兩個塊的margin = margin-bottom和margin-top中較大者
對父子而言肢预，子塊的margin = 子塊的margin + 父塊的padding
當(dāng)margin設(shè)為負數(shù)時，塊會向相反的方向移動洼哎，甚至覆蓋另外的塊
定位的目的是在框元素的padding烫映、margin等自身屬性無法滿足需求時，改變元素在html文檔中的默認(rèn)位置谱净，定位到目標(biāo)區(qū)域時使用窑邦。如果要使用 top,bottom,left,right 屬性，就必須要使用relative和absolute定位屬性壕探。
在CSS中關(guān)于定位的類型有如下幾種：
position:relative | absolute | static | fixed
static(靜態(tài)：沒有特別的設(shè)定冈钦，遵循基本的定位規(guī)定，保持原來的位置不變李请，不能通過z-index進行層次分級瞧筛。
relative(相對定位)：對象不脫離文檔流厉熟，對象不可層疊、參考自身靜態(tài)位置通過 top,bottom,left,right 定位较幌，并且可以通過z-index進行層次分級揍瑟。也就是說盡管對象偏離了原來應(yīng)該所在的位置，但是原來的位置還是占據(jù)中乍炉，不然其他元素用绢片。
absolute(絕對定位)：脫離文檔流，通過 top,bottom,left,right 定位岛琼。選取其最近一個最有定位設(shè)置的父級對象進行絕對定位底循，如果對象的父級沒有設(shè)置定位屬性，absolute元素將以body坐標(biāo)原點進行定位槐瑞，可以通過z-index進行層次分級熙涤。本來應(yīng)該在的位置被讓出來的，其他的元素填充那個位置困檩。
fixed（固定定位）：這里所固定的參照對像是可視窗口而并非是body或是父級元素祠挫。可通過z-index進行層次分級悼沿。
注：
CSS中定位的層疊分級：z-index: auto | namber;
auto 遵從其父對象的定位
namber 無單位的整數(shù)值等舔。可為負數(shù)
相對定位是相對于該元素本來在文檔中應(yīng)該出現(xiàn)的位置糟趾。
設(shè)置為相對定位的元素框會偏移某個距離软瞎。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留拉讯。如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方鳖藕。如果 left 設(shè)置為 30 像素魔慷，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動著恩。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
決定定位是相對于其父元素而言院尔。
設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位喉誊，包含塊可能是文檔中的另一個元素或者是初始包含塊邀摆。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣伍茄。元素定位后生成一個塊級框栋盹，而不論原來它在正常流中生成何種類型的框。絕對定位使元素的位置與文檔流無關(guān)敷矫，因此不占據(jù)空間例获。這一點與相對定位不同汉额，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置榨汤。絕對定位的元素的位置相對于最近的已定位祖先元素蠕搜，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊收壕。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
因為絕對定位的框與文檔流無關(guān)妓灌，所以它們可以覆蓋頁面上的其它元素∶巯埽可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序虫埂。
如果要是要使父元素包含子元素的話，應(yīng)該使父元素的寬和高包含子元素的端壳。
Div1為絕對定位：其脫離為文檔流告丢。不占據(jù)文檔流的位置，position: absolute;left: 150px;top:20px;
Div2為相對定位：注意是相對其應(yīng)該出現(xiàn)的位置损谦，position:relative ;top:20px;left:150px;
Div21為相對定位：圖所示岖免，可以理解。
#div0{
border: 2px solid #FE7633; height:220px; width:380px;
}
#div1{
border: 2px solid #C2DCFF;
height: 80px;
width: 150px;
position: absolute;
left: 150px;
top:20px;
}
#div2{position:relative ;top:20px;left:150px; border:2px solid #646464; height:120px; width:150px}
#div21{border:2px solid #A5D69C; height:120px; width:50px}
#div3{ border:2px solid #A5D69C; height:20px; width:250px;}
