HTML行内元素与块级元素有哪些及区别？

日期：2020-05-09 浏览：104 评论：0

核心提示：想起之前工作面试时，面试官问的一个问题：行内元素有哪些，和块级元素有什么区别？这是一道蛮基础的面试题，但是很多初学者平时只注重标签语义，忽视了标签行内和块级的特性，因此对于上述问题很有可能答不上来或者答不全。HTML常见的行内元素有：、、、、

、<select...面试</div><div id="content"><div class="content" id="article"><p>想起之前工作面试时，面试官问的一个问题：行内元素有哪些，和块级元素有什么区别？这是一道蛮基础的面试题，但是很多初学者平时只注重标签语义，忽视了标签行内和块级的特性， 因此对于上述问题很有可能答不上来或者答不全。</p> 
<p><strong>HTML常见的行内元素有</strong>：</p> 
<p><span>、<a>、 <img>、 <input>、<textarea>、<select>、<label></p> 
<p>还有包括一些文本元素如：<br>  、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。</p> 
<p>要是只回答<span>和<img>那就说不过去了吧。</p> 
<p> </p> 
<p><strong>HTML常见的块级元素有</strong>： </p> 
<p><div>、<table>、<form>、<p>、<ul>、</p> 
<p><h1>......<h6>、<hr>  、<pre>、<address>、<center>、<marquee> 、<blockquote>  等。</p> 
<p>要是只回答<div>那就说不过去了吧。</p> 
<p> </p> 
<p><strong>那它们之间的区别是什么呢？</strong></p> 
<p>·块级元素</p> 
<p>  1.总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；</p> 
<p>  2.高度、宽度、margin及padding都是可控的，设置有效，有边距效果；</p> 
<p>  3.宽度没有设置时，默认为100%；</p> 
<p>  4.块级元素中可以包含块级元素和行内元素。</p> 
<p>·行内元素</p> 
<p>  1.和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；</p> 
<p>  2.高度、宽度是不可控的，设置无效，由内容决定。</p> 
<p>设置margin左右有效，有边距效果；</p> 
<p>设置margin上下会撑大空间但是不会产生边距效果（即盒模型margin-top/bottom有值，但页面上没有边距效果）。</p> 
<p>设置padding左右有效，设置padding上下会撑大空间但是不会产生边距效果（同上）。</p> 
<p>padding效果如下展示：</p> 
<pre>
<code><!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
   </head>
	<style>
		span{
			border:1px solid red;
			padding:10px;
		}
		div{
			border:1px solid blue;
		}
	</style>
   <body>
	   <div>块级元素</div>
	   <span> 行内元素</span>
	   <span> 行内元素</span>
	   <div>块级元素</div>
   </body>
</html> </code></pre> 
<p> <img src="/file/upload/2020/5/zYriey.png" class="aligncenter"></p> 
<p>  3.根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。</p> 
<p> </p> 
<p><strong>转换</strong> </p> 
<p>当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。</p> 
<p>使用display属性能够将三者任意转换：</p> 
<p>       (1)display:inline;转换为行内元素；</p> 
<p>　　(2)display:block;转换为块状元素；</p> 
<p>　　(3)display:inline-block;转换为行内块状元素。</p> 
<p><strong>行内块状元素综合了行内元素和块状元素的特性：</strong></p> 
<p>(1)不自动换行，与其他行内元素都会在一条水平线上排列；</p> 
<p>(2)高度、宽度、margin及padding都是可控的，设置有效，有边距效果；</p> 
<p>(3)默认排列方式为从左到右。</p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p></div>
</div>
<div class="b20 c_b"> </div>
<div class="award"><div onclick="Go('https://www.youqizhuangbei.com/member/award.php?mid=21&itemid=13972');">打赏</div></div>        <div class="b20"> </div>
           本文转载自：网络 <div class="b20"> 所有权利归属于原作者，如文章来源标示错误或侵犯了您的权利请联系微信13520258486 </div>
         
      
         <div class="b20"> </div>
<div class="head-txt"><span><a href="https://www.youqizhuangbei.com/news/wulianwangwenzhang-c111-1.html">更多<i>></i></a></span><strong>最近资讯中心</strong></div>
<div class="related">
        <table width="100%">
<tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-13971.html" title="CSS3选择器 | 每个前端开发者必须要掌握的技术">• CSS3选择器 | 每个前端开发者必须要掌握的技术</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-13970.html" title="【IDEA+SpringBoot+Java商城秒杀实战18】页面优化技术-商品详情页面静态化（前后端分离）">• 【IDEA+SpringBoot+Java商城秒杀实战18】页面优</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-13969.html" title="图片懒加载处理，了解一下？">• 图片懒加载处理，了解一下？</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-13966.html" title="C++ Primer Plus 复习之路（5）-- 智能指针">• C++ Primer Plus 复习之路（5）-- 智能指针</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-13964.html" title="于池子银行流水泄露后小记">• 于池子银行流水泄露后小记</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-13963.html" title="区块链毕业搭建简易区块链实现">• 区块链毕业搭建简易区块链实现</a></td>
</tr></table>
        <table width="100%">
<tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35506.html" title="Esp8266天猫精灵_RGB灯_非点灯平台">• Esp8266天猫精灵_RGB灯_非点灯平台</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35505.html" title="STM32F103 串口1和串口3对发数据 配合蓝牙模块 实现手机和单片机的简单通信demo">• STM32F103 串口1和串口3对发数据 配合蓝牙模块 </a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35504.html" title="TMS570学习【1】了解什么是TMS570">• TMS570学习【1】了解什么是TMS570</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35503.html" title="新闻稿 | Qt公司收购froglogic公司以巩固市场领导者地位">• 新闻稿 | Qt公司收购froglogic公司以巩固市场领</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35502.html" title="[Java]SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(二)">• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35501.html" title="苹果群控投屏同步操作原理及运用的平台APP分享">• 苹果群控投屏同步操作原理及运用的平台APP分享</a></td>
</tr></table>
        </div>        
        <div class="b20"> </div>
<div class="head-txt"><span><a href="https://www.youqizhuangbei.com/news/wulianwangwenzhang-c111-1.html">更多<i>></i></a></span><strong>最新资讯中心</strong></div>
<div class="related"><table width="100%">
<tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35506.html" title="Esp8266天猫精灵_RGB灯_非点灯平台">• Esp8266天猫精灵_RGB灯_非点灯平台</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35505.html" title="STM32F103 串口1和串口3对发数据 配合蓝牙模块 实现手机和单片机的简单通信demo">• STM32F103 串口1和串口3对发数据 配合蓝牙模块 </a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35504.html" title="TMS570学习【1】了解什么是TMS570">• TMS570学习【1】了解什么是TMS570</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35503.html" title="新闻稿 | Qt公司收购froglogic公司以巩固市场领导者地位">• 新闻稿 | Qt公司收购froglogic公司以巩固市场领</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35502.html" title="[Java]SpringBoot2整合mqtt服务器EMQ实现消息订阅发布入库(二)">• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35501.html" title="苹果群控投屏同步操作原理及运用的平台APP分享">• 苹果群控投屏同步操作原理及运用的平台APP分享</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35500.html" title="STM32查询式按键输入[直接用寄存器]">• STM32查询式按键输入[直接用寄存器]</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35499.html" title="Ubuntu系统 USB设备端口绑定">• Ubuntu系统 USB设备端口绑定</a></td>
</tr><tr><td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35498.html" title="2021-04-14 第四次 按键输入实验">• 2021-04-14 第四次 按键输入实验</a></td>
<td width="50%"><a href="https://www.youqizhuangbei.com/news/show-35497.html" title="Flutter扫码功能完美实现">• Flutter扫码功能完美实现</a></td>
</tr></table>
</div>
         <div class="b20"> </div>
<div id="comment_div" style="display:;">
<div class="head-txt"><span><a href="https://www.youqizhuangbei.com/comment/index-htm-mid-21-itemid-13972.html"><b id="comment_count" class="px16 f_red">0</b> 条</a></span><strong>相关评论</strong></div>
<div class="c_b" id="comment_main"><div></div></div>
</div>
<script type="text/javascript" src="https://www.youqizhuangbei.com/file/script/comment.js"></script>
<br/>
</div>
<div class="m3r">

<div class="head-sub"><strong>推荐图文</strong></div>
<div class="list-thumb"><table width="100%">
</table>
</div>
<div class="head-sub mt20"><strong>推荐资讯中心</strong></div>
<div class="list-txt"><ul>
</ul>
</div>
<div class="head-sub mt20"><strong>点击排行</strong></div>
<div class="list-rank"><ul>
</ul></div>

