白蕾 郭清菊

【摘要】HTML5和CSS3同為web前端最新的開發(fā)技術(shù)，HTML5和CSS3完成前端開發(fā)是一個(gè)非常繁瑣需要投入很多精力與耐心的工作過程。本文通過對(duì)HTML5和CSS3設(shè)計(jì)模式進(jìn)行總結(jié)歸納，得出7條設(shè)計(jì)模式，通過對(duì)這7條設(shè)計(jì)模式的有效組合應(yīng)用，可以有效提高前端開發(fā)的工作效率。

【關(guān)鍵詞】HTML5； CSS3； 設(shè)計(jì)模式

中圖分類號(hào)：TP393.09 文件標(biāo)識(shí)碼： A 文章編號(hào)：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前端開發(fā)技術(shù)，是新一代網(wǎng)頁設(shè)計(jì)師不可缺少的專業(yè)實(shí)效應(yīng)用工具。

HTML5是一種用于描述網(wǎng)頁文檔的超文本標(biāo)記語言。2014年10月29日，萬維網(wǎng)聯(lián)盟制定推出了html5標(biāo)準(zhǔn)規(guī)范，使其在一度蜂蜜的html4.01之后繼而成為萬維網(wǎng)新一代核心語言。HTML5具有以下優(yōu)點(diǎn)：

1）提高可用性和改進(jìn)用戶的友好體驗(yàn)；

2）提供了數(shù)個(gè)新標(biāo)簽，將有助于開發(fā)人員定義重要的內(nèi)容；

3）可以給站點(diǎn)帶來更為豐富的多媒體元素（視頻和音頻）；

4）可以優(yōu)勢(shì)替代FLASH和Silverlight；

5）當(dāng)涉及到網(wǎng)站抓取和索引時(shí)，對(duì)于SEO表現(xiàn)友好；

6）可以量應(yīng)用于移動(dòng)應(yīng)用程序和游戲；

7）可移植性好。

1.5 盒子模型設(shè)計(jì)模式

在這種盒子模型下，html元素的任意屬性的屬性值均可以單獨(dú)設(shè)置，同時(shí)該元素在前段的實(shí)際占位并不能只是通過width和height值給出，而是要通過以下運(yùn)算式運(yùn)算得出：

1.6 定位設(shè)計(jì)模式

CSS 有3種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。

除非專門指定，否則所有盒子都在普通流中定位。也就是說，普通流中的元素的位置由元素在html5 中的位置參數(shù)決定。HTML5的塊級(jí)元素為從上而下排列，行級(jí)元素則是水平排列。

通過使用 position 屬性，可以選擇 4 種不同類型的定位：static（沒有定位，按照默認(rèn)值）、absolute （生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位）、fixed （生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位）、relative（生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位）。

通過使用float屬性，可以定義HTML元素在哪個(gè)方向浮動(dòng)。

通過CSS3中新增的column-count、column-gap、column-rule屬性可以直接設(shè)置多列從而實(shí)現(xiàn)HTML5元素的定位。其中，column-count屬性：設(shè)置元素應(yīng)該被分隔的列數(shù)；column-gap 屬性：設(shè)置列之間的間隔；column-rule 屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。

1.7 彈性盒子設(shè)計(jì)模式

在以往的html與CSS中，大部分人習(xí)慣于使用margin，padding，left等元素來進(jìn)行布局，在不斷的測(cè)試長(zhǎng)度、寬度中花費(fèi)了大量時(shí)間與精力。而在CSS3中增加了彈性盒子模式，這種新的盒子模型布局對(duì)建立提高布局效率將能帶來顯著益處?？梢允褂靡韵聦傩詠韺?shí)現(xiàn)彈性盒子設(shè)計(jì)模式。

box-orient屬性可用于設(shè)置盒模型內(nèi)部元素的排列方式，取值為：inline-axis（默認(rèn)值：從左向右排列）、horizontal（水平排列）、vertical（垂直排列）、block-axis（從上向下排列）。

box-sizing屬性可用于改變?nèi)萜鞯暮心Ｐ徒M成方式。取值為：content-box（此值維持css2.1盒模型的組成模式，元素實(shí)際占有距離需要將border、padding、content相關(guān)值相加）、 border-box（改變css2.1盒模型組成模式，元素實(shí)際占位就是設(shè)置的width、height值）。

box-direction 屬性用于改變?nèi)萜鞯娘@示順序，使之反向排列。默認(rèn)的情況下，block 級(jí)元素是按照加載順序從上到下排列， inline 級(jí)元素是從左到右排列的。

box-pack 屬性可以用于設(shè)置子容器在水平框中的水平位置，以及垂直框中的垂直位置，共有4種可能值： justify（默認(rèn)值：所有子容器平均分布），start（所有子容器都分布在父容器的左側(cè)，右側(cè)留空），end（所有子容器都分布在父容器的右側(cè)，左側(cè)留空）和 center（平均分配父容器剩余的空間）。

box-align 屬性用于規(guī)定如何對(duì)齊框的子元素。，共有5個(gè)值：stretch（默認(rèn)值：所有子容器和父容器保持同一高度）、start（子容器從父容器頂部開始排列），end（子容器從父容器底部開始排列），center（子容器橫向居中）和baseline（所有子容器沿同一基線排列）。

彈性設(shè)計(jì)模式可以極大地提高在開發(fā)客戶端時(shí)的工作效率，唯一的問題在于現(xiàn)階段并非所有的瀏覽器都能支持彈性設(shè)計(jì)模式的相關(guān)屬性。因此在當(dāng)下的前端開發(fā)依然還將選擇盒子模式與float浮動(dòng)配合使用的效果設(shè)計(jì)。

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

1.8 組合設(shè)計(jì)模式實(shí)現(xiàn)效果范例

接下來，將背景設(shè)計(jì)模式、盒子設(shè)計(jì)模式、彈性盒子設(shè)計(jì)模式以及定位設(shè)計(jì)模式組合起來，實(shí)現(xiàn)如圖2的照片墻效果。

2 結(jié)束語

綜上所述可以看出，為了有效實(shí)現(xiàn)前端開發(fā)，開發(fā)人員非常即需要熟練掌握文中研究的7種設(shè)計(jì)模式，并在實(shí)際工作中能夠進(jìn)行靈活的組合運(yùn)用，從而提高工作效率，獲得更多效果獨(dú)具的前端開發(fā)。

【參考文獻(xiàn)】

[1] 王衛(wèi)華.下一代的瀏覽體驗(yàn)——話說HTML5、CSS3 [J].電腦迷， 2010（10上）：6-8.

[2] 凌詩佳，藍(lán)伴儒. 淺析HTML與CSS的功能、區(qū)別與聯(lián)系[J]. 信息系統(tǒng)工程， 2011（8）：123-124，126.

[3] 邢益輝. HTML5配合CSS3在網(wǎng)站中的應(yīng)用[J]. 信息與電腦（理論版）， 2014（5）：137.