HTML塊級元素與行級元素

2021-07-22 07:48:16 字數 3754 閱讀 7771

**:

一.兩種型別

html中的大部分元素都可分為兩種型別:塊級元素和行級元素。這些元素的型別是通過文件型別定義(dtd)來指明。塊級元素會從新的一行出現,行 級元素則不會。塊級元素的前後都會有插入的斷行,所以如果不用css則沒法讓兩個塊級元素並列在一起。

二.塊級元素

塊級元素一般作為容器出現,用來組織結構,但並不全是如此。有些塊級元素,如只能包含塊級元素。其他的塊級元素則可以包含 行級元素如.也有一些則既可以包含塊級,也可以包含行級元素。如,,

三.行級元素

行級元素一般是包含語義意義的元素。行級元素一般只能包含文字或其他行級元素。行級元素不能被應用下列屬性:

width

height

max-width

max-height

min-width

min-height

如果你想改變這些屬性,應該應用給它的屬於塊級元素的父元素。

四.spring brother

有些元素既可以是塊級元素,也能成為行級元素。例如和。當這兩個元素直接出現在中時,它們就是塊級元素。如果作為的子元素,他們就是行級 元素,此時不能包含其他的塊級元素。

五.css中的型別

css中的盒子也有塊級和行級之分,也包括其他型別,如,列表和**等。html中的塊級元素會產生塊級盒子,行級元素會產生行級盒子。在css 中,可以用display控制盒子的型別。如,把乙個行級元素轉換成塊級元素。注意,這種轉換並不能改變元素本質。即使你把它轉換成了 塊級元素,你也不能讓它包含其他的塊級元素,你轉換的只是css的盒子的外觀。

通常沒有必要改變元素的盒子型別,下列情況一般有改變盒子的需求:

水平的列表選單

不斷行的標題

隱藏元素

六.盒子型別的變化

對於應用了浮動或絕對定位的元素,如此類樣式:float:left,position:absolute,position:fixed。這類元 素的盒子型別顯然改變了。它們都變成了塊級元素,因此display屬性一般都被忽略。

七.盒子的消失

如果對元素應用display:none,它(包括它的子元素)將會被隱藏起來。對它應用的float,position屬性也不再有意義。因為它將不會產生任何的盒子。

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

塊級元素

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

citation

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僅作用於行內內容上。

HTML 塊級元素與行級元素

一 行內元素與塊級元素 塊級元素列表 定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題 定義副標題 定義標題 定義標題 定義標題 定義最小的標題 建立一條水平線 元素為 fieldset 元素定義標題 ...

html 塊級元素 與 行級元素

一 塊級元素 block element 每個塊級元素預設佔一行高度,一行內新增乙個塊級元素後無法一般無法新增其他元素 float浮動後除外 兩個塊級元素連續編輯時,會在頁面自動換行顯示。塊級元素一般可巢狀塊級元素或行內元素 塊級元素一般作為容器出現,用來組織結構,但並不全是如此。有些塊級元素,如只...

行級元素 塊級元素

一.元素分類 行間元素 inline span,strong,em,a,del 塊級元素 block div,p,h1 h6,ul,ol,li,form,address 行塊級元素 inline block img 1.行間元素 內容決定元素所在位置,不可以通過css改變寬高。1234 設定的寬高無...