摘要:標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型,也可以稱為塊元素和行內(nèi)元素。塊元素和行內(nèi)元素的具體特點(diǎn)如下三塊級(jí)元素塊元素會(huì)獨(dú)自占據(jù)一整行,或者多行,可以任意設(shè)置其大小尺寸,是用于搭建網(wǎng)頁(yè)布局的必須部分,使網(wǎng)頁(yè)結(jié)構(gòu)更加緊湊合理。
初學(xué)html,接觸很多標(biāo)簽 、、
等,當(dāng)寫出簡(jiǎn)單的小頁(yè)面的時(shí)候,例如僅僅是一篇帶有標(biāo)題的文章,標(biāo)題、
、
標(biāo)簽多帶帶一行,不管后面有多大的空間;
標(biāo)簽中使用多個(gè)
給某些詞做強(qiáng)調(diào),但是
卻和
中的其他內(nèi)容同一行,由此,會(huì)思考為什么
和
會(huì)有這種的不同?
想要知道為何不同,得先了解HTML標(biāo)簽的類型。
HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型,也可以稱為塊元素和行內(nèi)元素。
上面舉例中的標(biāo)簽就是典型的塊元素,
標(biāo)簽就是一個(gè)行內(nèi)元素。塊元素和行內(nèi)元素的具體特點(diǎn)如下:
塊元素會(huì)獨(dú)自占據(jù)一整行,或者多行,可以任意設(shè)置其大小尺寸,是用于搭建網(wǎng)頁(yè)布局的必須部分,使網(wǎng)頁(yè)結(jié)構(gòu)更加緊湊合理。
塊級(jí)元素有以下幾個(gè)特點(diǎn):
常見(jiàn)的塊級(jí)元素有:<div>/<h1>~<h6>/<p>/<ul>/<table>等,其中<div>是最常用最典型的塊級(jí)元素。
特殊:文字類的塊級(jí)元素不能放塊元素,例如 /~
/
?/*塊元素div*/
div{
????width:?200px;???????/*寬高、外邊距、內(nèi)邊距?都有效*/
????height:?30px;
????border:1px?solid?blue;
????margin:20px;????????
????/*????padding:10px;*/???/*此處內(nèi)邊距會(huì)引起div寬高的變化,為了比較更直觀就注釋了*/
????line-height:?30px;
}
使用以上樣式給下面塊元素div設(shè)置
<div>我是塊元素2div>
<div>我是塊元素2div>
效果圖見(jiàn)文末。
行內(nèi)元素也稱為內(nèi)聯(lián)元素,行內(nèi)元素不占有獨(dú)立區(qū)域,其大小僅僅被動(dòng)的依賴于自身內(nèi)容的大小(例如文字和圖片),所以一般不能隨意設(shè)置其寬高、對(duì)齊等屬性。常用于控制頁(yè)面中文本的樣式。
行內(nèi)元素的特點(diǎn):
特殊:a比較特殊,可以放塊級(jí)元素,但是鏈接里面不能再放鏈接。
/*行內(nèi)元素span*/
span{
????width:200px;????????/*寬度設(shè)置無(wú)效*/
????height:?100px;??????/*高度也無(wú)效*/
????border:1px?solid?red;
}
下面是Html樣式
<span>行內(nèi)元素1span>
<span>行內(nèi)元素2span>
<span>行內(nèi)元素3span>
<span>我是行內(nèi)元素行內(nèi)元素行內(nèi)元素4span>
效果圖見(jiàn)文末
普遍的規(guī)則里總有那么幾個(gè)不一樣的,在行內(nèi)元素中就有那么幾個(gè)特殊標(biāo)簽,比如 結(jié)構(gòu): 綜合效果圖如下: 既然標(biāo)簽有不同的顯示模式,就會(huì)有相應(yīng)的轉(zhuǎn)換辦法以應(yīng)對(duì)各種需要。 display正是我們想要的。 塊元素——>行內(nèi)元素 : display:inline; 行內(nèi)元素——>塊: display:block; 塊、行內(nèi)元素——>行內(nèi)塊: display: inline-block; 總結(jié)完他們之間的特點(diǎn)更加清晰,記得更牢,首先在以后遇到當(dāng)給一個(gè)元素設(shè)置的寬高無(wú)效的時(shí)候這就是一個(gè)原因,使用display即可解決。樣式:
/*行內(nèi)塊元素input*/
input{
????width:?200px;??????/*寬高均有效*/
????height:?30px;
}<input?type="text"?value="行內(nèi)塊元素1">?
<input?type="text"?value="行內(nèi)塊元素行內(nèi)塊元素2行內(nèi)塊元素">六、標(biāo)簽顯示模式轉(zhuǎn)換(display)
總結(jié)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/1946.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...
摘要:二塊級(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...
摘要:此元素將顯示為塊級(jí)元素,此元素前后會(huì)帶有換行符。新增的值此元素會(huì)作為列表顯示。塊級(jí)元素和行內(nèi)元素的分類中的塊級(jí)元素標(biāo)簽描述定義地址。定義圍繞表單中元素的邊框。定義預(yù)定義范圍內(nèi)的度量。定義針對(duì)不支持框架的用戶的替代內(nèi)容。定義表格中的單元。 標(biāo)簽(空格分隔): CSS 在html中元素主要分為行內(nèi)元素和塊級(jí)元素 行內(nèi)元素 [x] 不獨(dú)占一行 [x] 書寫完成后不會(huì)自動(dòng)換行 [x] 沒(méi)...
摘要:此元素將顯示為塊級(jí)元素,此元素前后會(huì)帶有換行符。新增的值此元素會(huì)作為列表顯示。塊級(jí)元素和行內(nèi)元素的分類中的塊級(jí)元素標(biāo)簽描述定義地址。定義圍繞表單中元素的邊框。定義預(yù)定義范圍內(nèi)的度量。定義針對(duì)不支持框架的用戶的替代內(nèi)容。定義表格中的單元。 標(biāo)簽(空格分隔): CSS 在html中元素主要分為行內(nèi)元素和塊級(jí)元素 行內(nèi)元素 [x] 不獨(dú)占一行 [x] 書寫完成后不會(huì)自動(dòng)換行 [x] 沒(méi)...
摘要:在中,和就是典型的行內(nèi)元素元素。內(nèi)聯(lián)元素不單獨(dú)占一行,給他設(shè)置寬高是沒(méi)有用的。在中和就是塊級(jí)元素。此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。此元素會(huì)作為塊級(jí)表格來(lái)顯示類似,表格前后帶有換行符。 display屬性 首先,所有主流瀏覽器都支持 display 屬性。其次,我們都知道display 屬性規(guī)定元素應(yīng)該生成的框的類型。默認(rèn)值:inline 我們常用的display屬性值...
閱讀 2426·2021-11-19 09:40
閱讀 3591·2021-10-12 10:12
閱讀 1899·2021-09-22 15:04
閱讀 2912·2021-09-02 09:53
閱讀 776·2019-08-29 11:03
閱讀 1132·2019-08-28 18:11
閱讀 1736·2019-08-23 15:28
閱讀 3588·2019-08-23 15:05