摘要:二塊級(jí)元素塊級(jí)元素占據(jù)其父元素容器的整個(gè)空間,因此創(chuàng)建了一個(gè)塊。而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素。格式默認(rèn)情況下,行內(nèi)元素不會(huì)以新行開(kāi)始,而塊級(jí)元素會(huì)新起一行。
一、行內(nèi)元素
一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。二、塊級(jí)元素
塊級(jí)元素占據(jù)其父元素(容器)的整個(gè)空間,因此創(chuàng)建了一個(gè)“塊”。通常瀏覽器會(huì)在塊級(jí)元素前后另起一個(gè)新行。三、行內(nèi)元素示例
HTML
CSS
Example
四、塊級(jí)元素示例HTML
CSS
Example
五、行內(nèi)元素的特點(diǎn) 5.1 和其他元素都在同一行上 5.2 高,行高及外邊距和內(nèi)邊距不可改變 5.3 寬度就是它的文字或圖片的寬度,不可改變 5.4 行內(nèi)元素只能容納文本或者其他行內(nèi)元素 5.5 設(shè)置行內(nèi)元素,需要注意如下(1)設(shè)置寬度 width 無(wú)效。
(2)設(shè)置高度 height 無(wú)效,但可以通過(guò) line-height 來(lái)設(shè)置。
(3)設(shè)置 margin 只有 左右有效,上下無(wú)效。
(4)設(shè)置 padding 只有 左右有效,上下無(wú)效。注意元素范圍是增大了,但是對(duì)元素周?chē)膬?nèi)容是沒(méi)影響的。
六、塊級(jí)元素的特點(diǎn) 6.1 總是在新一行開(kāi)始 6.2 高度,行高以及外邊距和內(nèi)邊距都可改變 6.3 若寬度沒(méi)有設(shè)置,則默認(rèn)寬度為容器的100%,除非設(shè)定一個(gè)寬度 6.4 塊級(jí)元素可以容納行內(nèi)元素和其他塊級(jí)元素 七、行內(nèi)元素和塊級(jí)元素對(duì)比 7.1 內(nèi)容(1)一般情況下,行內(nèi)元素只能包含數(shù)據(jù)和其他行內(nèi)元素。
(2)而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素。這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級(jí)元素創(chuàng)建比行內(nèi)元素更”大型“的結(jié)構(gòu)。
7.2 格式默認(rèn)情況下,行內(nèi)元素不會(huì)以新行開(kāi)始,而塊級(jí)元素會(huì)新起一行。
7.3 寬高(1)行內(nèi)元素不可以設(shè)置寬高
(2)塊級(jí)元素可以設(shè)置寬高
7.4 內(nèi)邊距和外邊距(1)行內(nèi)元素水平方向的 margin 和 padding 可以生效。但豎直方向的 margin 和 padding 不能生效。
(2)塊級(jí)元素可以設(shè)置margin,padding
八、行內(nèi)元素列表a | 錨點(diǎn) |
abbr | 縮寫(xiě) |
acronym | 首字 |
b | 粗體(不推薦) |
bdo | bidi override |
big | 大字體 |
br | 換行 |
cite | 引用 |
code | 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要) |
dfn | 定義字段 |
em | 強(qiáng)調(diào) |
font | 字體設(shè)定(不推薦) |
i | 斜體 |
img | 圖片 |
input | 輸入框 |
kbd | 定義鍵盤(pán)文本 |
label | 表格標(biāo)簽 |
q | 短引用 |
s | 中劃線(不推薦) |
samp | 定義范例計(jì)算機(jī)代碼 |
select | 項(xiàng)目選擇 |
small | 小字體文本 |
span | 常用內(nèi)聯(lián)容器,定義文本內(nèi)區(qū)塊 |
strike | 中劃線 |
strong | 粗體強(qiáng)調(diào) |
sub | 下標(biāo) |
sup | 上標(biāo) |
textarea | 多行文本輸入框 |
tt | 電傳文本 |
u | 下劃線 |
address | 地址 |
blockquote | 塊引用 |
center | 舉中對(duì)齊塊 |
dir | 目錄列表 |
div | 常用塊級(jí)容易,也是CSS layout的主要標(biāo)簽 |
dl | 定義列表 |
fieldset | form控制組 |
form | 交互表單 |
h1 | 大標(biāo)題 |
h2 | 副標(biāo)題 |
h3 | 3級(jí)標(biāo)題 |
h4 | 4級(jí)標(biāo)題 |
h5 | 5級(jí)標(biāo)題 |
h6 | 6級(jí)標(biāo)題 |
hr | 水平分隔線 |
isindex | input prompt |
menu | 菜單列表 |
noframes | frames可選內(nèi)容,(對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容 |
noscript | 可選腳本內(nèi)容(對(duì)于不支持script的瀏覽器顯示此內(nèi)容) |
ol | 有序表單 |
p | 段落 |
pre | 格式化文本 |
table | 表格 |
ul | 無(wú)序列表 |
可變?cè)貫楦鶕?jù)上下文語(yǔ)境決定該元素為行內(nèi)元素或者塊級(jí)元素。
applet | java applet |
button | 按鈕 |
del | 刪除文本 |
iframe | inline frame |
ins | 插入的文本 |
map | 圖片區(qū)塊(map) |
object | object對(duì)象 |
script | 客戶(hù)端腳本 |
(1)行內(nèi)元素 display:inline
(2)塊級(jí)元素 display:block
(3)行內(nèi)塊元素 display:inline-block
(4)行內(nèi)元素轉(zhuǎn)換塊級(jí)元素 display:block
(5)塊級(jí)元素轉(zhuǎn)換行內(nèi)元素 display:inline
11.2 float若設(shè)置行內(nèi)元素 float:left/right,則該行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素 ,且具有浮動(dòng)特性。
11.3 position若為行內(nèi)元素進(jìn)行定位,position:absolute 或者 position:fixed 都會(huì)把行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素。
閱讀更多
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/115890.html
摘要:二塊級(jí)元素塊級(jí)元素占據(jù)其父元素容器的整個(gè)空間,因此創(chuàng)建了一個(gè)塊。而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素。格式默認(rèn)情況下,行內(nèi)元素不會(huì)以新行開(kāi)始,而塊級(jí)元素會(huì)新起一行。 一、行內(nèi)元素 一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。 二、塊級(jí)元素 塊級(jí)元素占據(jù)其父元素(容器)的整個(gè)空間,因此創(chuàng)建了一個(gè)塊。通常瀏覽器會(huì)在塊級(jí)元素前后另起一個(gè)新行。 三、行內(nèi)元素示例 HTML showIm...
摘要:面試題總結(jié)現(xiàn)將我整理的一些前端筆試題分享一下,希望對(duì)大家有所幫助。中常見(jiàn)行內(nèi)元素和塊級(jí)元素有哪些行內(nèi)元素塊級(jí)元素行內(nèi)塊元素常見(jiàn)的有的和有什么區(qū)別和的值為時(shí),都會(huì)使顯示出來(lái)的文本框不能輸入文字,不能更改更改表單域中的內(nèi)容。 2018面試題總結(jié) 現(xiàn)將我整理的一些前端筆試題分享一下,希望對(duì)大家有所幫助。 html中常見(jiàn)行內(nèi)元素和塊級(jí)元素有哪些?行內(nèi)元素:a,b,strong,span,im...
摘要:面試題總結(jié)現(xiàn)將我整理的一些前端筆試題分享一下,希望對(duì)大家有所幫助。中常見(jiàn)行內(nèi)元素和塊級(jí)元素有哪些行內(nèi)元素塊級(jí)元素行內(nèi)塊元素常見(jiàn)的有的和有什么區(qū)別和的值為時(shí),都會(huì)使顯示出來(lái)的文本框不能輸入文字,不能更改更改表單域中的內(nèi)容。 2018面試題總結(jié) 現(xiàn)將我整理的一些前端筆試題分享一下,希望對(duì)大家有所幫助。 html中常見(jiàn)行內(nèi)元素和塊級(jí)元素有哪些?行內(nèi)元素:a,b,strong,span,im...
摘要:面試題總結(jié)現(xiàn)將我整理的一些前端筆試題分享一下,希望對(duì)大家有所幫助。中常見(jiàn)行內(nèi)元素和塊級(jí)元素有哪些行內(nèi)元素塊級(jí)元素行內(nèi)塊元素常見(jiàn)的有的和有什么區(qū)別和的值為時(shí),都會(huì)使顯示出來(lái)的文本框不能輸入文字,不能更改更改表單域中的內(nèi)容。 2018面試題總結(jié) 現(xiàn)將我整理的一些前端筆試題分享一下,希望對(duì)大家有所幫助。 html中常見(jiàn)行內(nèi)元素和塊級(jí)元素有哪些?行內(nèi)元素:a,b,strong,span,im...
閱讀 1417·2021-11-09 09:45
閱讀 1785·2021-11-04 16:09
閱讀 1449·2021-10-14 09:43
閱讀 1814·2021-09-22 15:24
閱讀 1589·2021-09-07 10:06
閱讀 1597·2019-08-30 14:15
閱讀 980·2019-08-30 12:56
閱讀 1563·2019-08-29 17:22