本文中將要論述CSS以下幾個(gè)核心概念：
- 元素類型
- 盒模型
- position與float
一佳遣、元素類型
元素類型分為塊級元素（block level element）和內(nèi)聯(lián)元素（inline element）
二者區(qū)別如下:
- 塊級元素分布服從塊級方向（默認(rèn)從上到下）识埋，行內(nèi)元素分布服從行內(nèi)方向（默認(rèn)從左到右）。
- 塊級元素可以設(shè)置width和height屬性零渐，而內(nèi)聯(lián)元素設(shè)置無效窒舟。
- 塊級元素width默認(rèn)設(shè)置為100%，而內(nèi)聯(lián)元素則是根據(jù)其自身內(nèi)容或子元素內(nèi)容來決定寬度诵盼。
- display屬性
- 可以通過設(shè)置display屬性來進(jìn)行塊級和行內(nèi)元素間的轉(zhuǎn)換惠豺，并可通過此方式為內(nèi)聯(lián)元素設(shè)置width和height
- 若想讓元素既在行內(nèi)顯示银还，有可以設(shè)置寬度和高度，則可以使用
display:inline-block
inline-block可以認(rèn)為是讓元素對外顯示內(nèi)聯(lián)元素洁墙，對內(nèi)顯示塊級元素蛹疯，可以設(shè)置寬高
- 普通流
塊級元素從上到下排列，內(nèi)聯(lián)元素從左到右排列热监，這種無樣式的情況下元素的分布叫做普通流
二捺弦、盒模型
所有的元素都會在頁面占據(jù)一個(gè)空間，而這個(gè)空間都可以看做是一個(gè)盒子（box model）
盒子模型
盒子模型組成：
content=>padding=>border=>margin
- 寬度計(jì)算
總寬度=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
若為IE9以下：
總寬度=margin-left + width + margin-right
- 為了解決上述兼容問題孝扛，我們可以使用
box-sizing:border-box
此時(shí)border和padding被包含在了width和height之內(nèi)列吼。因此為了避免瀏覽器兼容問題，可以使用如下代碼
,:before,*:after{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
脫離普通流的position和float
- 有關(guān)position屬性的相關(guān)請參考(http://www.runoob.com/css/css-positioning.html)
- position:static：HTML元素的默認(rèn)值苦始，在普通流中寞钥，靜態(tài)定位的元素不會受到 top, bottom, left, right影響。
- position:relative：仍然在普通流中盈简，但可以通過left right等進(jìn)行移動凑耻，（使用left right等進(jìn)行移動時(shí)，定位是相對其正常位置的柠贤。）因?yàn)槿匀晃挥谄胀髦邢愫疲赃M(jìn)行定位后原來的位置仍然保留
- position:fixed,absolute：
absolute相對于最近的已定位的父級元素，若不存在臼勉，則相對于html界面
fixed相對于瀏覽器窗口固定邻吭，即使滑動窗口也不發(fā)生改變
二者的特點(diǎn)： - 脫離于普通流，及二者的分布不會影響普通流中的元素宴霸，而且還會覆蓋下層元素囱晴；
- 元素將變?yōu)閴K級元素，可以設(shè)置寬高瓢谢；
- 如果元素是塊級元素畸写，則寬度由width:100%變?yōu)閣idth:auto。
- z-index可以用來改變元素的覆蓋順序
- float
- 浮動之后氓扛，會脫離普通流（文檔流）枯芬，不再覆蓋原來的那層空間，因此該元素下一個(gè)兄弟元素會緊貼到該元素之前沒有設(shè)置float元素之后采郎；
- 如果為內(nèi)聯(lián)元素（文本流）千所，則會產(chǎn)生圍繞效果。
詳見http://www.w3school.com.cn/css/css_positioning_floating.asp
