<style> ???????* { ???????????margin: 0; ???????????padding: 0; ???????????color:#fff; ???????????????????} ???????.parent { ???????????width: 1000px; ???????????height:800px; ???????????background: #aaa; ??????????????????} ??????????????a{ ???????????background:red; ???????} ???????span{ ?????????background:blue; ?????????width:300px; ???????????????????} ???????img{ ???????????vertical-align: middle; ???????} ???????input{ ???????????width:150px; ???????????height:30px; ???????????background:grey; ???????????border:1px solid #09f; ???????} ???????h2{ ???????????color:green; ???????} ???????.a{ ??????????????????} ????????</style></head><body> ???<div class="parent"> ?????????????????<h2>1:块级元素独占一行</h2> ???????<h2>2:块级元素可设width,height</h2> ???????<h2>3:块级元素可用margin/padding:left/right/top/bottom</h2> ???????<h3>h3 ??块级元素</h3> ???????<p>p ?块级元素</p> ?????????<ul> ???????????<li>ul li 块级元素</li> ???????????<li>ul li 块级元素</li> ???????</ul> ???????<ol> ???????????<li>ol li 块级元素</li> ???????????<li>ol li 块级元素</li> ???????</ol> ???????<dl> ???????????<dt>dl dt dd 块级元素</dt> ???????????<dd>dl dt dd 块级 元素</dd> ???????</dl> ???????????????<h2>1:行级元素不独一行，相互连接</h2> ???????<h2>2:行级元素不可设width,height</h2> ???????<h2>3:行级元素可用margin/padding:left/right。不可用margin/padding:top/bottom</h2> ???????<a href="">第一个a inline行级元素</a><a href="">第二个a inline行级元素</a> ???????<a href="" class="a">第三个a inline行级元素</a> ??<a href="" class="a">第四个a inline行级元素</a> ???????<input type="text" value="input inline行级元素"/> ???????<input type="text" value="input inline行级元素"/> ???????<h2>1:行级元素，行块级元素标签不紧凑连接中间有空格时会显示在网页上</h2> ???????<h2>2:解决方法：浮动行级，行块级元素 ???????<h2>1:行块级元素不独占一行，可相互连接</h2> ???????<h2>2:行块级可设width,height</h2> ???????<h2>3:行块级元素可rgin/padding:left/right/top/bottom</h2> ??????????????<span>span 行级元素</span><span>span 行级元素</span> ???????<img width="100px" height="50px" title="行块级元素" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1682403853,827686528&fm=173&s=4D280BD068B37C9E05A0D15A0300D0D3&w=640&h=418&img.JPEG"> ???????????????<img width="100px" height="50px" title="行块级元素" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1682403853,827686528&fm=173&s=4D280BD068B37C9E05A0D15A0300D0D3&w=640&h=418&img.JPEG"> ????????????????????????????????</div></body></html>
CSS ??display样式
原文地址：http://www.cnblogs.com/xingkongly/p/7531103.html