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是以某種特殊的方式為內聯元素設置邊框，水平的邊框會改變內聯元素在排列中的位置。左邊框會令元素靠左，右邊框使得下一個元素靠右。而上下邊框則會顯示于內邊距之外，但是沒有擴展到行高或改變元素在豎直方向上的位置。該模式的模板可以如下表示：

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