首页 > 网页制作 > HTML/Xhtml

HTML行内元素与块级元素有哪些及区别详解游戏攻略

admin HTML/Xhtml 2022-02-04 21:54:00 HTML 行内元素块级元素"

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

HTML常见的行内元素有：

、、、、、<select>、<label></p> <p>还有包括一些文本元素如：<br> 、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。</p> <p>要是只回答<span>和<img>那就说不过去了吧。</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><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 class="brush:xhtml;"> <!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></pre> <p style="text-align: center"> <img alt="" src="https://www.iwyv.com/d/files/20220204/mlsmwclxjag.png" /></p> <p> 3.根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。</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>到此这篇关于HTML行内元素与块级元素有哪些及区别详解的文章就介绍到这了,更多相关HTML行内元素与块级元素内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！</p> <span id="art_bot" class="jbTestPos"></span> </div> <div class="pagebar"> </div> <div class="pcd_ad"><script src=/d/js/acmsd/thea14.js></script></div> <div class="mbd_ad"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5850285417076520" data-ad-slot="9825815134" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="rights"> <h5>版权声明</h5> <p>本文仅代表作者观点，不代表本站立场。<br> 本文系作者授权发表，未经许可，不得转载。<br>本文地址：/web/HTML/70367.html</p> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["fbook","twi","linkedin","qzone","tsina","douban","weixin","evernotecn"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?'];</script> </div> <div class="r-pn-post"> <div class="shang"><a title="HTML使用栅格布局实现六种筛子样式的代码详解游戏攻略" href="/web/HTML/70366.html" rel="bookmark" class="prev_p"><span>上一篇 :</span> HTML使用栅格布局实现六种筛子样式的代码详解游戏攻略 </a></div> <div class="xia"><a href="/web/HTML/70368.html" rel="bookmark" class="next_p"><span>下一篇 :</span> HTML页面插入SVG的多种方式游戏攻略</a></div> <div class="clear"></div> </div> </div> <div class="related"> <h4>相关文章</h4> <ul> <li> <a href="/jtjc/win10/126360.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201604/20160430120607303.jpg" alt="win2008下网站首页后面的index.html如何去掉?"></div> <p>win2008下网站首页后面的index.html如何去掉?</p> </a> </li><li> <a href="/Hardware/diannaochangshi/160867.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201406/2014060316175794.jpg" alt="文件格式 html版是什么？文件格式 html版解决方法"></div> <p>文件格式 html版是什么？文件格式 html版解决方法</p> </a> </li><li> <a href="/Hardware/diannaochangshi/160860.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201406/201406040928316.jpg" alt="使用百度搜索关键词列表显示文件格式HTML版怎么回事"></div> <p>使用百度搜索关键词列表显示文件格式HTML版怎么回事</p> </a> </li><li> <a href="/PMsheji/PS/157209.html"> <div class="img"><img src="https://img.jbzj.com/do/upimg/080906/1220A92202T401J95.gif" alt="Photoshop做简单的xhtml+css网页"></div> <p>Photoshop做简单的xhtml+css网页</p> </a> </li><li> <a href="/PMsheji/PS/156774.html"> <div class="img"><img src="https://img.jbzj.com/do/uploads/allimg/090916/1704530.jpg" alt="PhotoShop分割图片并通过Html组合显示"></div> <p>PhotoShop分割图片并通过Html组合显示</p> </a> </li><li> <a href="/websafe/yejie/149951.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/2015925104031825.jpg?2015825104041" alt="HTML5安全风险之CORS攻击详解"></div> <p>HTML5安全风险之CORS攻击详解</p> </a> </li><li> <a href="/websafe/yejie/149948.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/201592694628148.jpg?201582694643" alt="HTML5安全风险之Web Storage攻击详解"></div> <p>HTML5安全风险之Web Storage攻击详解</p> </a> </li><li> <a href="/websafe/yejie/149962.html"> <div class="img"><img src="https://img.jbzj.com/file_images/article/201509/201592695532854.jpg?201582695542" alt="HTML5安全风险之WebSQL攻击详解"></div> <p>HTML5安全风险之WebSQL攻击详解</p> </a> </li> </ul> </div> <div class="post_comments"> <div id="comment"> <link href="/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script> <form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!">

验证码：

看不清楚,点击刷新

热门文章

QR Code

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

桂ICP备2023010378号-4

桂公网备 45012202000125号

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持