CSS知识点――可替换元素vs不可替换元素_html/css

从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。

替换元素：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如： type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样。(X)HTML中的、、、<select>、<object>都是替换元素，这些元素都没有实际的内容。<p>替换元素可增加行框高度，但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。<br />要想替换元素居中，可以设置line-height = height， vertral-align = middle。<br />（vertical-align:middle,是将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐。）<p>非替换元素：(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。<br />比如<p>p的内容</p>、<label>label的内容</label>；浏览器将把这段内容直接显示出来。<p>非替换元素添加padding-top或padding-bottom，不影响行框高度，但内容区高度会变化，margin-top，margin-bottom对行框没有任何影响。添加左右边距会影响非替换元素水平位置。要使非替换元素在父元素框内居中，可以设定line-height = 父元素框的高度。 </p><p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div> <div class="downbox clearfix"> <div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div> <div class="txt"> <h4>CSS知识点――可替换元素vs不可替换元素_html/css</h4> <div class="co">CSS知识点――可替换元素vs不可替换元素_html/css_WEB-ITnose:替换元素： 其中有类特殊的元素：如img，input，select，textarea，button，label等，他们被称为可替换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic d</div> <div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div> </div> <div class="btn"> <a href="javascript:;" class="html2word" data-model="article" data-id="adeasv" title="文档下载"> <b>点击下载本文</b> <span>文档为doc格式</span> </a> </div> </div> <script>keji_detail_ga('article_content_bottom');</script> <div class="tvideo_tag"> 标签： <a href="/tlist-47400/">it</a> <a href="/tlist-246007/">html</a> <a href="/tlist-284758/">cs</a> </div> <div class="tvideo_box tvideo_box_tab"> <div class="hd"> <ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul> </div> <div class="bd"> <ul class="ult_jpic clearfix"> <script>get_hot_jiaodian_content('wz_hot_jiaodian',33,'hot',1);</script> </ul> </div> </div> </div> <!--中间文章 end--> <!--右侧专题 star--> <div class="ult_zt"> <script>keji_detail_ga('article_right_top');</script> <div class="ult_ztbox"> <h4>最新推荐</h4> <ul class="tvideo_r_a clearfix"> <script>get_detail_right('wz_right_new',33,'')</script> </ul> </div> <script>keji_detail_ga('article_right_middle');</script> <div class="ult_ztbox"> <h4>猜你喜欢</h4> <ul class="telist_rb clearfix"> <script>get_detail_right('wz_right_love',33,'')</script> </ul> </div> <script>keji_detail_ga('article_right_new_bottom');</script> <div class="ult_ztbox"> <h4>热门推荐</h4> <ul class="tvideo_r_b clearfix"> <script>get_detail_right('wz_right_hot',33,'')</script> </ul> </div> <script>keji_detail_ga('article_right_bottom');</script> </div> <!--右侧专题 end--> <div style="display:none"><a href="https://www.51dongshi.net/wzztf/ad/adeasv/">专题</a> </div> </div> </div> <script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script> <script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script> <script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script> <style> #qrcode{padding: 15px;background: #fff;} </style> <div id="qrcode" style="display: none"></div> <script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfadeasv.html");</script> <iframe src="https://hits.51dongshi.net/?biao=ho_article&id=920937" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe> <script src="https://js.51dongshi.net/js/shHighlighter.js"></script> <link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css"> <script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script> <script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script> <div style="display:none"><script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <!--foot star--> <div class="footer"> <div class="m_box"> <div class="footer_in"> <a href="#" target="_blank">产品服务</a> <a href="#" target="_blank">发展历程</a> <a href="#" target="_blank">企业资讯</a> <a href="#" target="_blank">企业文化</a> <a href="#" target="_blank">关于我们</a> <a href="#" target="_blank">加入我们</a> <a href="#" target="_blank">联系我们</a> <a href="#" target="_blank">网站导航</a> <a href="#" target="_blank">网站律师</a> </div> <ul class="ftrlist"> <li> <a rel="nofollow" href="https://www.itrust.org.cn" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a> </li> <li> <a rel="nofollow" href="https://www.12377.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a> </li> <li> <a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a> </li> <li> <a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a> </li> <li class="last"> <a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank"> <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p> </a> </li> </ul> <div class="footer_co"> <a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo_bottom.png" alt="懂视"></a> <p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p> <p> <a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a> </p> <p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p> </div> </div> </div> <!--foot end--> <a href="#0" class="cd-top">Top</a> <script type="text/javascript"> $(function(){ var _line=parseInt($(window).height()/3); $(window).scroll(function(){ if ($(window).scrollTop()>100) { $('.edu_top').css({'position':'fixed','top':'0','z-index':'99'}) }else{ $('.edu_top').css({'position':'relative','top':'0'}) } }) }) </script> <script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script> </body> </html>