**:
一.兩種型別
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 設定的寬高無...