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.