行內元素和塊級元素的區別

2021-06-16 20:15:30 字數 3244 閱讀 8114

1. 行內元素會再一條直線上,是在同一行的。比如span和strong;

2. 塊級元素各佔一行。是垂直方向的!比如div和p.

假如你要將行內元素變成塊級元素,那麼就只需要在該標籤上加上樣式 display:block; 塊級元素可以用樣式控制其高、寬的值,而行內元素不可以。

行內元素與塊級元素列表

塊級元素列表

定義位址

定義**標題

定義列表中定義條目

定義文件中的分割槽或節

定義列表

定義列表中的專案

定義乙個框架集

建立 html 表單

定義最大的標題

定義副標題

定義標題

定義標題

定義標題

定義最小的標題

建立一條水平線

元素為 fieldset 元素定義標題

標籤定義列表專案

為那些不支援框架的瀏覽器顯示文字,於 frameset 元素內部

定義在指令碼未被執行時的替代內容

定義有序列表

定義無序列表

標籤定義段落

定義預格式化的文字

標籤定義 html **

標籤**主體(正文)

**中的標準單元格

定義**的頁尾(腳注或表注)

定義表頭單元格

標籤定義**的表頭

定義**中的行

行內元素列表

標籤可定義錨

表示乙個縮寫形式

定義只取首字母縮寫

字型加粗

可覆蓋預設的文字方向

大號字型加粗

換行引用進行定義

定義計算機**文字

定義乙個定義專案

定義為強調的內容

斜體文字效果

向網頁中嵌入一幅影象

輸入框定義鍵盤文字

標籤為 input 元素定義標註(標記)

定義短的引用

定義樣本文字

建立單選或多選選單

呈現小號字型效果

組合文件中的行內元素

語氣更強的強調的內容

定義下標文字

定義上標文字

多行的文字輸入控制項

打字機或者等寬的文字效果

定義變數

可變元素素列表--可變元素為根據上下文語境決定該元素為塊元素或者內聯元素

按鈕定義文件中已被刪除的文字

建立包含另外乙個文件的內聯框架(即行內框架)

標籤定義已經被插入文件中的文字

客戶端影象對映(即熱區)

object物件

客戶端指令碼

行內元素與塊級元素有什麼不同:

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

行內元素和width

w3c css2 標準規定行內元素、非置換元素不會應用width屬性。

以下例子中,對行內元素應用了width:200px,你可以看到,根本就沒有什麼效果。

行內元素和height

w3c css2 標準規定行內元素、非置換元素不會應用height屬性,但是盒子高度可以通過line-height來指定。

以下例子,對行內元素應用了height:50px,你可以看到什麼效果都沒。

行內元素和padding

你可以給行內元素設定padding,但只有padding-left和padding-right生效。

以下例子,行內元素應用了padding:50px。你可以看到對左右的內容有影響,但是對上下沒影響。

行內元素和marging

margin屬性也是和padding屬性一樣,對行內元素左右有效,上下無效。

設定寬度width   無效。

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

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

設定padding 只有左右padding有效,上下則無效。注意元素範圍是增大了,但是對元素周圍的內容是沒影響的,看圖上效果就知道了

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

在w3c css2.1規範第16.2節

對text-align 有詳細地描述:

------------------------------------------

值: left | right | center | justify | inherit

初始值:匿名值,由'direction'的值而定,如果'direction'為'ltr'則為'left',如果'direction'為'rtl'則為'right'。

應用於: 塊級元素,**單元格,行內塊元素

繼承性: 是

計算後的值:初始值或指定值

------------------------------------------

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

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

解釋一下,行內內容是說由行內元素組成的內容,行內元素大家都知道吧,比如 span 元素,iframe元素和元素樣式的 『display : inline』 的都是行內元素;塊級內容跟則是由塊級元素構成,div 是最常用的塊級元素。塊級元素和行內元素的區別是,塊級元素會佔一行顯示,而行內元素可以在一行併排顯示。

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

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

解決上面的問題比較好的方式,就是為所有需要相對父容器居中對齊的塊級元素設定「margin-left:auto; margin-right:auto」。但這個方式 ie6/ie7/ie8的混雜模式中不支援,所以還要設定父容器的 "text-align:center;"。

若居中對齊的子元素內的行內內容不需要居中對齊,則還需要為其設定「text-align:left」。

原文:

塊級元素和行內元素區別 以及行內塊元素

塊級元素的特點 1 寬度預設是容器的100 2 高度,行高 外邊距以及內邊距都可以控制。3 總是從新行開始 4 可以容納內聯元素和其他塊元素。行內元素的特點 1 預設寬度就是它本身內容的寬度。2 高 寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。3 和相鄰行內元素在一行上...

行內元素 塊級元素和行內塊級元素

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...

行內元素和塊級元素區別

引言 一次偶然的面試遇到的題目,雖然當時知道塊級元素和行內元素的區別,但是沒有仔細去想。一 行內元素與塊級元素 塊級元素列表 定義位址 定義 標題 定義列表中定義條目 定義文件中的分割槽或節 定義列表 定義列表中的專案 定義乙個框架集 建立 html 表單 定義最大的標題 定義副標題 定義標題 定義...