HTML CSS 元素的顯示模式

2021-10-09 15:56:31 字數 1284 閱讀 3074

在了解元素顯示模式前,我們先來舉個不恰當的例子:比如在世界上的人有成萬上億,那麼歸根結底只有兩種人就是男人和女人,偶爾還有可能有第三種人-人妖。無論是男人還是女人甚至人妖,雖然都是人但是不同的人也有著不同的特點或者說不同的分工。

其實在html中也跟我們人類相似,html中同樣也有多種多樣的元素標籤,但歸根結底可以分為兩大類:塊元素和行內元素。而不同的元素又有著不同的特點和作用,了解了它們的特點我們就可以很好的對網頁進行布局。

談到了網頁的布局其實就涉及到了元素的顯示模式。html中有那麼多元素並且在一般情況下又分為了塊元素和行內元素,而這些元素在網頁中的顯示方式就是元素的顯示模式。比如div要自己獨佔一行,而span在同一行中就可以放置多個。

上面說html元素分為塊元素和行內元素,那麼哪些是塊元素哪些是行內元素,它們又有什麼特點呢,接下來我們逐一分析:

常用的塊元素有~、、、、常見的行內元素又、、、、、、、、、等,其中標籤時最典型的行內元素,有的地方也稱為內聯元素。

行內元素特點:

相鄰行內元素在同一行上,一行可以顯示多個

寬和高直接設定是無效的

預設寬度就是它本身內容的寬度

行內元素只能容納文字或其它行內元素

注意點:

本來在html元素中分為兩大類行內和塊級元素,但是在行內元素中有幾個特殊的標籤,

行內塊元素特點:

和相鄰行內元素(行內塊)在同一行上,但是它們之間會有間隙,一行可以顯示多個(行內元素特點)

預設寬度就是它本身內容的寬度(行內元素)

寬度、高度、行高和邊距可以設定(塊級元素特點)

元素模式

元素排列

設定樣式

預設寬度

包含塊級元素

一行只能放乙個塊級元素

可以設定寬度和高度

容器寬度的100%

容器類可以包含任何標籤

行內元素

一行可以放多個行內元素

不可以直接設定寬度高度(需轉換)

本身內容的寬度

容納文字或其它行內元素

行內塊元素

一行可以放多個行內塊元素

可以設定寬高

本身內容寬度

特殊情況下,我們需要元素模式的轉換,簡單來說,乙個模式的元素需要另外一種模式的特性,這時就需要元素轉換。

比如想要設定行內元素a的寬度和高度,就需要將a轉換為塊元素,這樣就可以設定寬和高了。

display:在css中用display就可以實現元素模式的互相轉換,從而使元素的一種模式具有另一種模式的特點

元素的顯示模式

1.獨佔一行 2.可以設定width height 3.預設width是父級元素寬度的100 4.塊級元素裡可以放塊級元素和行內元素 文字類的標籤內不能使用塊元素,主要用於存放文字,因此標籤不能放塊級元素。1.一行可以顯示多個 2.width height設定無效 3.width預設內容的寬度 4....

元素顯示模式

權重 id的權重是100。類的權重是10。標籤的權重是1。樣式最後使用 元素顯示模式 塊元素 常見的塊元素有,行內元素 常見的行內元素有,1.一行顯示多個 2.設定width,height無效 3.預設的寬高是內容的寬高 鏈結裡不能再放鏈結,特殊情況鏈結裡可以放塊級元素,但是給轉換一下塊級模式最安全...

元素顯示的模式控制

ul li ul li hover 這裡的display inline block 需要解釋一下,如果屬性值為none則隱藏,如果屬性值為inline,則變為行內元素,相當於span標籤,這時指定寬和高是不起作用的,如果指定為inline block,則也為行內元素,但有塊級元素的特徵,可以指定寬和...