<!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入門 如何 區別行級元素 和 塊級元素
原文地址：https://www.cnblogs.com/bawang/p/9086533.html