html標簽元素有:1、標簽獨占一行,可指定寬、高的塊狀標簽;2、標簽在一行內,寬度與高度由內容決定,只有在內容超過HTML的寬度時,才會換行的行內標簽;3、同時具備內聯元素、塊狀元素特點的行內塊狀標簽。
本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
HTML標簽的類型可分為三種:塊級標簽,行內標簽,內聯塊狀標簽。
塊級標簽:
塊狀標簽:標簽獨占一行,可指定寬、高。
特性:
-
能夠識別寬高
-
margin和padding的上下左右均對其有效
-
可以自動換行
-
多個塊狀元素標簽寫在一起,默認排列方式為從上至下
-
可以使用margin:0 auto居中對齊
常用的塊狀元素有:
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
內聯標簽:
內聯(行級)標簽:標簽在一行內,寬度與高度由內容決定,只有在內容超過HTML的寬度時,才會換行。
特性:
-
無法設置寬高
-
margin上下無效,只有左右有效果,padding都有效果,會撐大空間;box-sizing:border-box;無效,因為該屬性針對盒模型。
-
不會自動換行
常用的內聯元素有:
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
內聯塊狀標簽:
內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,代碼display:inline-block就是將元素設置為內聯塊狀元素。(css2.1新增),<img>、<input>標簽就是這種內聯塊狀標簽。
特性:
-
不會自動換行
-
能夠設置寬高
-
默認排列方式為從左到右
-
可以使用text-align:center使內容相對于父盒子水平居中對齊,例如img標簽,可以使用text-align:center,相對父盒子居中對齊、margin:0 auto無效
-
水平排列,但所有元素默認會有1個空格的間隙,因為元素之間在html中書寫有回車換行,瀏覽器解析會將其解析成一個空格。
常用的內聯塊狀元素有:
<img>、<input>
HTML標簽類型是可以轉換的:
-
display:inline;轉換為行內元素
-
display:linline-block;轉換為行內塊元素
-
display:block;轉換為塊級元素
推薦學習:html視頻教程