欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

网页设计之CSS3精要(二)

创建时间:2013年08月31日 09:16  阅读次数:(5329)
分享到:
6 盒子模型
这个可是非常地重要,它与网页布局关系太大了。

CSS把每个元素视为一个“Box(盒子)”,通过排列大大小小的多个“盒子”,完成页面的呈现。上张图(图3):
css盒子模型

关键是记着盒子模型其实是“一个套一个”的多个矩形,知道“Border”、“Padding”和“Margin”三个术语的含义。

CSS规范中定义有很多属性用来设定Box的边框和背景,实现诸如圆角框、渐变背景、背景融合等等功能,任何一本CSS书中都有很多介绍,我就不废话了。

需要指出的是,CSS3中新加的一些属性,并非所有浏览器都实现,因此,往往会在规则中添加特定的前缀,以达到通用性。比如实现圆角框的属性就是CSS3新加的:
div {
  width:200px;
  height:100px;
  background:#e1d8b9;
  /*上部、下部圆角*/
  border-radius:15px/15px;
  -webkit-border-radius:15px/15px;
  -moz-border-radius:15px/15px;
 }

其中的-webkit-(针对Chrome和Safari)和-moz-(针对FireFox)就是厂商前缀,不带前缀的border-radius就是CSS规则所定义的,随着时间的推移,未来将只需要不带前缀的属性名。

7 盒子的浮动与定位方式
这是CSS技术的要点与难点。

设置一个块元素的float为none和clear之外的某个值,这个块元素就浮动起来,自动地飘流到其父元素的边缘。

盒子浮动起来以后,元素的定位变得复杂。这里头有相当多的东西要掌握。

首先是CSS定义了几种元素的定位方式,使用position属性指定以下值之一:
■ 静态(static)定位:这是默认的属性值,表明盒子中的元素按照标准流方式进行定位,“该在哪就在哪”.
■ 相对(relative)定位:使用相对定位方式的盒子,会相对于它原本的位置有一个偏移,到达一个新位置。
■ 绝对(absolute)定位:以它“最近”的一个已经定位的父元素为基准进行定位,如果没有这样的元素,则以浏览器窗口为基准。
■ 固定(fixed)定位:采用固定定位方式的盒子以浏览器窗口为基准定位

这四种定位方式的区分比较微妙,需要编写示例在浏览器中进行试验才能理解它们的特为特性。

当有多个浮动的盒子,其上下和左右边距如何叠加,如何实现文本绕排图片等等,问题变得更为复杂。

特别需要指出的是,CSS 3中新加了一种灵活的“弹性盒子布局(Flexible box layout)”,通过box-orient/box-flex/box-align等属性值可以让多个盒子水平或垂直排列,自动按比例调整大小,指定对齐方式,调整盒子显示顺序,盒子分组排列等等,让人印象深刻,太棒了。唯一希望的就是各大浏览器厂商能尽快地实现它,对网页设计师来说,这是一个福音。

8 页面布局方法
现在的网页,大多数采用分栏的设计方案。实现分栏的关键就是盒子的浮动。几乎所有的CSS书都会有一章介绍常见的两栏、三栏、多栏的实现方法,我就不废话了,自己看书。而一些Web网页设计工具,比如DreamWeaver,甚至在创建网页时就允许你确定页面的总体布局(图4):
css盒子模型

使用这些工具生成的页面模板,可以大大地减少网页设计工作量,但定制与调整它们仍然需要对CSS盒子模型与元素基本定位方式有相当的把握与了解。

象Dreamweaver这样的工具比较适合网页设计者,对于笔者这种以编程为主的Web开发者而言,还是更喜欢自己用熟的IDE,比如Visual studio 2012,它有一个免费的版本——Visual studio 2012 Express For Web可用,非常棒,强力推荐。

9 过渡与变换
相比前面介绍的内容,过渡(transition)与变换(transform)不属于必须掌握的技能,它主要用于给网页元素添加动画,用得合适,能给你的网页“锦上添花”,用得不合适,会适得其反。

10 界面组件
仅仅使用HTML现有元素和CSS,加上一些JavaScript代码,能够实现一些常见的界面组件,比如下拉菜单,Tab页,折叠面板等等,然而,手动完成这些界面组件对网页设计开发者的要求较高,至少你必须熟练掌握Javascript的编程技巧。

幸运的是,现在己经有不少现成的Web界面组件库可以用,比如jQuery UI,推荐在开发中优先使用它们,实在找不到符合要求的组件时,再自己动手开发。

11 CSS3的其他特性
前面列举的10个方面,是CSS这一技术领域中最重要的部分。除此之外,还有一些小的方面我没有介绍,比如CSS 3中新加的Web font,能大大地丰富网页上可用的英文显示效果,然而由于汉字字库过于庞大,目前还不太适合在网络上传输。特别是在天朝这种网速慢、网费高的地方,Web Font还不够实用。

其他的CSS 3新特性,就留给大家自己去探索吧,最重要的东西我己经展示给大家了。

[本文作者:金旭亮]
来源:http://blog.csdn.net/bitfan/article/details/10086107
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 32+0=? 的结果(结果是:32)
结  果: