HTML5与CSS3的设计模式

白蕾 郭清菊

【摘要】HTML5和CSS3同为web前端最新的开发技术，HTML5和CSS3完成前端开发是一个非常繁琐需要投入很多精力与耐心的工作过程。本文通过对HTML5和CSS3设计模式进行总结归纳，得出7条设计模式，通过对这7条设计模式的有效组合应用，可以有效提高前端开发的工作效率。

【关键词】HTML5； CSS3； 设计模式

中图分类号：TP393.09 文件标识码： A 文章编号：2095-2163（2016）02-

HTML 5 and CSS 3 design patterns

Bai Lei1 Guo Qing Ju2

（Hainan College Of Software Technology，Hainan Qionghai 571400，China）

【Abstract 】 HTML5 and CSS3 as web Client end are the latest technology. The development of web Client is very tedious， which needs lots of efforts and patience. After summarizing the design patterns of HTML5 and CSS3， the paper proposes seven design patterns in all. By effective combined application of these 7 design patterns， the work efficiency of web Client end development can be effectively improved.

Key words： HTML5； CSS3； design patterns

0 引言

HTML5和CSS3同为web前端开发技术，是新一代网页设计师不可缺少的专业实效应用工具。

HTML5是一种用于描述网页文档的超文本标记语言。2014年10月29日，万维网联盟制定推出了html5标准规范，使其在一度蜂蜜的html4.01之后继而成为万维网新一代核心语言。HTML5具有以下优点：

1）提高可用性和改进用户的友好体验；

2）提供了数个新标签，将有助于开发人员定义重要的内容；

3）可以给站点带来更为丰富的多媒体元素（视频和音频）；

4）可以优势替代FLASH和Silverlight；

5）当涉及到网站抓取和索引时，对于SEO表现友好；

6）可以量应用于移动应用程序和游戏；

7）可移植性好。

1.5 盒子模型设计模式

在这种盒子模型下，html元素的任意属性的属性值均可以单独设置，同时该元素在前段的实际占位并不能只是通过width和height值给出，而是要通过以下运算式运算得出：

1.6 定位设计模式

CSS 有3种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有盒子都在普通流中定位。也就是说，普通流中的元素的位置由元素在html5 中的位置参数决定。HTML5的块级元素为从上而下排列，行级元素则是水平排列。

通过使用 position 属性，可以选择 4 种不同类型的定位：static（没有定位，按照默认值）、absolute （生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位）、fixed （生成绝对定位的元素，相对于浏览器窗口进行定位）、relative（生成相对定位的元素，相对于其正常位置进行定位）。

通过使用float属性，可以定义HTML元素在哪个方向浮动。

通过CSS3中新增的column-count、column-gap、column-rule属性可以直接设置多列从而实现HTML5元素的定位。其中，column-count属性：设置元素应该被分隔的列数；column-gap 属性：设置列之间的间隔；column-rule 属性设置列之间的宽度、样式和颜色规则。

1.7 弹性盒子设计模式

在以往的html与CSS中，大部分人习惯于使用margin，padding，left等元素来进行布局，在不断的测试长度、宽度中花费了大量时间与精力。而在CSS3中增加了弹性盒子模式，这种新的盒子模型布局对建立提高布局效率将能带来显著益处。可以使用以下属性来实现弹性盒子设计模式。

box-orient属性可用于设置盒模型内部元素的排列方式，取值为：inline-axis（默认值：从左向右排列）、horizontal（水平排列）、vertical（垂直排列）、block-axis（从上向下排列）。

box-sizing属性可用于改变容器的盒模型组成方式。取值为：content-box（此值维持css2.1盒模型的组成模式，元素实际占有距离需要将border、padding、content相关值相加）、 border-box（改变css2.1盒模型组成模式，元素实际占位就是设置的width、height值）。

box-direction 属性用于改变容器的显示顺序，使之反向排列。默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的。

box-pack 属性可以用于设置子容器在水平框中的水平位置，以及垂直框中的垂直位置，共有4种可能值： justify（默认值：所有子容器平均分布），start（所有子容器都分布在父容器的左侧，右侧留空），end（所有子容器都分布在父容器的右侧，左侧留空）和 center（平均分配父容器剩余的空间）。

box-align 属性用于规定如何对齐框的子元素。，共有5个值：stretch（默认值：所有子容器和父容器保持同一高度）、start（子容器从父容器顶部开始排列），end（子容器从父容器底部开始排列），center（子容器横向居中）和baseline（所有子容器沿同一基线排列）。

弹性设计模式可以极大地提高在开发客户端时的工作效率，唯一的问题在于现阶段并非所有的浏览器都能支持弹性设计模式的相关属性。因此在当下的前端开发依然还将选择盒子模式与float浮动配合使用的效果设计。

CSS3中更添加了box-shadow属性为所有元素添加阴影，取值为hOffset（阴影在水平方向的偏移）、vOffset（阴影在垂直方向的偏移）、blurLength（阴影的模糊程度）、scaleLength（阴影的缩放程度）、color（阴影颜色）。

1.8 组合设计模式实现效果范例

接下来，将背景设计模式、盒子设计模式、弹性盒子设计模式以及定位设计模式组合起来，实现如图2的照片墙效果。

2 结束语

综上所述可以看出，为了有效实现前端开发，开发人员非常即需要熟练掌握文中研究的7种设计模式，并在实际工作中能够进行灵活的组合运用，从而提高工作效率，获得更多效果独具的前端开发。

【参考文献】

[1] 王卫华.下一代的浏览体验——话说HTML5、CSS3 [J].电脑迷， 2010（10上）：6-8.

[2] 凌诗佳，蓝伴儒. 浅析HTML与CSS的功能、区别与联系[J]. 信息系统工程， 2011（8）：123-124，126.

[3] 邢益辉. HTML5配合CSS3在网站中的应用[J]. 信息与电脑（理论版）， 2014（5）：137.