CSS之塊級元素和內(nèi)聯(lián)元素總結(jié)

在HTML頁面中承二,被大量的標簽結(jié)構(gòu)榆鼠,這些標簽元素,主要分兩種:塊級元素(block element)和內(nèi)聯(lián)元素(inline element)亥鸠。它們都有不同的特點和作用妆够,這里做一個總結(jié)和分類。當然它們有諸多的同義中文翻譯负蚊,這里不深究神妹,博主更喜歡直譯的叫法。


在默認的標準文檔流里面

塊級元素

特點:

1. 自動換行家妆,并占據(jù)一整行鸵荠;

2. 高度,寬度以及外邊距和內(nèi)邊距都可控制伤极;

3. 默認寬度與瀏覽器寬度一樣蛹找,高度默認為0,與內(nèi)容無關(guān)哨坪;

4.?它可以容納內(nèi)聯(lián)元素和其他塊元素熄赡。

內(nèi)聯(lián)元素

特點:

1.默認從左到右,按順序一行并排齿税;

2.高度彼硫,寬度及外邊距和內(nèi)邊距僅部分元素可改變;

3.默認高寬只與內(nèi)容有關(guān)拧篮;

4.行內(nèi)元素只能容納文本或者其它內(nèi)聯(lián)元素。

為了打破這種默認的布局芜壁,更加靈活的展示礁凡,我們會引用CSS來改變默認布局。

比如:

他們可以通過修改`display`屬性來相互轉(zhuǎn)換窟蓝,`display:inline-block`變成內(nèi)聯(lián)(塊)元素布局状共,`display:block`變成塊元素布局。

分類

塊元素(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可選內(nèi)容小染,(對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容

* noscript - 可選腳本內(nèi)容(對于不支持script的瀏覽器顯示此內(nèi)容)

* ol - 排序表單

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

內(nèi)聯(lián)元素(inline element)

* a - 錨點

* abbr - 縮寫

* acronym - 首字

* b - 粗體(不推薦)

* bdo - bidi override

* big - 大字體

* br - 換行

* cite - 引用

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

* dfn - 定義字段

* em - 強調(diào)

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

* i - 斜體

* img - 圖片

* input - 輸入框

* kbd - 定義鍵盤文本

* label - 表格標簽

* q - 短引用

* s - 中劃線(不推薦)

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

* select - 項目選擇

* small - 小字體文本

* span - 常用內(nèi)聯(lián)容器踊赠,定義文本內(nèi)區(qū)塊

* strike - 中劃線

* strong - 粗體強調(diào)

* sub - 下標

* sup - 上標

* textarea - 多行文本輸入框

* tt - 電傳文本

* u - 下劃線

* var - 定義變量

可變元素

可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。

* applet - java applet

* button - 按鈕

* del - 刪除文本

* iframe - inline frame

* ins - 插入的文本

* map - 圖片區(qū)塊(map)

* object - object對象

* script - 客戶端腳本

謝謝您百忙中,閱讀本篇文章帖鸦;若覺得對你有幫助,請分享給更多的朋友

版權(quán)聲明:自由轉(zhuǎn)載-非商用-非衍生-保持署名

原文傳送門

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末妓雾,一起剝皮案震驚了整個濱河市寝志,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖物臂,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件仪媒,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門尽超,熙熙樓的掌柜王于貴愁眉苦臉地迎上來傲绣,“玉大人塞琼,你說我怎么就攤上這事。” “怎么了毅往?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長洁桌。 經(jīng)常有香客問我,道長戒幔,這世上最難降的妖魔是什么错沃? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任司浪,我火速辦了婚禮,結(jié)果婚禮上把沼,老公的妹妹穿的比我還像新娘啊易。我一直安慰自己,他們只是感情好捆愁,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布割去。 她就那樣靜靜地躺著,像睡著了一般昼丑。 火紅的嫁衣襯著肌膚如雪呻逆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天菩帝,我揣著相機與錄音咖城,去河邊找鬼茬腿。 笑死,一個胖子當著我的面吹牛宜雀,可吹牛的內(nèi)容都是我干的切平。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼州袒,長吁一口氣:“原來是場噩夢啊……” “哼揭绑!你這毒婦竟也來了弓候?” 一聲冷哼從身側(cè)響起郎哭,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎菇存,沒想到半個月后夸研,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡依鸥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年亥至,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贱迟。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡姐扮,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出衣吠,到底是詐尸還是另有隱情茶敏,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布缚俏,位于F島的核電站惊搏,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏忧换。R本人自食惡果不足惜恬惯,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望亚茬。 院中可真熱鬧酪耳,春花似錦、人聲如沸刹缝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赞草。三九已至讹堤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間厨疙,已是汗流浹背洲守。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工疑务, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人梗醇。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓知允,卻偏偏與公主長得像,于是被迫代替她去往敵國和親叙谨。 傳聞我的和親對象是個殘疾皇子温鸽,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容