行內元素和塊級元素有哪些

2021-06-20 12:51:14 字數 2701 閱讀 9400

一.行內元素和塊級元素有哪些?

塊級元素

information on author

long quotation

push button

table caption

definition description

deleted text

generic language/style container

definition list

definition term

form control group

interactive form

heading

heading

heading

heading

heading

heading

horizontal rule

inline subwindow

inserted text

fieldset legend

list item

client-side image map

alternate content container for non frame-based rendering

alternate content container for non script-based rendering

generic embedded object

ordered list

paragraph

preformatted text

table

table body

table data cell

table footer

table header cell

table header

table row

unordered list

行內元素

anchor

abbreviated form

acronym

bold text style

i18n bidi over-ride

large text style

forced line break

push button

te>

citation

de>

computer code fragment

deleted text

instance definition

emphasis

italic text style

inline subwindow

embedded image

form control

inserted text

text to be entered by the user

form field label text

client-side image map

generic embedded object

short inline quotation

sample program output, scripts, etc.

option selector

small text style

generic language/style container

strong emphasis

subscript

superscript

multi-line text field

teletype or monospaced text style

instance of a variable or program argument

二.行內元素與塊級元素有什麼不同?

塊級元素和行內元素的區別是,塊級元素會佔一行顯示,而行內元素可以在一行併排顯示。

通過樣式控制,它們可以相互轉換。

1.尺寸-塊級元素和行內元素之間的乙個重要的不同點

設定寬度width 無效。

設定高度height 無效,可以通過line-height來設定。

設定margin 只有左右margin有效,上下無效。

設定padding 只有左右padding有效,上下則無效。

注:這裡說的無效, 是指,它對其它元素的排列沒有影響。也就是說,對於設定的margin,padding行內元素文件流裡的上下元素來說,他們的間距不會因為上下margin或者上下padding而產生間距。但是就他本身而言,對於上下margin與padding是有效的。

上面寫的有點繞了,我也是盡量表達。請參照下圖,如果還是不清楚,請動手自己寫一下,就能明白了。

2.text-align屬性是兩者表現的又以不同之處

這個特性描述了如何使乙個塊元素的行內內容對齊。

注意一點,w3c標準裡說這個屬性是用來對齊行內內容的,所以,不應該對塊級內容起作用。

解釋一下,行內內容是說由行內元素組成的內容,

這樣,我們對這個特性的認識應該就清楚了。但是,問題來了,雖然標準裡這麼規定,那麼是不是所有瀏覽器都遵守呢?答案是否定的。啊? 又是ie!!

ie6/7及ie8混雜模式中,text- align:center可以使塊級元素也居中對齊。其他瀏覽器中,text-align:center僅作用於行內內容上。

行內元素有哪些?塊級元素有哪些?空元素有哪些?

塊級元素 block 的特性 總是獨佔一行,表現為另起一行開始,而且其後面的元素必須另起一行顯示,寬度 width 高度 height 內邊距 padding 外邊距 margin 都是可以自行控制的。行內元素 inline 或內聯元素特性 相鄰的內聯元素是在一行的 寬度 width 高度 heig...

常用的行內元素和塊級元素有哪些及區別?

1.塊級元素,寬度預設是它容器的100 各佔據一行,垂直方向排列 內聯元素,都是同一行,水平方向排列 2.塊級元素,能容納其他塊元素或者內聯元素 內聯元素,只能容納文字或其他內聯元素 3.塊級元素中height,line height以及margin和padding都可以控制 行內元素設定width...

HTML行內元素與塊級元素有哪些及區別?

想起之前工作面試時,面試官問的乙個問題 行內元素有哪些,和塊級元素有什麼區別?這是一道蠻基礎的面試題,但是很多初學者平時只注重標籤語義,忽視了標籤行內和塊級的特性,因此對於上述問題很有可能答不上來或者答不全。html常見的行內元素有 還有包括一些文字元素如 等。要是只回答和 html常見的塊級元素有...