溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

探究行內(nèi)元素和塊級元素

發(fā)布時間:2020-08-14 17:39:02 來源:網(wǎng)絡(luò) 閱讀:229 作者:anyw3c 欄目:web開發(fā)

html中元素主要分為行內(nèi)元素和塊級元素

行內(nèi)元素

  • 不獨占一行
  • 書寫完成后不會自動換行
  • 沒有寬和高

塊級元素

  • 獨占一行
  • 書寫完會自動換行
  • 寬和高可以修改

還有一種特殊的元素叫作行內(nèi)塊級元素

描述
none 此元素不會被顯示。
block 此元素將顯示為塊級元素,此元素前后會帶有換行符。
inline 默認(rèn)。此元素會被顯示為內(nèi)聯(lián)元素,元素前后沒有換行符。
inline-block 行內(nèi)塊元素。(CSS2.1 新增的值)
list-item 此元素會作為列表顯示。

塊級元素和行內(nèi)元素的分類

html中的塊級元素:


標(biāo)簽 描述
<address> 定義地址。
<article> 定義文章。
<aside> 定義頁面內(nèi)容之外的內(nèi)容。
<audio> 定義聲音內(nèi)容。
<blockquote> 定義長的引用。
<canvas> 定義圖形。
<caption> 定義表格標(biāo)題。
<dd> 定義定義列表中項目的描述。
<div> 定義文檔中的節(jié)。
<dl> 定義定義列表。
<dt> 定義定義列表中的項目。
`<details> 定義元素的細(xì)節(jié)。
&lt;fieldset&gt; 定義圍繞表單中元素的邊框。
&lt;figcaption&gt; 定義 figure 元素的標(biāo)題。
&lt;figure&gt; 定義媒介內(nèi)容的分組,以及它們的標(biāo)題。
&lt;footer&gt; 定義 section 或 page 的頁腳。
&lt;form&gt; 定義供用戶輸入的 HTML 表單。
&lt;h2&gt; to &lt;h7&gt; 定義 HTML 標(biāo)題。
&lt;header&gt; 定義 section 或 page 的頁眉。
&lt;hr&gt; 定義水平線。
&lt;legend&gt; 定義 fieldset 元素的標(biāo)題。
&lt;li&gt; 定義列表的項目。
&lt;menu&gt; 定義命令的列表或菜單。
&lt;meter&gt; 定義預(yù)定義范圍內(nèi)的度量。
&lt;nav&gt; 定義導(dǎo)航鏈接。
&lt;noframes&gt; 定義針對不支持框架的用戶的替代內(nèi)容。
&lt;noscript&gt; 定義針對不支持客戶端腳本的用戶的替代內(nèi)容。
&lt;ol&gt; 定義有序列表。
&lt;output&gt; 定義輸出的一些類型。
&lt;p&gt; 定義段落。
&lt;pre&gt; 定義預(yù)格式文本。
&lt;section&gt; 定義 section。
&lt;table&gt; 定義表格。
&lt;tbody&gt; 定義表格中的主體內(nèi)容。
&lt;td&gt; 定義表格中的單元。
&lt;tfoot&gt; 定義表格中的表注內(nèi)容(腳注)。
&lt;th&gt; 定義表格中的表頭單元格。
&lt;thead&gt; 定義表格中的表頭內(nèi)容。
&lt;time&gt; 定義日期/時間。
&lt;tr&gt; 定義表格中的行。
&lt;ul&gt; 定義無序列表。

html中的行內(nèi)元素:


標(biāo)簽 描述
&lt;a&gt; 定義錨。
&lt;abbr&gt; 定義縮寫。
&lt;acronym&gt; 定義只取首字母的縮寫。
&lt;b&gt; 定義粗體字
&lt;bdo&gt; 定義文字方向。
&lt;big&gt; 定義大號文本。
&lt;br&gt; 定義簡單的折行。
&lt;button&gt; 定義按鈕 (push button)。
&lt;cite&gt; 定義引用(citation)。
&lt;code&gt; 定義計算機代碼文本。
&lt;command&gt; 定義命令按鈕。
&lt;dfn&gt; 定義定義項目。
&lt;del&gt; 定義被刪除文本。
&lt;em&gt; 定義強調(diào)文本。
&lt;embed&gt; 定義外部交互內(nèi)容或插件。
&lt;i&gt; 定義斜體字。
&lt;img&gt; 定義圖像。
&lt;input&gt; 定義輸入控件。
&lt;kbd&gt; 定義鍵盤文本。
&lt;label&gt; 定義 input 元素的標(biāo)注。
&lt;map&gt; 定義圖像映射。
&lt;mark&gt; 定義有記號的文本。
&lt;objec&gt; 定義內(nèi)嵌對象。
&lt;progress&gt; 定義任何類型的任務(wù)的進(jìn)度。
&lt;q&gt; 定義短的引用。
&lt;samp&gt; 定義計算機代碼樣本。
&lt;select&gt; 定義選擇列表(下拉列表)。
&lt;small&gt; 定義小號文本。
&lt;span&gt; 定義文檔中的節(jié)。
&lt;strong&gt; 定義強調(diào)文本。
&lt;sub&gt; 定義下標(biāo)文本。
&lt;sup&gt; 定義上標(biāo)文本。
&lt;textarea&gt; 定義多行的文本輸入控件。
&lt;time&gt; 定義日期/時間。
&lt;tt&gt; 定義打字機文本。
&lt;var&gt; 定義文本的變量部分。
&lt;video&gt; 定義視頻。
&lt;wbr&gt; 定義可能的換行符。

實例

我們書寫幾個span標(biāo)簽
探究行內(nèi)元素和塊級元素

可以看到幾個span都出現(xiàn)在了一行內(nèi)

我們再書寫幾個div標(biāo)簽
探究行內(nèi)元素和塊級元素

可以看到div已經(jīng)垂直了(不在一行內(nèi))
繼續(xù):我們給div添加一個剛才提到的特殊元素:行內(nèi)塊級元素inline-block
探究行內(nèi)元素和塊級元素

探究行內(nèi)元素和塊級元素
此時div會變成行內(nèi)塊級元素,同時寬和高也在
因此 inline-block既有行內(nèi)元素水平排列的特點,也有塊級元素設(shè)置寬高的特點

  • 仔細(xì)看上圖,會發(fā)現(xiàn)水平方向有一個bug,有一個間隔 空閑時間可以去百度下hack~
  • 解決辦法:
  • margin:-3pxposition:relitive;left:-3px;

關(guān)于行內(nèi)元素和塊級元素先談這么多,聽說認(rèn)真閱讀并點贊的你,代碼敲的最6哦~
有興趣的小伙伴可以加我微信,一起討論;V-x: dandanshen987

有一天,當(dāng)你明白"小白" +"勤奮"的時候,你就會成為大牛

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI