1. 程式人生 > >塊級元素和行內元素的差別

塊級元素和行內元素的差別

首先,百度解釋走一波:

塊元素又名塊級元素(block element),和其對應的是內聯元素(inline element),都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始,相鄰的塊級元素將會在不同行顯示。而當加入了css控制以後,塊元素和內聯元素的這種屬性差異就不成為差異了。

然後說人話,簡單點。可定義高和寬,有邊框概念的元素稱塊級元素,與之相反就稱為“行內元素”,顯示在行中,即“行內框”。

塊元素可以用width\height\minwidth\minheight\maxwidth\maxheight來定義寬度/高度/最小寬度/最小高度/最大寬度/最大高度,單位可以是px/%;行間距可以用px/%/倍數來定義,在自適應設計時最好用倍數來定義。

display 屬性設定為 block時,可以讓行內元素(比如 <a> 元素)表現得像塊級元素一樣;而設定為inline,可以讓塊元素表現為行內元素;設定為 none時,該框及其所有內容就不再顯示,不佔用文件中的空間。把一些文字新增到一個塊級元素(比如 div)的開頭,即使沒有把這些文字定義為段落,它也會被當作段落對待

再則是否出現:

display="none|block|inline|inline-block|table"; 隱藏元素(不佔位置空間)|顯示為塊級元素|預設,顯示為內聯元素,前後沒有換行符|顯示為內聯的塊元素,可以有塊的屬性如寬、高、邊距;與nowrap結合可以形成橫向排列 ,並撐開父容器

。|按表格的樣式顯示,可以消除塊之間預設的間距。