html入門 如何 區別行級元素 和 塊級元素
阿新 • • 發佈：2018-05-25
src gin type head 一行 utf-8 p s html asd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>塊級元素和行級元素區分對比</title>
</head>
<body>
<!--
作者：offline
時間：2018-05-07
描述：最重要的區別->塊級元素獨占一行 行級元素在同一行(空間足夠的情況下)
用途:例如我們分別需要在<img>上下左右分別設置文字圍繞 理解了塊級元素,行級元素就非常容易了
-->
<!--
作者：offline
時間：2018-05-07
描述：<a> <lable> <span>等行級元素 設置{style=“width:100px;height:100px”}這種樣式是無效的
少數比較特別的行級元素（input img）直接設置{style=“width:100px;height:100px”}有效
行級元素需要變成 塊級元素{display:block 或者 display:inline-block} 設置
{style=“width:100px;height:100px”}才有效
最好的解決方案：行級元素設置width height無效 加上 {display:block 或者 display:inline-block}
就有效了
-->
<!--
作者：offline
時間：2018-05-07
描述：通過width測試樣式是否有效 不管該標簽有沒有width等類似屬性 建議都通過style設置樣式
如果需要行級元素 衹需要將塊級元素 {display:inline;或者 display:inline-block}
如果需要的塊級元素 將塊級元素{display:block} 塊級元素變成塊級元素
-->
<div style="background-color:lightgrey;width:200px;" width="100px">33</div>
<!--
作者：offline
時間：2018-05-07
描述：第二個width(寫在style外面的)無效 原因是div沒有width屬性 第一個width通過style有效 雖然div
長度只有200px 但是還是獨占一行 ->塊級元素 長度設置並不影響獨占一行
-->
<div style="100px">444</div>
<!--
作者：offline
時間：2018-05-07
描述：塊級元素兩個相同元素寫在一起會在兩行 一個元素占一行
這個div標簽和上面一個div標簽在各在一行
-->
<input type="text" width="500px"/>
<!--
作者：offline
時間：2018-05-07
描述：行級元素兩個相同元素寫在一起會在一行(行空間足夠的情況下) width屬性無效 input是行級元素
直接通過width無效 需要通過style樣式才有用
-->
<input type="text" style="width:300px"/>
<!--
作者：offline
時間：2018-05-07
描述：在style裏面設置width設置有效
這個input標簽和上面一個input標簽在同一行
-->
<p style="width:200px;background-color:lightgrey" >333</p>
<!--
作者：offline
時間：2018-05-07
描述：塊級元素兩個相同元素寫在一起會在兩行 一個元素占一行
p標簽默認有margin->外邊距 所以p標簽間隙都比較大 因此默認樣式下這個p標簽和下面p標簽間隔比較大
-->
<p width="700px">222</p>
<!--
作者：offline
時間：2018-05-07
描述：這個p標簽的width屬性設置無效 p沒有這個屬性 需要通過style樣式設置width
這個p標簽和上面一個p標簽在各在一行
-->
<lable>555</lable>
<!--
作者：offline
時間：2018-05-07
描述：
-->
<lable>333</lable>
<!--
作者：offline
時間：2018-05-07
描述：行級元素
這個lable標簽和上面一個lable標簽在同一行
-->
<button>7777</button>
<!--
作者：offline
時間：2018-05-07
描述：行級元素 inline-block(形式的 Firefox盒子模式顯示)
-->
<button>666</button>
<!--
作者：offline
時間：2018-05-07
描述：行級元素
這個button標簽和上面一個button標簽在同一行
-->
<h5>444</h5>
<!--
作者：offline
時間：2018-05-07
描述：塊級元素
-->
<h5>333</h5>
<!--
作者：offline
時間：2018-05-07
描述：塊級元素兩個相同元素寫在一起會在兩行 一個元素占一行
h(1,2,3...)標簽默認有margin->外邊距 所以h(1,2,3...)標簽間隙都比較大
因此默認樣式下這個h(1,2,3...)標簽和上面h(1,2,3...)標簽間隔比較大
-->
<a>7777</a>
<!--
作者：offline
時間：2018-05-07
描述：
-->
<a>2222</a>
<!--
作者：offline
時間：2018-05-07
描述：行級元素
這個a標簽和上面一個a標簽在同一行
-->
<span>4444</span>
<!--
作者：offline
時間：2018-05-07
描述：行級元素
-->
<span>3333</span>
<!--
作者：offline
時間：2018-05-07
描述：行級元素
這個span標簽和上面一個span標簽在同一行
-->
<img alt="img1111" src="file:///C:/Users/asdf/Desktop/1.png" style="width:300px">
<!--
作者：offline
時間：2018-05-07
描述：竟然是行級元素
-->
<img alt="img2222" src="file:///C:/Users/asdf/Desktop/1.png">
<!--
作者：offline
時間：2018-05-07
描述：行級元素
這個img標簽和上面一個img標簽在同一行 (行空間足夠的情況下)
-->
<ul>
<!--
作者：offline
時間：2018-05-07
描述：塊級元素
-->
<li height="200px">qqqq</li>
<!--
作者：offline
時間：2018-05-07
描述：list-item元素 。。。。。跟塊級元素好像沒什麼不一樣 也認爲是塊級元素吧
直接設置height屬性無效
-->
<li style="width:200px;background-color:lightblue；height:100px">wwww</li>
<!--
作者：offline
時間：2018-05-07
描述：塊級元素 通過style樣式設置有效
這個li標簽和上面一個li標簽在各在一行
-->
</ul>
<ul>
<!--
作者：offline
時間：2018-05-07
描述：塊級元素
這個ul標簽和上面一個ul標簽在各在一行
-->
<li>eee</li>
<li>rrrr</li>
</ul>
<!--
作者：offline
時間：2018-05-07
描述：其它標簽用類似方法測試是行級元素還是塊級元素
-->
</body>
</html>
html入門 如何 區別行級元素 和 塊級元素