您好,登錄后才能下訂單哦!
在html
中元素主要分為行內(nèi)元素和塊級元素
行內(nèi)元素
塊級元素
還有一種特殊的元素叫作行內(nèi)塊級元素;
值 | 描述 |
---|---|
none | 此元素不會被顯示。 |
block | 此元素將顯示為塊級元素,此元素前后會帶有換行符。 |
inline | 默認(rèn)。此元素會被顯示為內(nèi)聯(lián)元素,元素前后沒有換行符。 |
inline-block | 行內(nèi)塊元素。(CSS2.1 新增的值) |
list-item | 此元素會作為列表顯示。 |
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é)。 | |
<fieldset> |
定義圍繞表單中元素的邊框。 |
<figcaption> |
定義 figure 元素的標(biāo)題。 |
<figure> |
定義媒介內(nèi)容的分組,以及它們的標(biāo)題。 |
<footer> |
定義 section 或 page 的頁腳。 |
<form> |
定義供用戶輸入的 HTML 表單。 |
<h2> to <h7> |
定義 HTML 標(biāo)題。 |
<header> |
定義 section 或 page 的頁眉。 |
<hr> |
定義水平線。 |
<legend> |
定義 fieldset 元素的標(biāo)題。 |
<li> |
定義列表的項目。 |
<menu> |
定義命令的列表或菜單。 |
<meter> |
定義預(yù)定義范圍內(nèi)的度量。 |
<nav> |
定義導(dǎo)航鏈接。 |
<noframes> |
定義針對不支持框架的用戶的替代內(nèi)容。 |
<noscript> |
定義針對不支持客戶端腳本的用戶的替代內(nèi)容。 |
<ol> |
定義有序列表。 |
<output> |
定義輸出的一些類型。 |
<p> |
定義段落。 |
<pre> |
定義預(yù)格式文本。 |
<section> |
定義 section。 |
<table> |
定義表格。 |
<tbody> |
定義表格中的主體內(nèi)容。 |
<td> |
定義表格中的單元。 |
<tfoot> |
定義表格中的表注內(nèi)容(腳注)。 |
<th> |
定義表格中的表頭單元格。 |
<thead> |
定義表格中的表頭內(nèi)容。 |
<time> |
定義日期/時間。 |
<tr> |
定義表格中的行。 |
<ul> |
定義無序列表。 |
html中的行內(nèi)元素:
標(biāo)簽 | 描述 |
---|---|
<a> |
定義錨。 |
<abbr> |
定義縮寫。 |
<acronym> |
定義只取首字母的縮寫。 |
<b> |
定義粗體字 |
<bdo> |
定義文字方向。 |
<big> |
定義大號文本。 |
<br> |
定義簡單的折行。 |
<button> |
定義按鈕 (push button)。 |
<cite> |
定義引用(citation)。 |
<code> |
定義計算機代碼文本。 |
<command> |
定義命令按鈕。 |
<dfn> |
定義定義項目。 |
<del> |
定義被刪除文本。 |
<em> |
定義強調(diào)文本。 |
<embed> |
定義外部交互內(nèi)容或插件。 |
<i> |
定義斜體字。 |
<img> |
定義圖像。 |
<input> |
定義輸入控件。 |
<kbd> |
定義鍵盤文本。 |
<label> |
定義 input 元素的標(biāo)注。 |
<map> |
定義圖像映射。 |
<mark> |
定義有記號的文本。 |
<objec> |
定義內(nèi)嵌對象。 |
<progress> |
定義任何類型的任務(wù)的進(jìn)度。 |
<q> |
定義短的引用。 |
<samp> |
定義計算機代碼樣本。 |
<select> |
定義選擇列表(下拉列表)。 |
<small> |
定義小號文本。 |
<span> |
定義文檔中的節(jié)。 |
<strong> |
定義強調(diào)文本。 |
<sub> |
定義下標(biāo)文本。 |
<sup> |
定義上標(biāo)文本。 |
<textarea> |
定義多行的文本輸入控件。 |
<time> |
定義日期/時間。 |
<tt> |
定義打字機文本。 |
<var> |
定義文本的變量部分。 |
<video> |
定義視頻。 |
<wbr> |
定義可能的換行符。 |
實例
我們書寫幾個span
標(biāo)簽
可以看到幾個span都出現(xiàn)在了一行內(nèi)
我們再書寫幾個div
標(biāo)簽
可以看到div已經(jīng)垂直了(不在一行內(nèi))
繼續(xù):我們給div
添加一個剛才提到的特殊元素:行內(nèi)塊級元素inline-block
此時div
會變成行內(nèi)塊級元素,同時寬和高也在
因此 inline-block
既有行內(nèi)元素水平排列的特點,也有塊級元素設(shè)置寬高的特點
margin:-3px
②position:relitive;left:-3px;
關(guān)于行內(nèi)元素和塊級元素先談這么多,聽說認(rèn)真閱讀并點贊的你,代碼敲的最6哦~
有興趣的小伙伴可以加我微信,一起討論;V-x: dandanshen987
免責(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)容。