CSS的元素顯示模式

2022-06-18 15:00:14 字數 1314 閱讀 2863

一、什麼是元素顯示模式

網頁的標籤非常多,在不同地方會用到不同型別的標籤。了解他們的特點可以更好的布局我們的網頁

元素顯示模式就是元素(標籤)以什麼方式進行顯示。

html元素一般分為塊元素和行內元素兩種型別

二、塊元素

常見的塊元素

塊級元素的特點

1、比較霸道,自己獨佔一行

2、高度、寬度、外邊距以及內邊距都可以控制

3、寬度預設是容器(父級寬度)的100%

4、是乙個容器及盒子,裡面可以放行內或者塊級元素。

注意:文字類的元素內不能使用塊級元素,比如,--

三、行內元素

常見的行內元素有

標籤是最典型的行內元素,有的地方也將行內元素稱為內聯元素。

行內元素的特點

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

2、寬、高直接設定是無效的

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

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

注意:鏈結裡面不能再放鏈結

特殊情況鏈結裡面可以放塊級元素,但是給轉換一下塊級模式最安全

四、行內塊元素

在行內元素中有幾個特殊的標籤,

,它們同時具有塊元素和行內元素的特點。有些資料稱它們為行內塊元素。

行內塊元素的特點

1、和相鄰行內元素(行內塊)在一行上,但是他們之間會有空白縫隙。一行可以顯示多個(行內元素特點)

2、預設寬度是它本身內容的寬度(行內元素特定)

3、高度、行高、外邊距以及內邊距都可以控制(塊級元素特點)

五、元素顯示模式轉換

乙個模式的元素需要另外一種模式的特點

轉換為塊級元素  display:block

轉換為行內元素  display:inline

轉換為行內塊元素  display:inline-block

六、乙個小工具的使用snipaste

snipaste是乙個簡單但強大的截圖工具,也可以讓你將截圖貼回到螢幕上

常用的快捷方式

1、f1可以截圖,同時測量大小,設定箭頭,書寫文字等

2、f3在桌面指定顯示

3、點選,alt可以取色(按下shift可以切換取色模式)

4、按下esc取消顯示

七、乙個小技巧,單行文字垂直居中的**

讓文字的行高等於盒子的高度,就可以讓文字在當前盒子內垂直居中。

原理:行高 = 上空隙 + 文字本身高度 + 下間隙

盒子高度 = 上空隙 + 文字本身高度 + 下空隙

簡單理解:行高的上空隙和下空隙把文字擠到中間了,如果行高小於盒子高度,文字會偏上,如果行高大於盒子高度,則文字偏下。

CSS元素顯示模式

行內元素 元素顯示模式轉換 單行文字垂直居中 導航欄案例 元素以什麼方式進行顯示.常見的塊元素有常見的行內元素有,等 相鄰行內元素在一行上,一行可以顯示多個 高和寬直接設定是無效的 預設寬度就是它本身內容的寬度 行內元素只能容納文字或者其他行內元素 行內元素中有幾個特殊的標籤 它們同時具有塊元素和行...

CSS元素顯示模式

元素顯示模式就是元素 標籤 以什麼方式進行顯示 比如標籤獨佔一行,標籤可以在一行裡放多個 顯示模式分為以下幾類 塊元素 行內元素 行內塊元素 常見的塊元素有 常見的行內元素有,等,其中標籤是最典型的行內元素 有的地方也將行內元素稱為內聯元素 行內元素有以下特點 相鄰行內元素在一行上,一行可以顯示多個...

CSS 元素顯示模式

顯示特點 獨佔一行 寬度預設是父元素的寬度,高度預設由內容撐開 可以設定高度 顯示特點 一行可以顯示多個 不換行 寬度和高度預設由內容撐開 尺寸和內容大小相同 不可以設定寬高 顯示特點 一行可以設定多個 可以設定寬高 目的 改變元素預設的顯示特點,讓元素符合布局要求。display block 轉換...