元素
常用的塊狀元素有：
<div>末患、<p>研叫、<h1>...<h6>、<ol>璧针、<ul>嚷炉、<dl>、<table>探橱、<address>申屹、<blockquote> 、<form>
常用的內(nèi)聯(lián)元素有：
<a>走搁、<span>独柑、<br>、<i>私植、<em>忌栅、<strong>、<label>曲稼、<q>索绪、<var>、<cite>贫悄、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img>瑞驱、<input>
如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素，從而使a元素具有塊狀元素特點窄坦。
a{display:block;}
塊級元素特點：
- 每個塊級元素都從新的一行開始唤反，并且其后的元素也另起一行。（真霸道鸭津，一個塊級元素獨占一行）彤侍。
- 元素的高度、寬度逆趋、行高以及頂和底邊距都可設(shè)置盏阶。
- 元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致）闻书，除非設(shè)定一個寬度名斟。
當(dāng)然塊狀元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素脑慧。
內(nèi)聯(lián)元素特點：
和其他元素都在一行上；
元素的高度砰盐、寬度及頂部和底部邊距不可設(shè)置闷袒；
元素的寬度就是它包含的文字或圖片的寬度，不可改變楞卡。
內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素霜运、塊狀元素的特點，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素蒋腮。(css2.1新增)淘捡，<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽池摧。
inline-block 元素特點：
- 和其他元素都在一行上焦除；
- 元素的高度、寬度作彤、行高以及頂和底邊距都可設(shè)置膘魄。
CSS包含3種基本的布局模型
用英文概括為：Flow、Layer 和 Float竭讳。
在網(wǎng)頁中创葡，元素有三種布局模型：
- 流動模型（Flow）
- 浮動模型 (Float)
- 層模型（Layer）
流動（Flow）是默認(rèn)的網(wǎng)頁布局模式
也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的。
流動布局模型具有2個比較典型的特征：
第一點绢慢，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布灿渴，因為在默認(rèn)狀態(tài)下，塊狀元素的寬度都為100%胰舆。實際上骚露，塊狀元素都會以行的形式占據(jù)位置。
第二點缚窿，在流動模型下棘幸，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行）
浮動模型
任何元素在默認(rèn)情況下是不能浮動的倦零，但可以用 CSS 定義為浮動误续，如 div、p扫茅、table女嘲、img 等元素都可以被定義為浮動。如下代碼可以實現(xiàn)兩個 div 元素一行顯示诞帐。
div{ width:200px; height:200px; border:2px red solid; float:left; }
<div id="div1"></div> <div id="div2"></div>
層模型
層模型有三種形式：
1、 絕對定位(position: absolute)
如果想為元素設(shè)置層模型中的絕對定位爆雹，需要設(shè)置position:absolute(表示絕對定位)停蕉，這條語句的作用將元素從文檔流中拖出來愕鼓，然后使用left、right慧起、top菇晃、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的包含塊蚓挤，則相對于body元素磺送，即相對于瀏覽器窗口。
2灿意、 相對定位(position: relative)
如果想為元素設(shè)置層模型中的相對定位估灿，需要設(shè)置position:relative（表示相對定位），它通過left缤剧、right馅袁、top、bottom屬性確定元素在正常文檔流中的偏移位置荒辕。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)汗销，然后相對于以前的位置移動，移動的方向和幅度由left抵窒、right弛针、top、bottom屬性確定李皇，偏移前的位置保留不動削茁。
3、 固定定位(position: fixed)
fixed：表示固定定位疙赠，與absolute定位類型類似付材，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的圃阳，它不會隨瀏覽器窗口的滾動條滾動而變化厌衔，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小捍岳，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置富寿，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同锣夹。
盒模型代碼簡寫
還記得在講盒模型時外邊距(margin)页徐、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個方向的邊距是按照順時針方向設(shè)置的：上右下左。具體應(yīng)用在margin和padding的例子如下：
margin:10px 15px 12px 14px;/*上設(shè)置為10px银萍、右設(shè)置為15px变勇、下設(shè)置為12px、左設(shè)置為14px*/
通常有下面三種縮寫方法:
1、如果top搀绣、right飞袋、bottom、left的值相同链患，如下面代碼：
margin:10px 10px 10px 10px;
可縮寫為：
margin:10px;
2巧鸭、如果top和bottom值相同、left和 right的值相同麻捻，如下面代碼：
margin:10px 20px 10px 20px;
可縮寫為：
margin:10px 20px;
3纲仍、如果left和right的值相同，如下面代碼：
margin:10px 20px 30px 20px;
可縮寫為：
margin:10px 20px 30px;
注意：padding贸毕、border的縮寫方法和margin是一致的郑叠。
字體縮寫
網(wǎng)頁中的字體css樣式代碼也有他自己的縮寫方式，下面是給網(wǎng)頁設(shè)置字體的代碼：
body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋體",sans-serif; }
這么多行的代碼其實可以縮寫為一句：
body{ font:italic small-caps bold 12px/1.5em "宋體",sans-serif; }
注意：
1崖咨、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性锻拘，其他的屬性(如 font-weight、font-style击蹲、font-varient署拟、line-height)如未指定將自動使用默認(rèn)值。
2歌豺、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛推穷。
一般情況下因為對于中文網(wǎng)站，英文還是比較少的类咧，所以下面縮寫代碼比較常用：
body{ font:12px/1.5em "宋體",sans-serif; }
只是有字號馒铃、行間距、中文字體痕惋、英文字體設(shè)置区宇。
