原创力文档- 1、本文档共187页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
CSS3之前，符合标准的浏览器中元素width或height属性只包括content部分，而IE5浏览器中元素的width和height属性则包括border+padding+content三部分。CSS3利用盒模式进行了完善，通过设置box-sizing属性，可以设置不同的盒模型模式 content-box：元素的属性width/height代表content的宽和高。 border-box：元素的属性width/heigh代表border+padding+content的宽和高。 inherit：继承父元素box-sizing 属性的值。 盒模型方式 box-sizing:content-box|border-box|inherit; 盒模型方式 <style type="text/css"> div{ width:300px; height:400px; background:#996; padding:40px; /*border-box使得元素的宽和高不变，只是内容位置发生变化*/ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } </style> CSS3中新增了resize属性，他运行通过拖动的方式改变元素的大小，而在之前如果要实现这种效果，通常需要使用javascript脚本。 参数说明如下： none:不支持尺寸调整。 both:运行用户调整宽度和高度。 horizontal:运行用户调整宽度。 vertical:运行用户调整高度。 inherit:默认继承。 调节元素尺寸 resize:none|both|horizontal|vertical|inherit; 调节元素尺寸 <style type="text/css"> div{ width:200px; height:100px; border:1px solid #09F; background:url(images/121.jpg) no-repeat center; /*必须同时定义overflow和resize，否则resize无效*/ resize:both; overflow:auto; } </style> content属性可以替换文本内容以及替换文本属性，在CSS3之前，一般采用JavaScript脚本来实现这种任务。 该语法参数解释如下： ?normal:默认值。 ?string：插入文本。 ?attr()：插入属性。 url()：插入一个外部资源，如图像、音视频等。 ?counter()：计数器，用于插入排序标识。 ?none：无内容。 控制显示内容 content:normal|string|attr()|uri()|counter()|none; 控制显示内容 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div{ content:url(images/002.jpg); } </style> </head> <body> <div>无边落木萧萧下,不尽长江滚滚来。</div> </body> </html> 在CSS3中，可以利用initial属性值取消对元素的样式指定 恢复默认样式 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> div{ font-family:华文行楷; font-weight:bold; font-size:25px; color:green; } div#div2{ font-weight:initial; color:initial; font-size:initial; } </style> </head> <body> <div id="div1">曾经沧海难为水，除却巫山不是云。</div> <div id="div2">我自横刀向天笑，去留肝胆两昆仑。</div> <div id="div3">人生自古谁无死，留取丹心照汗青。</div> </html> 利用transfo
文档评论（0）