內聯元素和塊級元素之間的轉換

2021-09-14 07:41:38 字數 915 閱讀 9947

內聯元素和塊級元素之間的轉換方法:

比如,我們完全可以把內聯元素加上display:block這樣的屬性,讓它也有每次都從新行開始的屬性,即成為塊元素。同樣我們可以把塊元素加上display:inline這樣的屬性,讓它也在一行上排列。

知識拓展

一、內聯元素又名行內元素(inline element),和其對應的是塊元素(block element)

內聯元素的特點:

1、和其他元素都在一行上;

2、高度、行高和頂以及底邊距都不可改變;

3、寬度就是它的文字或的寬度,不可改變。

總的來說,內聯元素一般都是基於語義級(semantic)的基本元素,它只能容納文字或者其他內聯元素,通常被包括在塊元素中使用,常見內聯元素有「a、b、br」等。

二、弄清楚display屬性

1、display:block

display:block就是將元素顯示為塊級元素,一般是其他元素的容器,可容納內聯元素和其他塊狀元素,塊狀元素排斥其他元素與其位於同一行,寬度(width)高度(height)起作用。常見塊狀元素為div和p。

2、display:inline

display:inline就是將元素顯示為內聯元素,內聯元素只能容納文字或者其他內聯元素,它允許其他內聯元素與其位於同一行,但寬度(width)高度(height)不起作用。常見內聯元素為「a」

3、display:inline-block

display:inline-block將物件呈遞為內聯物件,但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內,允許空格。(準確地說,應用此特性的元素呈現為內聯物件,周圍元素保持在同一行,但可以設定寬度和高度地塊元素的屬性)

4、display:inherit

inherit :繼承父類的屬性

塊級元素和內聯元素

我們首先要了解,所有的html元素,都要麼是block 塊元素 要麼是inline 內聯元素 下面了解一下block inline各自的特點 block元素的特點 example source code www.52css.com 總是在新行上開始 高度,行高以及頂和底邊距都可控制 寬度預設是它的容...

塊級元素和內聯元素

塊級元素和內聯元素 塊級元素 譯為 block level element,內聯元素 譯為 inline element。塊級元素在瀏覽器顯示時,通常會以新行來開始 和結束 例子 內聯元素在顯示時通常不會以新行開始。例子 html 分組標籤 定義文件中的分割槽或節 division section ...

塊級元素和內聯元素區別

在標準文件流裡面,塊級元素具有以下特點 總是在新行上開始,佔據一整行 高度,行高以及外邊距和內邊距都可控制 寬頻始終是與瀏覽器寬度一樣,與內容無關 它可以容納內聯元素和其他塊元素。行內元素的特點 和其他元素都在一行上 高,行高及外邊距和內邊距部分可改變 寬度只與內容有關 行內元素只能容納文字或者其他...