html 行內元素和塊級元素

2021-10-01 11:32:45 字數 2536 閱讀 6924

行內元素一般是內容的容器,而塊級元素一般是其他容器的容器。一般情況下,行內元素只能包含內容或者其它行內元素,寬度和長度依據內容而定,不可以設定,可以和其它元素和平共處於一行;而塊級元素可以包含行內元素和其它塊級元素,且佔據父元素的整個空間,可以設定 width 和 height 屬性,瀏覽器通常會在塊級元素前後另起乙個新行。

因此,行內元素適合顯示具體內容,而塊級元素適合做布局。常用的行內和塊級元素如下:

級別元素

行內元素

a,b,strong,span,img,label,button,input,select,textarea

塊級元素

header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

之所以說「一般情況下」,是因為元素的級別不是一成不變的,瀏覽器是按照規範規定元素預設的級別,但是可以通過「display」屬性改變其級別。

常用的 display 可能的值如下:值說明

inline

以行內元素行為展示

block

以塊級元素行為展示

inline-block

行內元素和塊級元素特性兼而有之,既不會佔滿父元素,又可以設定width和height屬性

table

以**的形式展示

table-cell

以**單元格的形式展示

table-row

以**行的形式展示

table-column

以**列的形式展示

flex

css3 新增,雖然處於cr階段,但是很多現代瀏覽器已經支援無字首的該特性,ie從11開始部分支援。類似塊級元素,但是可以用於製作自適應布局

inline-flex

類似行內元素,但是可以用於製作自適應布局

grid

css3 新增,目前處於「實驗階段(experimental)」,只是得到了ie11和edge的部分支援

行內元素尺寸由內含的內容決定,盒模型中 padding, border 與塊級元素並無差異,都是標準的盒模型,但是 margin 卻只有水平方向的值,垂直方向並沒有起作用。

塊級元素當沒有明確指定 width 和 height 值時,塊級元素尺寸由內容確定,當指定了 width 和 height 的值時,內容超出塊級元素的尺寸就會溢位,這時塊級元素要呈現什麼行為要看其 overflow 的值,下面會提到。塊級元素的 padding, border 和標準的盒模型一致,但是如果width + padding + border + 指定的margin小於其父元素的寬度時,瀏覽器會通過補margin 來填滿整行。

塊級元素當沒有明確指定 width 和 height 值時,塊級元素尺寸由內容確定,當指定了 width 和 height 的值時,內容超出規定的尺寸就會溢位,元素的尺寸並不會隨著內容改變。這時候使用 overflow 可以指定內容超出時的行為,當然, overflow 只對塊級元素起作用,指定當內容超出塊級容器的時候,塊級元素該如何處理內容的顯示。overflow 可能的值如下表:值說明

visible

預設值,如果內容超出容器尺寸,不做任何處理

hidden

超出的內容被截斷並隱藏

scroll

無論內容是否超出,總是顯示滾動條。可以控制只顯示乙個方向的滾動條,這時應該設定 overflow-x 和 overflow-y

auto

內容沒有超出時,不顯示滾動條;內容超出時,顯示滾動條,且如果只有乙個方向超出,那麼只顯示該方向上的滾動條

舉個例子,html 結構是三個 div 元素,css 樣式一樣,只有 overflow 的值不同:

blockblockblock

blockblockblock

blockblockblock

.block

.block-hidden

.block-auto

最終,面對三種設定,效果是這樣的。

文章總結了行內元素和塊級元素的區別,每個元素都可以通過 display 來設定行內還是塊級顯示,inline 和 block 是兩種顯示模型,瀏覽器對每個元素都要採用一種模型來呈現元素,上面我們提到的行內元素和塊級元素分組,其實並不是它們天生就應該這樣,而是瀏覽器按照規範指定了預設值,因此即使我們沒有指定這些屬性,那些元素仍然會按照其所屬類別渲染呈現。通過display 可以改變元素對應的渲染呈現模型,也就是盒模型。當塊級元素的內容超出容器時,使用 overflow 屬性來指定塊級元素的行為。

但凡涉及頁面渲染呈現,都脫離不了與 css盒模型的關係,所以掌握盒模型是理解前端規範和瀏覽器行為的前提。display 屬性各種值其實是不同的渲染呈現模型,包括新增的 flex 和 grid,後面的文章我們再分享看的 flex 布局是神馬,它解決了什麼痛點,為什麼比較火

HTML 塊級元素和行內元素

行內內容是說由行內元素組成的內容,行內元素大家都知道吧,比如 span 元素,iframe元素和元素樣式的display inline的都是行內元素。例如文字這類元素,各個字母 之間橫向排列,到最右端自動折行。塊級內容跟則是由塊級元素構成,div 是最常用的塊級元素,元素樣式的display blo...

html塊級元素和行內元素

塊元素一般都從新行開始,它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊,它只能用來容納其他塊元素。如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種html的預設布局模式,把塊元素擺放到你想要 的位置上去。而不...

HTML行內元素和塊級元素

特點注意 塊級元素 div h1 h6 p ul ol li 比較霸道 自己獨佔一行 高度,寬度 外邊距以及內邊距都可以控制 寬度預設是容器 父級寬度 的100 是乙個容器及盒子,裡面可以放行內或者塊級元素 文字類的元素內不能使用塊級元素 標籤主要用於存放文字,因此 裡面不能放塊級元素,特別是不能放...