HTML設計模式學習筆記

本周我主要學習了HTML的設計模式，現將我的學習內容總結如下：

一．盒模型的學習

CSS中有一種基礎的設計模型叫做盒模型，它定義了元素是如何被看做盒子來解析的。我主要學習了六種盒模型，分別為內聯盒模型（inline box），內聯塊狀盒模型（inline-block box），塊狀盒模型（block box），表格盒模型（table box），絕對定位盒模型（absolute box）和浮動定位盒模型（floated box）。

盒模型設計模式是CSS中內建的，它定義了如下屬性之間的關系：邊界、邊框、填充和內容。每個屬性都包括四個部分：上、右、下、左；這四部分可同時設置，也可分別設置；邊框有大小和顏色之分，我們可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離，內容為盒子里裝的東西，而填充式盒子內空余地方所填充的材料。

1.1內聯盒模型

內聯盒模型是以內聯的排列順序進行解析的，它們按照水平從左至右的順序進行排序，當超過它們最近的終端塊狀祖先的寬度時，便換到了新的一行。width，height和overflow在內聯元素上不起作用，因為它們總是與內容的寬度和高度相一致。margin和line-height可以以某種特殊的方式應用到內聯元素上。水平外邊距改變了內聯元素在排列順序中的位置。一個margin-left的正值會令元素遠離它前面的元素，負值則會把它拉近。margin-right的正值會令元素遠離它的下一個元素，負值則會把它拉近。margin-top和margin-bottom對內聯元素是不起作用的。而border是以某種特殊的方式為內聯元素設置邊框，水平的邊框會改變內聯元素在排列中的位置。左邊框會令元素靠左，右邊框使得下一個元素靠右。而上下邊框則會顯示于內邊距之外，但是沒有擴展到行高或改變元素在豎直方向上的位置。該模式的模板可以如下表示：

此設計模式可以應用于任何的內聯元素和任何以內聯方式顯示的元素。

1.2內聯塊狀盒模型

內聯塊狀元素是位于內聯排列順序中的，就像其他的內聯盒子一樣，只不過它還包含了一些塊狀元素的屬性：外邊距、邊框、內邊距、寬度和高度。內聯塊狀元素是不會與其他行交叉的。內聯塊狀元素會增添行高以讓其適應自身的高度、內邊距、邊框和外邊距。width和height設置元素的高度和寬度，你可以擴大或縮小一個替代元素，例如圖片，只要把他們的width或者height設置為某一個具體的值就可以了。也可以用width:auto和height:auto令替代元素的尺寸與實際尺寸相符。假設一個display:inline-block的span，設置它們的width和height便可調整大小了。也可以用width:auto和height:auto把內聯塊狀元素包裹住。可用width:100%把內聯塊狀元素拉長，此時它與塊狀元素是一樣的。而margin元素會從上下左右四個方向來改變元素的大小，margin-top和margin-bottom會增加或減少行高，margin-left和margin-right會在水平方向上拉近或擴大元素與它前后元素的距離。border和padding也可以用于擴展內聯元素的外圍尺寸。