簡(jiǎn)述
對(duì)于CSS的學(xué)習(xí)來(lái)說(shuō)，布局和定位可以說(shuō)使最關(guān)鍵的一部分，也是最基礎(chǔ)的部分，布局和定位方面在學(xué)習(xí)的時(shí)候應(yīng)該要系統(tǒng)，要自己總結(jié)一遍，如果只是草草的過(guò)一遍，就直接開(kāi)始做demo，會(huì)遇到很多坑，反而得不償失。因此我寫下這篇博客，讀者如果發(fā)現(xiàn)問(wèn)題，望不吝賜教。
一 盒模型
在講布局和定位之前，先總結(jié)一下盒子模型。盒模型是布局定位的基礎(chǔ)。
盒模型由以下四個(gè)部分組成
- 內(nèi)容區(qū)
- 內(nèi)邊距
- 邊框
- 外邊距
注意：背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域。即圖中淺色區(qū)域。
代碼：
background-image: url(images/background.gif);
在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。
假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，如下圖：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
二 塊元素和內(nèi)聯(lián)元素
流是瀏覽器在頁(yè)面上擺放HTML元素所用的方法，瀏覽器從HTML文件最上面開(kāi)始，從上到下沿著元素流逐個(gè)顯示遇到的各個(gè)元素。
每個(gè)塊元素獨(dú)占一行，或者說(shuō)塊元素之間會(huì)有一個(gè)換行。
內(nèi)聯(lián)元素則會(huì)在水平方向上挨著，隨著瀏覽器或內(nèi)容區(qū)大小自適應(yīng)換行。
并排疊加問(wèn)題
并排放置兩個(gè)內(nèi)聯(lián)元素時(shí)，元素都會(huì)有外邊距，如果左邊元素外邊距為10px，右邊元素外邊距為20px，那么兩個(gè)元素之間就有30px的空間。
瀏覽器上下放置兩個(gè)塊元素時(shí)，它會(huì)把他們共同的外邊距折疊在一起，折疊的外邊距高度就是最大的外邊距高度。
浮動(dòng)元素
指定一個(gè)標(biāo)識(shí)，指定寬度。注意所有的浮動(dòng)元素必須要有寬度。
#id{
width: 200px;
float: right;
}
clear屬性可以解決浮動(dòng)元素重疊的問(wèn)題。
三 布局
流體布局
采用div實(shí)現(xiàn)，內(nèi)容區(qū)會(huì)擴(kuò)充到整個(gè)瀏覽器的窗口?？刹捎弥鲀?nèi)容固定，側(cè)邊欄浮動(dòng)，即可填滿整個(gè)界面。
凍結(jié)布局
顧名思義就是內(nèi)容區(qū)不會(huì)自適應(yīng)瀏覽器視窗，無(wú)論瀏覽器窗口大小形狀怎么變化，內(nèi)容區(qū)大小都不變，若視窗小于內(nèi)容區(qū)的大小，那么有一部分內(nèi)容將無(wú)法被看見(jiàn)。
#content {
width：200px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675747;
}
凝膠布局
凝膠介于流體和凍結(jié)之間，為內(nèi)容區(qū)增加div，屬性如下，可實(shí)現(xiàn)居中，內(nèi)容不會(huì)像流體布局那樣擴(kuò)充到整個(gè)瀏覽器的視窗，確定了寬度后，拉大瀏覽器的界面，內(nèi)容區(qū)會(huì)居中，左右兩邊會(huì)出現(xiàn)空白
width: 800px;
margin-left: auto;
margin-right: auto;
CSS表格顯示
用table布局和其他布局一樣有優(yōu)缺點(diǎn)，table多用于數(shù)據(jù)承載，或者用于簡(jiǎn)單的頁(yè)面布局，但代碼冗余多，不好調(diào)整結(jié)構(gòu)，不容易改變布局。css對(duì)表格的控制也不是很好。而且對(duì)性能也有很大影響。所以布局最好不用table，有多行多列的數(shù)據(jù)需要顯示的時(shí)候可以用來(lái)當(dāng)容器。相關(guān)CSS 代碼如下：
#Container {
display: table;
border-spacing: 10px /*為單元格增加10px的邊框間距*/
}
#tableRow {
display: table-row; /*指定行*/
}
#main {
display: table-cell;
vertical-align: top; /*確保表格兩個(gè)單元格中的所有內(nèi)容相對(duì)于單元格上邊對(duì)其(而不是中間或下邊對(duì)齊)*/
}
#sidebar {
display: table-cell;
vertical-align: top;
}
