css--打印

CSS:替换元素(Replaced)、不可替换元素(Nonreplaced)、块元素(Block-level)和行内/内联元素(Inline)

从元素本身的特点来讲，可以分为替换和不可替换元素。 a) 替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的、、、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素。浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。 b) 不可替换元素 </p><p>(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如： </p><p><p>段落的内容</p> </p><p>段落<p>是一个不可替换元素，文字“段落的内容”全被显示。 </p><p>除了可替换元素和不可替换元素的分类方式外，CSS 2.1中元素还有另外的分类方式：块级元素（block-level）和行内元素（inline-level，也译作“内联”元素）。 a) 块级元素 </p><p>在视觉上被格式化为块的元素，最明显的特征就是它默认在横向充满其父元素的内容区域，而且在其左右两边没有其他元素，即块级元素默认是独占一行的。 典型的块级元素有：<div>、<p>、<h1>到<h6>，等等。 </p><p>通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。 </p><p>但是浮动元素比较特殊，由于浮动，其旁边可能会有其他元素的存在。而“list-item”（列表项<li>），会在其前面生成圆点符号，或者数字序号。 b) 行内元素 </p><p>行内元素不形成新内容块，即在其左右可以有其他元素，例如<a>、<span>、<strong>等，都是典型的行内级元素。 </p><p>display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素，例如<img>、<input>等等。 </p><p>不过元素的类型也不是固定的，通过设定CSS 的display属性，可以使行内元素变为块级元素，也可以让块级元素变为行内元素。 </p><p>block元素的特点： 总是在新行上开始； </p><p>高度，行高以及顶和底边距都可控制； </p><p>宽度缺省是它的容器的100%，除非设定一个宽度。 </p><p>inline元素的特点：2css.com] </p><p>和其他元素都在一行上； </p><p>高，行高及顶和底边距不可改变； </p><p>宽度就是它的文字或图片的宽度，不可改变。 </p><p>我们来详细了解它们的情况。 </p><p>块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P\。“form\这个块元素比较特殊，它只能用来容纳其他块元素。 </p><p>如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种。 </p><p>内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。 </p><p>需要说明的是：inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译。 另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。 </p><p>用display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？ </p><p>让一个inline元素从新行开始； </p><p>让块元素和其他元素保持在一行上； </p><p>控制inline元素的宽度（对导航条特别有用）； 控制inline元素的高度； </p><p>无须设定宽度即可为一个块元素设定与文字同宽的背景色。 </p><p>块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上 display:block这样的属性，让他也有每次都从新行开始的属性。 </p><p>display:inline-block的元素特点： </p><p>将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性) </p><p>并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。 </p><p> </p><p>IE下块元素如何实现display:inline-block的效果？ 有两种方法： </p><p>1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）： div {display:inline-block;...} div {display:inline;} </p><p>2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下： div {display:inline; zoom:1;...} </p><p>可变元素是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。 </p><p>html标签的block、inline分类明细： 块元素(block element) ◎ address - 地址 </p><p>◎ blockquote - 块引用 ◎ center - 举中对齐块 ◎ dir - 目录列表 </p><p>◎ div - 常用块级容易，也是css layout的主要标签 ◎ dl - 定义列表 </p><p>◎ fieldset - form控制组 ◎ form - 交互表单 ◎ h1 - 大标题 ◎ h2 - 副标题 ◎ h3 - 3级标题 ◎ h4 - 4级标题 ◎ h5 - 5级标题 ◎ h6 - 6级标题 ◎ hr - 水平分隔线 ◎ isindex - input prompt ◎ menu - 菜单列表 </p><p>◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 ◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） ◎ ol - 排序表单 ◎ p - 段落 </p><p>◎ pre - 格式化文本 ◎ table - 表格 ◎ ul - 非排序列表 </p><p> </p><p>内联元素(inline element) ◎ a - 锚点◎ abbr - 缩写 ◎ acronym - 首字 ◎ b - 粗体(不推荐) ◎ bdo - bidi override ◎ big - 大字体 ◎ br - 换行 ◎ cite - 引用 </p><p>◎ code - 计算机代码(在引用源码的时候需要) ◎ dfn - 定义字段 ◎ em - 强调 </p><p>◎ font - 字体设定(不推荐) ◎ i - 斜体 ◎ img - 图片 ◎ input - 输入框 </p><p>◎ kbd - 定义键盘文本 ◎ label - 表格标签 ◎ q - 短引用 </p><p>◎ s - 中划线(不推荐) </p><p>◎ samp - 定义范例计算机代码 ◎ select - 项目选择 ◎ small - 小字体文本 </p><p>◎ span - 常用内联容器，定义文本内区块 ◎ strike - 中划线 ◎ strong - 粗体强调 ◎ sub - 下标 ◎ sup - 上标 </p><p>◎ textarea - 多行文本输入框 ◎ tt - 电传文本 ◎ u - 下划线 ◎ var - 定义变量 </p><p>可变元素 </p><p>可变元素为根据上下文语境决定该元素为块元素或者内联元素。 ◎ applet - java applet ◎ button - 按钮 ◎ del - 删除文本 ◎ iframe - inline frame ◎ ins - 插入的文本 ◎ map - 图片区块(map) ◎ object - object对象 ◎ script - 客户端脚本 </p><p></p><div class="page"><ul><li><a href=ythd_4q3799cd5u0088t3wpu9_1.html class="hover" >1</a></li><li><a href=ythd_4q3799cd5u0088t3wpu9_2.html>2</a></li><li><a href=ythd_4q3799cd5u0088t3wpu9_3.html>3</a></li><li><a href=ythd_4q3799cd5u0088t3wpu9_4.html>4</a></li><li><a title=下一页 href=ythd_4q3799cd5u0088t3wpu9_2.html>>></a></li><li><a href=ythd_4q3799cd5u0088t3wpu9_6.html>6</a></li></ul></div> <br /> <p><script type="text/javascript">s("content-m-bot");</script></p> </div> <div class="m-pages"></div> <div class="down-word"> <div class="word-ico"></div> <div class="word-tit"> <span class="docx">css--打印.doc</span> <span>将本文的Word文档下载到电脑</span> <span><script type="text/javascript">s("content-m-down");</script></span> </div> <div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div> </div> </article> <div class="art-prenext"> 搜索更多关于： <a class="title2" title="css--打印" href="ys_02r037037019019jf7ghc_1.html">css--打印</a> 的文档 </div> <div class="main-tab"><a class="on" href="javascript:;">相关推荐</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a title="保安设备项目可行性研究报告" href="ys_frxi2xrlqhl3u49nhqgkvqx8izrnpwo6ujhhgne_1.html">保安设备项目可行性研究报告</a></li><li><a title="成长中的建筑师必读书目" href="ys_jdctj3ffxnesireocxikoix1rnffhinhq_1.html">成长中的建筑师必读书目</a></li><li><a title="螺杆型电导体市场现状分析及前景预测报告(" href="ys_qt6keehajn5hi64fo3ikih8amuomnqg7akgggjug99k8fu4kll7jhhgne014_1.html">螺杆型电导体市场现状分析及前景预测报告(</a></li><li><a title="进程管理习题" href="ys_sezo3vof5mx2fhcu54_1.html">进程管理习题</a></li><li><a title="论网络时代的消费者行为特征及营销策略" href="ys_rlmp5dp24k52fkzneslmwrw9padqx8fgamm1iv5gjuq3ptfkod2n6t_1.html">论网络时代的消费者行为特征及营销策略</a></li><li><a title="全宗卷整理" href="ys_g2wi3bghjk1gmx2_1.html">全宗卷整理</a></li><li><a title="2020新优选部编版五年级语文下册各单元作文范文（全套）" href="ys_01e01c01e01ck34fmgsg9smgp3qmkofisinop0nrn1k1zfezg3wglggglg1vfock1zpvnk1z014g2whnb015_1.html">2020新优选部编版五年级语文下册各单元作文范文(全套)</a></li><li><a title="人教版初中数学7年级下册第5章 - 相交线与平行线 - 同步" href="ys_fjuk0pmkog7xffxk1ci1y01jinop0nfezg3wobw01ho9s00w01900wni0fj8p1bff2innqx8p1b00w01900wglol7p_1.html">人教版初中数学7年级下册第5章 - 相交线与平行线 - 同步</a></li><li><a title="加法交换律和结合律练习题" href="ys_gbklhxfj8jmqivfgp8p1vglkivfp1ffhcu54_1.html">加法交换律和结合律练习题</a></li><li><a title="市场调查讲义" href="ys_ikih8arnnkitrlefgp_1.html">市场调查讲义</a></li> </ul> </div> <div class="main-tab"><a class="on" href="javascript:;">相关阅读</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a title="首尾相应结构严谨" href=ythd_216v80m7ve7f2vd1ufzq_13.html>首尾相应结构严谨</a></li><li><a title="市场调查讲义" href=ythd_2qrhh9qpyw5s23r4ajik_1.html>市场调查讲义</a></li><li><a title="《飞鸟集》解读" href=ythd_5nn3x3rv2l48fsd2ak3j_1.html>《飞鸟集》解读</a></li><li><a title="(9份试卷汇总)2019-2020学年大庆市名校生物七年级(上)期末调研模拟试题" href=ythd_07kl84nhum7px008twlp8xswm2yhl0015ne_1.html>(9份试卷汇总)2019-2020学年大庆市名校生物七年级(上)期末调研模拟试题</a></li><li><a title="css--打印" href=ythd_4q3799cd5u0088t3wpu9_1.html>css--打印</a></li><li><a title="培尖教育化学竞赛培训无机试题2" href=ythd_5ssz28xngq4qfr016rpd_1.html>培尖教育化学竞赛培训无机试题2</a></li><li><a title="统计学期末复习材料" href=ythd_5ois47gfnb9emep57bp5_7.html>统计学期末复习材料</a></li><li><a title="钢结构复习答案" href=ythd_5qp7j8oa1u37lyd0yekb_1.html>钢结构复习答案</a></li><li><a title="人教版八年级数学下册期末测试卷含答案-名师版" href=ythd_39nih2dlcz0fluh9boav3qhtz4wh2h00twq_1.html>人教版八年级数学下册期末测试卷含答案-名师版</a></li><li><a title="中药化学复习题（含答案）11" href=ythd_4n7m0183da38gut0xsx29kcek7hm3l013x9_5.html>中药化学复习题（含答案）11</a></li><li><a title="吉大考博马哲真题" href=ythd_5gzon2t9g17z7sh756c9_2.html>吉大考博马哲真题</a></li><li><a title="太极拳主要动作的组别及要求" href=ythd_32dq7140k155mbv22qog_1.html>太极拳主要动作的组别及要求</a></li><li><a title="地方政府投融资负面清单及处罚案例" href=ythd_09bx24q6m79mzf00wrvr0a0pl1szli00hhb_9.html>地方政府投融资负面清单及处罚案例</a></li><li><a title="强生公司产品和用人相关要求" href=ythd_309kh7dee98mqar1rxa6_1.html>强生公司产品和用人相关要求</a></li><li><a title="人教版初中数学7年级下册第5章 - 相交线与平行线 - 同步试题及答案（33页）" href=ythd_6ve053lr5r7s7tv44gp5_5.html>人教版初中数学7年级下册第5章 - 相交线与平行线 - 同步试题及答案（33页）</a></li><li><a title="山东省卫生系统2014六五普法考试题及答案" href=ythd_7vozo5uwvz9mzf10wd21_1.html>山东省卫生系统2014六五普法考试题及答案</a></li><li><a title="苏教版五年级下册劳动与技术教案（教材配套版）" href=ythd_1bijl0t45o9o8y29wt5t6vudb8bhu400zc0_3.html>苏教版五年级下册劳动与技术教案（教材配套版）</a></li><li><a title="七年级上册数学期末考试试卷及答案" href=ythd_04r6p4kmj64bptb11x4w7g2499ip7300mow_1.html>七年级上册数学期末考试试卷及答案</a></li><li><a title="生物药剂学与药物动力学习题及答案" href=ythd_3tc366wbmb4n25r6n29k_2.html>生物药剂学与药物动力学习题及答案</a></li><li><a title="注塑印制电路板项目可行性研究报告 - 图文" href=ythd_0j4dh3x6yu5a66j6tl1z_1.html>注塑印制电路板项目可行性研究报告 - 图文</a></li> </ul> </div> </div> <footer class="footer"> <p class="bt-links"><a href="https://m.yuntihai.com/">手机版</a><span class="v-line">|</span><a href="https://www.yuntihai.com/">PC版</a><span class="v-line">|</span><a href='/update.html'>最新更新</a><span class="v-line">|</span><a href='https://www.xuekeyun.com/'>学科云</a></p> <p>Copyright © 2021-2025 云题海 版权所有<br/> 声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br>客服QQ：370150219 邮箱：370150219@qq.com<br> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备16052595号-3</a> </p> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ba4893542539f4c5d80474ef78f6ce5e"; 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> </footer> <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:;" title="关闭" class="close">×</a> <b>游客快捷下载通道</b>（下载后可以自由复制和排版） </div> <div class="theme-popbod dform"> <p class="downtit">下载本文档需要支付 <i>10</i> 元</p> <p class="chose"><span>支付方式：</span><span class="pay1"><img src="https://www.yuntihai.com/img/wxpay.jpg" class="over"></span> <span class="pay2"><img src="https://www.yuntihai.com/img/alipay.jpg"></span></p> <div class="youke_pay"> <div class="wxpay"><a href="javascript:;">微信支付并下载</a></div> <div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a> </div> </div> <p class="tiaozhuan"><a href="https://www.yuntihai.com/user/index.php" style="color:blue;">开通VIP包月会员</a> 特价：<b style="color:red;">29元/月</b></p> <p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信：xuecool-com QQ：370150219</p> </div> </div> <div class="theme-popover-mask"></div> <script type="text/javascript"> //menu $(".header .menu").on("click", function(){ $("body").append("<div class=\"mask-bg menu-mask-bg\"></div>"); $(".menu-slide").show(); $("html,body").css({height:$(window).innerHeight(), overflow:"hidden"}); setTimeout(function(){ $(".menu-slide").css({transform:"translateX(-50px)"}); },50) }); $("body").on("click", ".menu-mask-bg", function(){ $(".menu-slide").css({transform:"translateX(-100%)"}); $(".menu-mask-bg").remove(); $("html,body").removeAttr("style"); setTimeout(function(){ $(".menu-slide").hide(); },300) }); //search $(".header .search").click(function(){ if($(".search-box").is(":hidden")){ $(this).children("i").removeClass("search-icon").addClass("close-icon"); $(".search-box").fadeIn("fast"); }else{ $(this).children("i").removeClass("close-icon").addClass("search-icon"); $(".search-box").fadeOut("fast"); } }); //nav if($(".nav").length > 0) { var nav = new Swiper(".nav",{ slidesPerView: "auto" }); } </script> <script type="text/javascript"> $(".user-login").click(function () { $(".drop-menu").toggle(); }); </script> <script type="text/javascript"> $(".pay1 img").click(function () { $(".wxpay").css("display", "block"); $(".alipay").css("display", "none"); $(".pay1 img").addClass("over"); $(".pay2 img").removeClass("over"); }); $(".pay2 img").click(function () { $(".wxpay").css("display", "none"); $(".alipay").css("display", "block"); $(".pay1 img").removeClass("over"); $(".pay2 img").addClass("over"); }); </script> <script type="text/javascript"> var userinfo = function(data) { if (data.code === "2" || data.code === "3") { $(".word-pic a").click(function(){ $(".theme-popover-mask").fadeIn(100); $(".theme-popover").slideDown(200); var downid = "4q3799cd5u0088t3wpu9" $(".wxpay a").click(function(){ var readurl = 'https://www.yuntihai.com/plus/view.php&psrc='; var downurl = 'https://www.yuntihai.com/d.asp?id='; var payurl = readurl; payurl = payurl.replace('view.php', 'pay/pay-wx.asp?id=4q3799cd5u0088t3wpu9'); var gotourl = payurl + downurl + downid location.href = gotourl; }) $(".alipay a").click(function(){ var readurl = 'https://www.yuntihai.com/plus/view.php&psrc='; var downurl = 'https://www.yuntihai.com/d.asp?id='; var payurl = readurl; payurl = payurl.replace('view.php', 'pay/pay-zfb.asp?id=4q3799cd5u0088t3wpu9'); var gotourl = payurl + downurl + downid location.href = gotourl; }) }); } else{ $(".word-pic a").click(function(){ location.href = "https://www.yuntihai.com/d.asp?id=4q3799cd5u0088t3wpu9"; }); } } $(document).ready(function($) { $(".theme-poptit .close").click(function(){ $(".theme-popover-mask").fadeOut(100); $(".theme-popover").slideUp(200); }); }); </script> <script src="https://www.yuntihai.com/user/check_level_m.php?callback=userinfo"></script> <script src="https://m.yuntihai.com/js/gobacktop.js" type="text/javascript"></script> </body> </html>