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