CSS基本知識4-CSS行模型

display:inline、block、inline-block

block元素的特色是：
　　老是在新行上開始；
　　高度，行高以及頂和底邊距均可控制；
　　寬度缺省是它的容器的100%，除非設定一個寬度

inline元素的特色是： 
　　和其餘元素都在一行上；
　　高，行高及頂和底邊距不可改變；
　　寬度就是它的文字或圖片的寬度，不可改變。

display:inline-block將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。

意思就是，這個對象自己是一個行元素，可是它的內容是塊（也就是說它能夠設高寬。這能夠想象成，一個通道上的一些物件，能夠對齊，能夠有有自已的大小等。

 

塊級元素：塊狀元素排斥其餘元素與其位於同一行，能夠設定元素的寬（width）和高（height），塊級元素通常是其餘元素的容器，可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等。

行內元素：行內元素不能夠設置寬（width）和高（height），但能夠與其餘行內元素位於同一行，行內元素內通常不能夠包含塊級元素。行內元素的高度通常由元素內部的字體大小決定，寬度由內容的長度控制。常見的行內元素有a, em ,strong等。

例如：咱們能夠給div或p應用下面樣式，可是a標籤卻沒法應用下面的樣式。

1	.test{ width : 100px ; height : 100px ;}

固然咱們還能夠經過樣式display屬性來改變元素的顯示方式。當display的值設爲block時，元素將以塊級方式呈現；當display值設爲inline時，元素將以行內形式呈現。因此咱們能夠給a標籤應用如下樣式：

1	.test{ display : block ; width : 50px ; height : 50px ;}

另外，若是咱們即想讓一個元素能夠設置寬度高度，又想讓它以行內形式顯示，這時咱們能夠設置display的值爲inline-block。如：

1	a{ display :inline- block ; width : 100px ; height : 100px ;}

附：

塊元素(block element) 

* address - 地址 

* blockquote - 塊引用 

* center - 舉中對齊塊 

* dir - 目錄列表 

* div - 經常使用塊級容易，也是css layout的主要標籤 

* dl - 定義列表 

* fieldset - form控制組 

* form - 交互表單 

* h1 - 大標題 

* h2 - 副標題 

* h3 - 3級標題 

* h4 - 4級標題 

* h5 - 5級標題 

* h6 - 6級標題 

* hr - 水平分隔線 

* isindex - input prompt 

* menu - 菜單列表 

* noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容 

* noscript - ）可選腳本內容（對於不支持script的瀏覽器顯示此內容） 

* ol - 排序表單 

* p - 段落 

* pre - 格式化文本 

* table - 表格 

* ul - 非排序列表 



內聯元素(inline element) 

* a - 錨點 

* abbr - 縮寫 

* acronym - 首字 

* b - 粗體(不推薦) 

* bdo - bidi override 

* big - 大字體 

* br - 換行 

* cite - 引用 

* code - 計算機代碼(在引用源碼的時候須要) 

* dfn - 定義字段 

* em - 強調 

* font - 字體設定(不推薦) 

* i - 斜體 

* img - 圖片 

* input - 輸入框 

* kbd - 定義鍵盤文本 

* label - 表格標籤 

* q - 短引用 

* s - 中劃線(不推薦) 

* samp - 定義範例計算機代碼 

* select - 項目選擇 

* small - 小字體文本 

* span - 經常使用內聯容器，定義文本內區塊 

* strike - 中劃線 

* strong - 粗體強調 

* sub - 下標 

* sup - 上標 

* textarea - 多行文本輸入框 

* tt - 電傳文本 

* u - 下劃線 

* var - 定義變量 



可變元素 

可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素。 


* applet - java applet 

* button - 按鈕 

* del - 刪除文本 

* iframe - inline frame 

* ins - 插入的文本 

* map - 圖片區塊(map) 

* object - object對象 

* script - 客戶端腳本