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

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

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

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

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

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

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

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表