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

int64 發布于2019-08-02 16:01 / 1469人閱讀

摘要：二塊級元素塊級元素占據其父元素容器的整個空間，因此創建了一個塊。而塊級元素可以包含行內元素和其他塊級元素。格式默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。

一、行內元素

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

二、塊級元素

塊級元素占據其父元素（容器）的整個空間，因此創建了一個“塊”。通常瀏覽器會在塊級元素前后另起一個新行。

三、行內元素示例

HTML

CSS

Example

四、塊級元素示例

HTML

CSS

Example

五、行內元素的特點 5.1 和其他元素都在同一行上 5.2 高，行高及外邊距和內邊距不可改變 5.3 寬度就是它的文字或圖片的寬度，不可改變 5.4 行內元素只能容納文本或者其他行內元素 5.5 設置行內元素，需要注意如下

（1）設置寬度 width 無效。

（2）設置高度 height 無效，但可以通過 line-height 來設置。

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

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

六、塊級元素的特點 6.1 總是在新一行開始 6.2 高度，行高以及外邊距和內邊距都可改變 6.3 若寬度沒有設置，則默認寬度為容器的100%，除非設定一個寬度 6.4 塊級元素可以容納行內元素和其他塊級元素 七、行內元素和塊級元素對比 7.1 內容

（1）一般情況下，行內元素只能包含數據和其他行內元素。

（2）而塊級元素可以包含行內元素和其他塊級元素。這種結構上的包含繼承區別可以使塊級元素創建比行內元素更”大型“的結構。

7.2 格式

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

7.3 寬高

（1）行內元素不可以設置寬高

（2）塊級元素可以設置寬高

7.4 內邊距和外邊距

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

（2）塊級元素可以設置margin，padding

八、行內元素列表

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	下劃線

九、塊級元素列表

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	無序列表

十、可變元素

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

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

十一、行內元素和塊級元素的轉換 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 都會把行內元素轉換為塊級元素。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/54523.html

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

摘要：二塊級元素塊級元素占據其父元素容器的整個空間，因此創建了一個塊。而塊級元素可以包含行內元素和其他塊級元素。格式默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。一、行內元素一個行內元素只占據它對應標簽的邊框所包含的空間。二、塊級元素塊級元素占據其父元素（容器）的整個空間，因此創建了一個塊。通常瀏覽器會在塊級元素前后另起一個新行。三、行內元素示例 HTML showIm...

cucumber 2019-08-30 14:15 評論0 收藏0
2018面試題總結（一）

摘要：面試題總結現將我整理的一些前端筆試題分享一下，希望對大家有所幫助。中常見行內元素和塊級元素有哪些行內元素塊級元素行內塊元素常見的有的和有什么區別和的值為時，都會使顯示出來的文本框不能輸入文字，不能更改更改表單域中的內容。 2018面試題總結現將我整理的一些前端筆試題分享一下，希望對大家有所幫助。 html中常見行內元素和塊級元素有哪些?行內元素：a,b,strong,span,im...

邱勇 2019-08-22 16:19 評論0 收藏0
2018面試題總結（一）

摘要：面試題總結現將我整理的一些前端筆試題分享一下，希望對大家有所幫助。中常見行內元素和塊級元素有哪些行內元素塊級元素行內塊元素常見的有的和有什么區別和的值為時，都會使顯示出來的文本框不能輸入文字，不能更改更改表單域中的內容。 2018面試題總結現將我整理的一些前端筆試題分享一下，希望對大家有所幫助。 html中常見行內元素和塊級元素有哪些?行內元素：a,b,strong,span,im...

Michael_Lin 2019-08-02 10:11 評論0 收藏0
2018面試題總結（一）

摘要：面試題總結現將我整理的一些前端筆試題分享一下，希望對大家有所幫助。中常見行內元素和塊級元素有哪些行內元素塊級元素行內塊元素常見的有的和有什么區別和的值為時，都會使顯示出來的文本框不能輸入文字，不能更改更改表單域中的內容。 2018面試題總結現將我整理的一些前端筆試題分享一下，希望對大家有所幫助。 html中常見行內元素和塊級元素有哪些?行內元素：a,b,strong,span,im...

Noodles 2019-08-30 15:53 評論0 收藏0