<div class="head-sub mt20"><strong>最新信息</strong></div>
<div class="list-rank"><ul>
<li><em>1</em><a href="https://www.youqizhuangbei.com/sell/show-3.html" title="北京傲云欣欣科技公司专业提供中高压变频器维修电气设备维修">北京傲云欣欣科技公司专业提供中高压变频器维修</a></li>
<li><em>2</em><a href="https://www.youqizhuangbei.com/sell/show-70.html" title="太原德力西高压变频器维修">太原德力西高压变频器维修</a></li>
<li><em>3</em><a href="https://www.youqizhuangbei.com/sell/show-56.html" title="AMB安邦信高压变频器维修中降低设备故障频次的方法">AMB安邦信高压变频器维修中降低设备故障频次的</a></li>
<li><i>4</i><a href="https://www.youqizhuangbei.com/sell/show-51.html" title="石家庄高压变频器维修请找北京傲云电气">石家庄高压变频器维修请找北京傲云电气</a></li>
<li><i>5</i><a href="https://www.youqizhuangbei.com/sell/show-21.html" title="AMB安邦信高压变频器维修">AMB安邦信高压变频器维修</a></li>
<li><i>6</i><a href="https://www.youqizhuangbei.com/sell/show-65.html" title="Samcovm三垦高压变频器维修中一些小技巧">Samcovm三垦高压变频器维修中一些小技巧</a></li>
<li><i>7</i><a href="https://www.youqizhuangbei.com/sell/show-64.html" title="ABB传动ACS6000/ACS800维修中的故障分析方法">ABB传动ACS6000/ACS800维修中的故障分析方法</a></li>
<li><i>8</i><a href="https://www.youqizhuangbei.com/sell/show-67.html" title="包头石家庄ABB高压变频器维修">包头石家庄ABB高压变频器维修</a></li>
<li><i>9</i><a href="https://www.youqizhuangbei.com/sell/show-45.html" title="攀枝花陕西西门子罗宾康高压变频器维修厂家">攀枝花陕西西门子罗宾康高压变频器维修厂家</a></li>
</ul></div>
        </div>
  
</div>
<div class="c_b"></div>
</div>
<script type="text/javascript" src="https://www.youqizhuangbei.com/file/script/content.js"></script><div class="clear">
</div>
<div class="other_item">
<div class="copyrightbar">
  <div class="wrapper">
<dl class="fore1">
<dt>新手指南</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member/register.php">注册新用户</a></div>
<div><a rel="nofollow" target="_blank" href="">操作指南</a></div>
<div><a rel="nofollow" target="_blank" href="">常见问题</a></div>
</dd>
</dl>
<dl class="fore2">
<dt>采购商服务</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/sell/">找产品</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/company/">找公司</a></div>
<div><a rel="nofollow" target="_blank" href="">找采购</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/news/">看资讯</a></div>
</dd>
</dl>
<dl class="fore3">
<dt>供应商服务</dt>
<dd>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//home.php">企业商铺</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//grade.php">VIP服务</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/member//validate.php">认证服务</a></div>
<div><a rel="nofollow" target="_blank" href="https://www.youqizhuangbei.com/spread/">推广服务</a></div>
</dd>
</dl>
<dl class="fore4">
<dt>交易安全</dt>
<dd>
<div><a target="_blank" href="">买家防骗</a></div>
<div><a target="_blank" href="">卖家防骗</a></div>
<div><a rel="nofollow" href="javascript:SendReport();">投诉举报</a></div>
</dd>
</dl>
<dl class="fore5">
<dt>关注我们</dt>
<dd>
<div>手机网站: <a target="_blank" href="https://www.youqizhuangbei.com/mobile/mobile.php"></a></div>
<div>新浪微博: <a target="_blank" href="http://" rel="nofollow"></a></div>
<div>微信关注: </div>
<div style="margin-top: 5px;">
<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=5fd78221597e88a4af3e2c8512a61d5f1f8dc535171ea7773562452f9042dafd"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="" title=""></a>
</div>
</dd>
</dl>
<div class="hotline">
        <p class="phone">13520258486</p>
<p><span class="serviceTime-normal" style="">周一至周五 9:00-18:00</span>
<br>（其他时间联系在线客服）</p>
<a rel="nofollow" class="btn-line-primary" href="https://www.youqizhuangbei.com/about/contact.html" target="_blank">24小时在线客服</a>
</div>
<span class="clear"></span>
  </div>
  <div class="wrapper mt20" id="other_item">
