HTML設(shè)計(jì)模式學(xué)習(xí)筆記

本周我主要學(xué)習(xí)了HTML的設(shè)計(jì)模式，現(xiàn)將我的學(xué)習(xí)內(nèi)容總結(jié)如下：

一．盒模型的學(xué)習(xí)

CSS中有一種基礎(chǔ)的設(shè)計(jì)模型叫做盒模型，它定義了元素是如何被看做盒子來解析的。我主要學(xué)習(xí)了六種盒模型，分別為內(nèi)聯(lián)盒模型（inline box），內(nèi)聯(lián)塊狀盒模型（inline-block box），塊狀盒模型（block box），表格盒模型（table box），絕對(duì)定位盒模型（absolute box）和浮動(dòng)定位盒模型（floated box）。

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

1.1內(nèi)聯(lián)盒模型

內(nèi)聯(lián)盒模型是以內(nèi)聯(lián)的排列順序進(jìn)行解析的，它們按照水平從左至右的順序進(jìn)行排序，當(dāng)超過它們最近的終端塊狀祖先的寬度時(shí)，便換到了新的一行。width，height和overflow在內(nèi)聯(lián)元素上不起作用，因?yàn)樗鼈兛偸桥c內(nèi)容的寬度和高度相一致。margin和line-height可以以某種特殊的方式應(yīng)用到內(nèi)聯(lián)元素上。水平外邊距改變了內(nèi)聯(lián)元素在排列順序中的位置。一個(gè)margin-left的正值會(huì)令元素遠(yuǎn)離它前面的元素，負(fù)值則會(huì)把它拉近。margin-right的正值會(huì)令元素遠(yuǎn)離它的下一個(gè)元素，負(fù)值則會(huì)把它拉近。margin-top和margin-bottom對(duì)內(nèi)聯(lián)元素是不起作用的。而border是以某種特殊的方式為內(nèi)聯(lián)元素設(shè)置邊框，水平的邊框會(huì)改變內(nèi)聯(lián)元素在排列中的位置。左邊框會(huì)令元素靠左，右邊框使得下一個(gè)元素靠右。而上下邊框則會(huì)顯示于內(nèi)邊距之外，但是沒有擴(kuò)展到行高或改變?cè)卦谪Q直方向上的位置。該模式的模板可以如下表示：

此設(shè)計(jì)模式可以應(yīng)用于任何的內(nèi)聯(lián)元素和任何以內(nèi)聯(lián)方式顯示的元素。

1.2內(nèi)聯(lián)塊狀盒模型

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