1. 程式人生 > >HTML學習之塊級元素和行內元素的特徵和區別(一)

HTML學習之塊級元素和行內元素的特徵和區別(一)

這幾天在學習HTML,這裡總結一下塊級元素和行內元素的特徵和區別,本文也是來自於其他同行的一些文章,在這裡感謝一下那些作者,下面先把這些原文粘貼出來

http://www.cnblogs.com/Jackie0714/p/4923639.html

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

一,下面從概念的角度來說一下塊級元素和行內元素

1.塊級元素,一般都是從新行開始,它可以容納行內元素和其他塊元素,常見塊級元素比如div/p等。“form”這個快元素比較特殊,他只能來容納其他塊元素

2.行內元素:也叫做內聯元素,一般都是語義級別的基本元素,內聯元素已辦只能容納文字或者其他內聯元素。

塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都是從新行開始的。而當加了css控制以後,塊元素可以變為內聯元素,內聯元素也可以變為塊元素。

二。塊級元素和內聯元素的區別

1.塊級元素會獨佔一行,其寬度自動填滿其父元素寬度

行內元素不會獨佔一行,相鄰的行內元素會排列到同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容變化而變化,

2.一般情況下,塊級元素可以設定width,height屬性,行內元素設定width,height無效

(注意,塊級元素設定了width寬度屬性後仍然是獨佔一行的)

3.塊級元素可以設定margin,padding屬性,行內元素的水平方向的padding-left和padding-right都會產生邊距效果,但是豎直方向上的padding-top和padding-bottom都不會產生邊距效果。

這裡做一些小小的總結。