<div id="footer">
<div class="links" style="font-size: 14px;margin-bottom: 10px;">
产品按字母分类：
 <span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=a" target="_blank">a</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=b" target="_blank">b</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=c" target="_blank">c</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=d" target="_blank">d</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=e" target="_blank">e</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=f" target="_blank">f</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=g" target="_blank">g</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=h" target="_blank">h</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=i" target="_blank">i</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=j" target="_blank">j</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=k" target="_blank">k</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=l" target="_blank">l</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=m" target="_blank">m</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=n" target="_blank">n</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=o" target="_blank">o</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=p" target="_blank">p</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=q" target="_blank">q</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=r" target="_blank">r</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=s" target="_blank">s</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=t" target="_blank">t</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=u" target="_blank">u</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=v" target="_blank">v</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=w" target="_blank">w</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=x" target="_blank">x</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=y" target="_blank">y</a></span><span style="color: #666;"><a href="https://www.youqizhuangbei.com/sitemap/index.php?mid=5&letter=z" target="_blank">z</a></span> 
  </div>
 <div class="links">
  <a href="https://www.youqizhuangbei.com/about/index.html">关于我们</a> | 
<a href="https://www.youqizhuangbei.com/about/contact.html">联系方式</a> | 
<a href="https://www.youqizhuangbei.com/about/agreement.html">使用协议</a> | 
<a href="https://www.youqizhuangbei.com/about/copyright.html">版权隐私</a> | 
 
<a href="https://www.youqizhuangbei.com/sitemap/">网站地图</a>
 | <a href="https://www.youqizhuangbei.com/spread/">排名推广</a> 
 | <a href="https://www.youqizhuangbei.com/ad/">广告服务</a> | <a href="https://www.youqizhuangbei.com/gift/" target="_blank" rel="nofollow">积分商城</a> | <a href="javascript:SendReport();" rel="nofollow">违规举报</a> </div>
<div class="copyright">
<div id="copyright">(c)2008-2023 湖北傲云电气有限公司 All Rights Reserved<script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?20195b23529f03df5cb2789a744df859";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div>
<div><a href="http://www.miibeian.gov.cn" target="_blank" rel="nofollow">鄂ICP备2020021666号-11</a></div></div>
<div class="authentication">
<div class="authentication_bg">
<a rel="nofollow" target="_blank" class="cert-1" href="#" title="网络警察"></a>
<a rel="nofollow" target="_blank" class="cert-2" href="#" title="网警备案"></a>
<a rel="nofollow" target="_blank" class="cert-3" href="#" title="网络工商"></a>
<a rel="nofollow" target="_blank" class="cert-4" href="#" title="浙江省网站信用联盟"></a>
<a rel="nofollow" target="_blank" class="cert-5" href="#" title="可信网站"></a>
<a rel="nofollow" target="_blank" class="cert-6" href="/" title="违法和不良信息举报中心"></a>
<a rel="nofollow" target="_blank" class="cert-7" href="/" title="违法和不良信息举报中心APP下载"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="feedBackWidget">
<div class="ronline"><a href="//wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes" target="_blank" title=""></a></div>
<div class="rweixin"><a href="javascript:Dqrcode();"></a></div>
<div class="feedback"><a href="javascript:SendReport();"></a></div>
<div class="back2top" style="display: none;"><a href="javascript:void(0);" title="返回顶部"> </a></div>
</div><script type="text/javascript">
//全站悬浮右侧
$('.guess').scrollToFixed({
marginTop: $('.small-goods').outerHeight(true) - 345,
limit: function() {
var limit = $('.other_item').offset().top ;
return limit;
},
minWidth: 1000,
zIndex: 999,
fixed: function() {  },
dontCheckForPositionFixedSupport: true
});
//右侧到位自动隐藏
function changeScreen() {
var itemTop = document.getElementById("other_item").offsetTop;
if ($(document).scrollTop() > itemTop - 600) {
$(".guess").hide();
} else if ($(window).width() < 1200) {
$(".guess").hide();
} else {
$(".guess").show();
}
}
$(window).scroll(function() {
changeScreen();
});
$(window).resize(function(e) {
changeScreen();
});
</script>
<script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/myjs.js"></script>
<script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/topso.js"></script>
<script type="text/javascript" src="https://www.youqizhuangbei.com/skin/st03lanskin/js/scrolltofixed.js"></script>
<script type="text/javascript">
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d7f1c93b824c5ee2887566c40d0984af";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>