塊級元素和行內元素總結

1.常見的: 

塊級元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table
行內元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite,  

塊狀元素也可以通過代碼display:inline將元素設置爲內聯元素

2.塊級元素: 
    特點:
     1.每個塊級元素都是獨自佔一行,其後的元素也只能另起一行,並不能兩個元素共用一行。

     2.元素的高度、寬度、行高和頂底邊距都是可以設置的。

塊級元素可以設置margin 和 padding.  行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果,但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。(水平方向有效,豎直方向無效)

     3.元素的寬度如果不設置的話,默認爲父元素的寬度。
常見的塊級元素:
h1~h6,hr
div,dir(目錄列表),dl(定義列表)
table,ul.ol,li,form,fieldset(from控制組)
p,pre
address,blockquote,center
menu(菜單列表)
noframes(對於不支持frame的瀏覽器顯示此區塊內容)

noscript(對於不支持script的瀏覽器顯示此內容)

3.內聯元素特點:
1、和其他元素都在一行上;
2、元素的高度、寬度及頂部和底部邊距不可設置;
3、元素的寬度就是它包含的文字或圖片的寬度,不可改變。

4.內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,代碼display:inline-block就是將元素設置爲內聯塊狀元素。(css2.1新增),<img>、<input>標籤就是這種內聯塊狀標籤。

inline-block 元素特點:
1、和其他元素都在一行上;

2、元素的高度、寬度、行高以及頂和底邊距都可設置。

5.彙總參考:

內聯元素(行內元素)內聯元素(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 - 定義變量


塊元素(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 - 非排序列表


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


* applet - java applet
* button - 按鈕
* del - 刪除文本
* iframe - inline frame
* ins - 插入的文本
* map - 圖片區塊(map)
* object - object對象
* script - 客戶端腳本

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章