HTML5程序设计及实践 全套课件.ppt

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 利用transform属性可以实现文字或图像的旋转、缩放、倾斜、移动等几种效果。 translate()：移动元素，基于X和Y坐标重新定位元素。 scale()：缩放元素，取值包括正数、负数、小数。