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