<!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>
