html區塊層級元素與行內元素

標籤：html區塊層級元素與行內元素

我們經常使用的大多數HTML 元素，都被定義為區塊層級元素或內嵌元素。

 

塊元素，一般都從新行開始，它可以容納內嵌元素和其他塊元素

內嵌元素，一般都是基於語義級(semantic)的基本元素。內嵌元素只能容納文本或者其他內嵌元素；還有一種特殊的元素。

可變元素，可變元素為根據上下文語境決定該元素為塊元素或者內嵌元素。

常見的塊元素有：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/59/5D/wKiom1TQ0FXgpZRGAAMfsWLPMDs549.jpg" title="映像 4.jpg" alt="wKiom1TQ0FXgpZRGAAMfsWLPMDs549.jpg" />

常見的行內元素有：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/59/5D/wKiom1TQ0IqB187EAAKiBzo7TPQ499.jpg" title="映像 5.jpg" alt="wKiom1TQ0IqB187EAAKiBzo7TPQ499.jpg" />

可變元素：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/59/59/wKioL1TQ0aGz3h1gAADvla_Kp8A761.jpg" title="映像 6.jpg" alt="wKioL1TQ0aGz3h1gAADvla_Kp8A761.jpg" />

區別：

 

區塊層級元素會獨佔一行，預設情況下寬度自動填滿其父元素寬度

行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。

區塊層級元素可以設定寬高

行內元素不可以設定寬高

區塊層級元素可以設定margin，padding

行內元素水平方向的margin-left;margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom;margin-top; padding-top; padding-bottom;卻不能生效。

區塊層級元素display屬性，display:block;

區塊層級元素display屬性，display:inline;

 

當然在實際情境中，我們可以通過修改display屬性來切換區塊層級元素和行內元素

但是，表格的一些行內元素，卻具有一個塊元素的特性，我在下一篇部落格中說明。

 

參考部落格：

http://www.w3school.com.cn/html/html_blocks.asp

http://blog.csdn.net/yuyanqiao/article/details/8558118

http://www.educity.cn/wenda/9802.html

http://cyf0110.iteye.com/blog/1814056

 

本文出自 “7439523” 部落格，請務必保留此出處http://7449523.blog.51cto.com/7439523/1611278

html區塊層級元素與行內元素