行內塊元素有哪些標籤 理論知識 塊元素與行內元素

2021-10-11 23:07:12 字數 1313 閱讀 2900

我是有芳,很開心你這麼好看還和我一起學習,今天我們來了解一下塊元素和行內元素以及如何去使用display屬性更改排布吧!

一塊元素與行內元素

下面是一些常用的塊元素標籤:

, ,

, 特點:

1、會獨佔一行,預設情況下,其寬度自動填滿其父元素寬度.

2、可以設定width,height屬性.

3、即使設定了寬度,仍然是獨佔一行.

4、可以設定margin和padding屬性.

行內元素

下面是一些常用的行內元素標籤:,,

特點:1、不會獨佔一行,相鄰的行內元素會排列在同一行裡,直到一行排不下才會換行.

2、設定width,height屬性無效,它的長度高度主要根據內容決定.

3、行內元素的margin和padding屬性,水平方向的都產生邊距效果,但豎直方向的卻不會產生邊距效果.

二display屬性更改元素型別

我們可以通過css選中元素並改變和重新宣告元素的display屬性值。若值為block可以使元素成為塊狀元素顯示,即會獨佔一行,多個元素會另起一行,可以設定 width、height、margin 和 padding 屬性.

display:inline

將display值設定為inline,可以將元素轉化為內聯元素。元素不會獨佔一行,設定 width、height 屬性無效。但可以設定水平方向的 margin 和 padding 屬性,不可以設定垂直方向的 padding 和 margin.

display:inline-block

display:inline-block可以使元素的所有塊狀元素的屬性生效。但元素又按照行內元素顯示,不會另起一行.

display:none

最後是none屬性值,其會完全隱藏元素,頁面渲染的時候會當它不存在。任何被包裹在這個屬性值元素內的元素都會被隱藏.

審核|有芳

行內元素有哪些?塊級元素有哪些?空元素有哪些?

塊級元素 block 的特性 總是獨佔一行,表現為另起一行開始,而且其後面的元素必須另起一行顯示,寬度 width 高度 height 內邊距 padding 外邊距 margin 都是可以自行控制的。行內元素 inline 或內聯元素特性 相鄰的內聯元素是在一行的 寬度 width 高度 heig...

行內元素和塊級元素有哪些

一.行內元素和塊級元素有哪些?塊級元素 information on author long quotation push button table caption definition description deleted text generic language style containe...

HTML行內元素與塊級元素有哪些及區別?

想起之前工作面試時,面試官問的乙個問題 行內元素有哪些,和塊級元素有什麼區別?這是一道蠻基礎的面試題,但是很多初學者平時只注重標籤語義,忽視了標籤行內和塊級的特性,因此對於上述問題很有可能答不上來或者答不全。html常見的行內元素有 還有包括一些文字元素如 等。要是只回答和 html常見的塊級元素有...