CSS入門 元素的顯示模式

2021-10-11 02:31:32 字數 1884 閱讀 2549

一.元素的顯示模式分類:塊元素,行內元素,行內塊元素

二.(1)塊元素:

常見的塊元素有< h 1>-< h 6 >,< d i v>,< ul >,< li >,< ol>等

特點:

獨佔一行;

高度寬度,外邊距和內邊距可以控制;

寬度預設是容器的100%;

是乙個盒子,裡面可以放行元素或者塊元素

p標籤主要用來放文字,不可以放div;

(2)行內元素:

常見的行內元素有:< a >< em >< span >

特點:

相鄰行內元素可以在一行顯示;

高寬直接設定是無效的;

預設寬度就是他本身文字內容的寬度

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

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

塊元素和行內元素title

>

>

diva

input

style

>

head

>

>

>

href

="#"

>

我想買風衣a

>

>

還想買新手機span

>

div>

type

="text"

>

body

>

html

>

(3)行內塊元素

常見的行內塊元素:< img/ >,< input/ >,< td>-----他們同時局具有行內元素和塊元素的特點:

一行可以顯示多個

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

高度寬度內外邊距可以控制

(4)元素顯示模式的轉換:

轉換成塊元素:display:block

轉換成行元素:display:inline

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

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

元素模式的轉換title

>

>

/* */

a/* 把塊元素div轉化成行元素,變成行內元素後寬度高度無效 */

div/* 把行內元素轉換成行內快元素 */

span

style

>

head

>

>

href

="#"

>

榴蓮披薩真好吃a

>

>

我想吃榴蓮披薩div

>

>

我想吃榴蓮披薩div

>

>

>

可是小陳不給我吃span

>

body

>

html

>

CSS元素顯示模式

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

CSS元素顯示模式

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

CSS 元素顯示模式

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