前端面試題-行內元素和塊級元素

1、行內元素

一個行內元素只佔據它 對應標籤的邊框所包含的空間。

2、塊級元素

塊級元素 佔據其父元素（容器）的整個空間，所以建立了一個「塊」。一般瀏覽器會在塊級元素先後另起一個 新行。

3、行內元素示例

HTML

CSS

Example

4、塊級元素示例

HTML

CSS

Example

5、行內元素的特色

5.1 和其餘元素都在同一行上

5.2 高，行高及外邊距和內邊距不可改變

5.3 寬度就是它的文字或圖片的寬度，不可改變

5.4 行內元素只能容納文本或者其餘行內元素

5.5 設置行內元素，須要注意以下

（1）設置寬度 width 無效。

（2）設置高度 height 無效，但能夠經過 line-height 來設置。

（3）設置 margin 只有 左右有效，上下無效。

（4）設置 padding 只有 左右有效，上下無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。

6、塊級元素的特色

6.1 老是在新一行開始

6.2 高度，行高以及外邊距和內邊距均可改變

6.3 若寬度沒有設置，則默認寬度爲容器的100%，除非設定一個寬度

6.4 塊級元素能夠容納行內元素和其餘塊級元素

7、行內元素和塊級元素對比

7.1 內容

（1）通常狀況下，行內元素只能包含數據和其餘行內元素。

（2）而塊級元素能夠包含行內元素和其餘塊級元素。這種結構上的包含繼承區別可使塊級元素建立比行內元素更」大型「的結構。

7.2 格式

默認狀況下，行內元素不會以新行開始，而塊級元素會新起一行。

7.3 寬高

（1）行內元素不能夠設置寬高

（2）塊級元素能夠設置寬高

7.4 內邊距和外邊距

（1）行內元素水平方向的 margin 和 padding 能夠生效。但豎直方向的 margin 和 padding 不能生效。

（2）塊級元素能夠設置margin，padding

8、行內元素列表

a	錨點
abbr	縮寫
acronym	首字
b	粗體(不推薦)
bdo	bidi override
big	大字體
br	換行
cite	引用
code	計算機代碼(在引用源碼的時候須要)
dfn	定義字段
em	強調
font	字體設定(不推薦)
i	斜體
img	圖片
input	輸入框
kbd	定義鍵盤文本
label	表格標籤
q	短引用
s	中劃線(不推薦)
samp	定義範例計算機代碼
select	項目選擇
small	小字體文本
span	經常使用內聯容器，定義文本內區塊
strike	中劃線
strong	粗體強調
sub	下標
sup	上標
textarea	多行文本輸入框
tt	電傳文本
u	下劃線

9、塊級元素列表

address	地址
blockquote	塊引用
center	舉中對齊塊
dir	目錄列表
div	經常使用塊級容易，也是CSS layout的主要標籤
dl	定義列表
fieldset	form控制組
form	交互表單
h1	大標題
h2	副標題
h3	3級標題
h4	4級標題
h5	5級標題
h6	6級標題
hr	水平分隔線
isindex	input prompt
menu	菜單列表
noframes	frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容
noscript	可選腳本內容（對於不支持script的瀏覽器顯示此內容）
ol	有序表單
p	段落
pre	格式化文本
table	表格
ul	無序列表

10、可變元素

可變元素爲根據上下文語境決定該元素爲行內元素或者塊級元素。

applet	java applet
button	按鈕
del	刪除文本
iframe	inline frame
ins	插入的文本
map	圖片區塊(map)
object	object對象
script	客戶端腳本

11、行內元素和塊級元素的轉換

11.1 display

（1）行內元素 display:inline

（2）塊級元素 display:block

（3）行內塊元素 display:inline-block

（4）行內元素轉換塊級元素 display:block

（5）塊級元素轉換行內元素 display:inline

11.2 float

若設置行內元素 float:left/right，則該行內元素轉換爲塊級元素 ，且具備浮動特性。

11.3 position

若爲行內元素進行定位，position:absolute 或者 position:fixed 都會把行內元素轉換爲塊級元素。

閱讀更多