HTML設(shè)計(jì)模式學(xué)習(xí)筆記
本周我主要學(xué)習(xí)了HTML的設(shè)計(jì)模式，現(xiàn)將我的學(xué)習(xí)內(nèi)容總結(jié)如下：
一．盒模型的學(xué)習(xí)
CSS中有一種基礎(chǔ)的設(shè)計(jì)模型叫做盒模型，它定義了元素是如何被看做盒子來(lái)解析的。我主要學(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è)置；邊框有大小和顏色之分，我們可以理解為生活中所見(jiàn)盒子的厚度以及這個(gè)盒子是用什么顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離，內(nèi)容為盒子里裝的東西，而填充式盒子內(nèi)空余地方所填充的材料。
1.1內(nèi)聯(lián)盒模型
內(nèi)聯(lián)盒模型是以?xún)?nèi)聯(lián)的排列順序進(jìn)行解析的，它們按照水平從左至右的順序進(jìn)行排序，當(dāng)超過(guò)它們最近的終端塊狀祖先的寬度時(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)邊距之外，但是沒(méi)有擴(kuò)展到行高或改變?cè)卦谪Q直方向上的位置。該模式的模板可以如下表示：
INLINE_SELECTOR{
display:inline;
visibility:value;
line-height:value;
margin:value;
padding:value;
border: width style color;
}
此設(shè)計(jì)模式可以應(yīng)用于任何的內(nèi)聯(lián)元素和任何以?xún)?nèi)聯(lián)方式顯示的元素。
1.2內(nèi)聯(lián)塊狀盒模型
內(nèi)聯(lián)塊狀元素是位于內(nèi)聯(lián)排列順序中的，就像其他的內(nèi)聯(lián)盒子一樣，只不過(guò)它還包含了一些塊狀元素的屬性：外邊距、邊框、內(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)塊狀元素拉長(zhǎng)，此時(shí)它與塊狀元素是一樣的。而margin元素會(huì)從上下左右四個(gè)方向來(lái)改變?cè)氐拇笮。琺argin-top和margin-bottom會(huì)增加或減少行高，margin-left和margin-right會(huì)在水平方向上拉近或擴(kuò)大元素與它前后元素的距離。border和padding也可以用于擴(kuò)展內(nèi)聯(lián)元素的外圍尺寸。
內(nèi)聯(lián)盒模型的典型模式如下：
SELECTOR{
display:inline-block;
line-height:value;
overflow:value;
visibility:value;
width:value;
height:value;
margin:value;
padding:value;
border:width style color;
}
此設(shè)計(jì)模式可應(yīng)用于所有的內(nèi)聯(lián)元素。
1.3塊狀盒模型
在塊狀格式化環(huán)境下，塊狀盒模型是豎直方向從上到下排列的，這是塊狀元素的正常排列順利。塊狀盒模型可以包含其他的塊狀盒模型，或者它們可終結(jié)塊狀格式化環(huán)境，并開(kāi)始一個(gè)包含內(nèi)聯(lián)盒模型的內(nèi)聯(lián)格式化環(huán)境。終端塊狀元素在其內(nèi)盒里創(chuàng)建了一個(gè)內(nèi)聯(lián)格式化環(huán)境，但是它的外盒此時(shí)一定是處于塊狀格式化環(huán)境下。
塊狀元素的長(zhǎng)度可以與它的父元素一致，也可以小于或大于它的父元素。當(dāng)它的尺寸大于父元素的時(shí)候，它就會(huì)溢出來(lái)。overflow屬性就是用來(lái)控制瀏覽器如何處理溢出的。在塊狀盒模型中，還是用width和height來(lái)設(shè)置元素的寬度與高度。其中，width:auto表示它使得元素的寬度與父元素一致，height:auto表示它使得元素的高度包裹住它的所以子元素。margin-left和margin-right會(huì)縮進(jìn)或外延一個(gè)被拉伸的塊狀元素的兩側(cè)，它們會(huì)調(diào)整塊狀元素已設(shè)置的尺寸。margin-top和margin-bottom可以讓不同塊狀元素之間的距離增大或減少，甚至可以讓它們重疊。瀏覽器會(huì)抵消相鄰塊狀元素的頂部和底部外邊距。用margin-left:auto和margin-right:auto來(lái)控制已固定了尺寸的塊狀元素的水平排列。如果某個(gè)塊狀元素設(shè)置了width，margin-left:auto會(huì)令塊狀元素排列在父元素的右側(cè)，margin-right：auto會(huì)令塊狀元素排列在父元素的左側(cè)。而同時(shí)設(shè)定margin-left:auto和margin-right:auto會(huì)令塊狀元素位于父元素的中間。border和padding也會(huì)擴(kuò)展盒模型的外寬和外高。塊狀盒模型的模式如下：
SELECTOR{
display:block;
overflow:value;
visibility:value;
width:value;
height:value;
margin:value;
padding:value;
border:width style color;
}
此設(shè)計(jì)模式可用于所有塊狀元素。
1.4表格盒模型
表格是一個(gè)含有很多行單元格的塊狀盒模型。表格也位于塊狀元素的排列中，而表格中的單元格則被“行”和“列”來(lái)排列。表格有外邊距但是沒(méi)有內(nèi)邊距。單元格有內(nèi)邊距卻沒(méi)有外邊距。用width設(shè)置表格的寬度，這里的width指邊框外圍的寬度而不是內(nèi)邊距里面的寬度。用height設(shè)置表格的高度，這里的height指邊框外圍的高度而不是內(nèi)邊距里面的高度。margin的解析方式根據(jù)表格是否被設(shè)定了尺寸、包裹或者拉伸來(lái)決定的。當(dāng)它被固定了尺寸和包裹時(shí)，外邊距會(huì)移動(dòng)表格和接下來(lái)的元素。負(fù)的外邊距則會(huì)令相鄰元素與表格重疊。當(dāng)表格被拉伸時(shí)，外邊距會(huì)令表格縮進(jìn)，這會(huì)令它的內(nèi)部尺寸變小并縮小單元格的大小。border會(huì)令已定義了尺寸或拉伸的表格的內(nèi)盒變小。而overflow不能應(yīng)用于表格，因?yàn)楸砀袷遣荒芤绯龅?，只有表格的單元格能溢出。?yīng)把overflow:hidden賦給單元格，以確保當(dāng)固定了尺寸的單元格溢出時(shí)，所有瀏覽器的行為是一致的。Border-collapse決定了鄰近的邊框是否合并為一個(gè)，table-layout決定了表格是固定大小（fixed）還是依據(jù)其內(nèi)容而變動(dòng)的（auto）。表格盒模型的模式如下：
SELECTOR{
display:table;
visibility:value;
width:value;
height:value;
margin:value;
border:width style color;
border-collapse:value;
table-layout:value;
}
此設(shè)計(jì)模式可以用于所有的表格元素。
1.5絕對(duì)定位盒模型
絕對(duì)定位元素從正常的元素排列順序中脫離了，把它置于更高的一層或更低的一層。它是相對(duì)于最近的定位祖先來(lái)定位或者固定于視窗的某個(gè)位置?？梢詾樗O(shè)置尺寸、包裹它或者把它拉伸到與父元素一致的大小。任何元素都可以絕對(duì)定位。絕對(duì)定位盒模型的位置不會(huì)影響其他盒模型的位置。
z-index控制定位元素的疊放順序。負(fù)值會(huì)把它們放在正常排列層的下面，正值就會(huì)把它們置于上面。值越大，它就會(huì)位于垂直排列成的越前面。可以把top,left,bottom,right賦值給絕對(duì)定位盒模型，當(dāng)設(shè)置了一個(gè)值后，left會(huì)以絕對(duì)定位元素的容器作為基準(zhǔn)，根據(jù)你設(shè)置的正值或負(fù)值進(jìn)行定位。同理，也適用于其他三個(gè)屬性。用width設(shè)置元素的寬度，height設(shè)置元素的高度。而margin為正的時(shí)候，會(huì)令絕對(duì)定位的盒模型移向它的容器中心，當(dāng)它為負(fù)的時(shí)候，則會(huì)遠(yuǎn)離中心。border和padding會(huì)縮小已拉伸的絕對(duì)定位盒模型的內(nèi)盒。絕對(duì)定位盒模型的模式如下：
SELECTOR{
position:absolute_fixed;
z-index:value;
overflow:value;
visibility:value;
left:value;
right:value;
top:value;
bottom:value;
width:value;
height:value;
margin:value;
padding:value;
border:width style color;
}
此設(shè)計(jì)模式可應(yīng)用于所有的元素上。
1.6浮動(dòng)盒模型
用float:left或者float:right可讓任何元素浮動(dòng)起來(lái)。浮動(dòng)元素也脫離了正常的元素排列順序，被置于鄰近塊狀元素的邊框和背景之上。這會(huì)縮小浮動(dòng)元素的父元素，當(dāng)所有子元素都浮動(dòng)的時(shí)候，它便完全消失了。即使浮動(dòng)元素脫離了原本元素的排列隊(duì)伍，它會(huì)令隊(duì)伍中鄰近的內(nèi)容朝某個(gè)方向縮進(jìn)。左浮動(dòng)會(huì)令鄰近的內(nèi)容向右縮進(jìn)，右浮動(dòng)則會(huì)讓內(nèi)容向左縮進(jìn)。浮動(dòng)元素是在原本的位置上垂直定位的。而在父元素的內(nèi)邊距里，它是從右或左水平定位的。浮動(dòng)元素是在原本的位置上垂直方向上一次排列的。當(dāng)浮動(dòng)元素不能緊鄰它的下一個(gè)浮動(dòng)元素的時(shí)候，它會(huì)挪動(dòng)到下方。浮動(dòng)元素的位置、大小、內(nèi)邊距、邊框和外邊距都會(huì)影響鄰近浮動(dòng)元素和鄰近內(nèi)聯(lián)內(nèi)容的位置。width和height用于設(shè)置浮動(dòng)元素的寬度和高度。margin具有獨(dú)特的浮動(dòng)功能，正的外邊距會(huì)令浮動(dòng)元素遠(yuǎn)離它原來(lái)的位置，讓其他浮動(dòng)元素和內(nèi)聯(lián)內(nèi)容遠(yuǎn)離它，負(fù)的外邊距則正好相反。border和padding會(huì)增大浮動(dòng)元素的外盒尺寸。左浮動(dòng)元素的左邊距和左內(nèi)邊距會(huì)把它推向右側(cè)，而它的右邊距和右內(nèi)邊距會(huì)把其他浮動(dòng)元素與右側(cè)的內(nèi)聯(lián)內(nèi)容更靠右。對(duì)于右浮動(dòng)元素來(lái)說(shuō)，則正好相反。浮動(dòng)盒模型的模式如下：
SELECTOR{
float:left_right;
width:value;
height:value;
z-index:value;
margin:value;
padding:value;
border:width style color;
overflow:value;
visibility:value;
}
此設(shè)計(jì)模式可應(yīng)用于所以元素。
二：定位模型的學(xué)習(xí)
CSS提供了6種用于放置元素的定位模型：靜態(tài)、絕對(duì)、固定、相對(duì)、浮動(dòng)和相對(duì)浮動(dòng)。靜態(tài)定位模型能夠?qū)?nèi)聯(lián)、內(nèi)聯(lián)塊狀、塊狀和表格盒模型進(jìn)行定位。絕對(duì)和固定定位模型能夠?qū)^對(duì)盒模型進(jìn)行定位。浮動(dòng)定位模型能夠?qū)Ω?dòng)盒模型進(jìn)行定位。相對(duì)定位模型能夠?qū)^對(duì)盒模型外的任何盒模型進(jìn)行相對(duì)定位。相對(duì)浮動(dòng)定位模型能夠?qū)Ω?dòng)盒模型進(jìn)行相對(duì)定位。每一種定位模型都采用同一組基礎(chǔ)的屬性來(lái)對(duì)定位進(jìn)行控制。
2.1靜態(tài)定位
想讓元素按照內(nèi)聯(lián)和塊狀元素的排列順序，一個(gè)接一個(gè)排列，可以使用position:static應(yīng)用到元素上。在塊狀元素內(nèi)，一個(gè)或多個(gè)塊狀元素或內(nèi)聯(lián)元素會(huì)豎直向下解析。在內(nèi)聯(lián)元素內(nèi)，文本和對(duì)象會(huì)一行一行地水平解析。靜態(tài)元素的起始位置是由前面的靜態(tài)元素決定。模式如下：
內(nèi)聯(lián)靜態(tài)元素：
INLINE-SELECTOR{
position:static；
line-height:value;
margin-left:value;
margin-right:value;
}
塊狀靜態(tài)元素：
BLOCK-SELECTOR{
position:static;
width:value;
height:value;
margin:value;
}
2.2絕對(duì)定位
絕對(duì)元素令你能夠相對(duì)它們的定位最近祖先元素精確控制它們的所在方位。絕對(duì)元素是在正常元素排列順序上的定位層進(jìn)行解析的，就好像一個(gè)獨(dú)立的盒模型，不像浮動(dòng)元素，絕對(duì)元素是不流動(dòng)的?？梢允褂胮osition:absolute把任何元素當(dāng)作絕對(duì)盒模型解析。用width和height來(lái)設(shè)置它的大小。百分比是相對(duì)它的定位最近的盒模型，而不是父元素?？梢詾閘eft、 right、bottom和top賦值，把它放在定位最近的祖先元素的某一側(cè)?？捎胢argin讓元素的邊相對(duì)定位最近祖先元素的某邊進(jìn)行偏移。用z-index控制元素的堆疊順序，擁有大z-index值得元素會(huì)處于靠近用戶(hù)的定位層。模式如下：
SELECTOR{
position:absolute;
z-index:value;
width:value;
left:value;
right:value;
top:value;
bottom:value;
margin:value;
}
2.3固定定位
想讓元素脫離它的定位層，并把它固定在視窗中的某個(gè)位置，或者你想讓它留在原本元素排列順序中的位置上。當(dāng)視窗滾動(dòng)的時(shí)候，你不想讓它隨之一定。這被稱(chēng)為固定定位元素或者固定元素?？梢杂胮osition:fixed把任何元素轉(zhuǎn)化成固定定位元素。固定元素是相對(duì)視窗而不是其他定位最近的祖先元素放置的。所以說(shuō)如果你把元素固定在原本排列順序中的位置上，當(dāng)視窗滾動(dòng)的時(shí)候，它同樣會(huì)原地不動(dòng)。模式如下：
SELECTOR{
position:fixed;
z-index:value;
width:value;
height:value;
margin:value;
left:value;
top:value;
bottom:value;
right:value;
}
2.4相對(duì)定位
為了控制元素在正常排列位置上的堆疊順序，可以用position:relative對(duì)它采取相對(duì)定位。相對(duì)元素的定位并沒(méi)有脫離正常元素的排列位置，也沒(méi)有改變它在正常排列位置時(shí)的形狀。例如，如果一個(gè)內(nèi)聯(lián)元素橫跨多行（大于等于一行），那么當(dāng)對(duì)其進(jìn)行相對(duì)定位后，它將會(huì)保留這個(gè)獨(dú)特的布局?？梢赃x擇性地把相對(duì)定位元素從它的原始排列位置上進(jìn)行偏移，使用left和top就可以了。把position:relative賦給任何元素，這樣一來(lái)，絕對(duì)后代元素便可相對(duì)它來(lái)定位。模式如下：
SELECTOR{
position:relative;
z-index:value;
left:auto;
top:auto;
}
三：盒模型探究學(xué)習(xí)
在CSS2.1中，塊級(jí)元素只能是矩形形狀的。當(dāng)我們需要計(jì)算一個(gè)塊級(jí)元素的整體尺寸時(shí)，需要同時(shí)把內(nèi)容區(qū)域（content area）的長(zhǎng)寬，連同此元素的外邊距，內(nèi)邊距，以及邊框都計(jì)算在內(nèi)。盒子模型可以分為標(biāo)準(zhǔn)W3C盒子模型和IE盒子模型。標(biāo)準(zhǔn)W3C盒子模型如下圖：
圖1
該盒模型的范圍包括margin、border、padding、content，并且content部分不包含其他部分。也就是說(shuō)當(dāng)我們?cè)赾ss中設(shè)計(jì)一個(gè)塊級(jí)元素的width和height屬性時(shí)比如.box{width ：100px; height:100px}時(shí)，其中的width 和height僅僅是對(duì)content部分設(shè)置的，即定義上圖中padding-top和padding-bottom之間區(qū)域的長(zhǎng)（padding-left和padding-right之間區(qū)域的寬）。而不是內(nèi)容，內(nèi)邊距，邊框的總和。而IE盒子模型如下圖：
圖2
該盒模型的范圍包括margin、border、padding、content，和標(biāo)準(zhǔn)W3C盒子模型不同的是：IE盒子模型的content部分包含了border和padding。也就是說(shuō)當(dāng)我們?cè)赾ss中設(shè)計(jì)一個(gè)塊級(jí)元素的width和height屬性時(shí)比如.box{width ：100px; height:100px}時(shí)，其中的width 和height是內(nèi)容，內(nèi)邊距，邊框的總和。
對(duì)寬度為自動(dòng)狀態(tài)的靜態(tài)（static）定位元素（即無(wú)定位），和相對(duì)定位元素來(lái)說(shuō)，計(jì)算寬度的方法是，將他們包含塊的寬度減去此元素的橫向的所有外邊距，內(nèi)邊距，邊框，滾動(dòng)條。也就是說(shuō)，從包含塊的寬度中除去元素的橫向外邊距，內(nèi)邊距，邊框，滾動(dòng)條（如果存在的話）的寬度，所剩的值就是了。舉一個(gè)例子，
.test1{
height:200px;
padding:20px;
margin:30px;
border:10px dotted grey;
background:red;
}
這里，.test1沒(méi)有設(shè)置position屬性，即為默認(rèn)的position:static。其中，html代碼為：<div class=”test1”>靜態(tài)定位或相對(duì)定位</div>。結(jié)果為：
圖3
即塊的寬度是延伸自動(dòng)填充滿(mǎn)它的父元素的寬度區(qū)域。
但是浮動(dòng)元素和絕對(duì)定位元素，它們的結(jié)果卻恰恰相反，他們會(huì)收縮以致包裹緊貼內(nèi)容。假設(shè)剛才例子的.test1改寫(xiě)為：
.test1{
height:200px;
padding:20px;
margin:30px;
border:10px dotted grey;
background:red;
position:absolute;
}
html不變，那么結(jié)果為：
圖4
在圖1和圖2中，我們清楚地看到在計(jì)算元素所需區(qū)域大小的例子中外邊距已經(jīng)在計(jì)算中包括在內(nèi)了。但事實(shí)上，縱向的無(wú)定位元素的相鄰?fù)膺吘鄷?huì)疊加合成為其中一個(gè)較大寬度的外邊距的值，并非兩者之和。這就意味著當(dāng)計(jì)算實(shí)際上需要存放一個(gè)元素的區(qū)域大小時(shí)，并不是從外邊距的邊緣開(kāi)始算起，只有最寬的外邊距會(huì)生效，并且較窄的外邊距會(huì)與較大的疊加在一起。如下圖所示：
圖5
另外，當(dāng)一個(gè)元素的寬度被設(shè)置為100%時(shí)（也就是說(shuō)父元素的內(nèi)容寬度時(shí)100%），它不應(yīng)該有任何的外邊距，內(nèi)邊距，或者是邊框，這只會(huì)使它放置的區(qū)域需要更大的面積。這通常會(huì)被設(shè)計(jì)師們所忽略并且很?chē)?yán)重的擾亂了頁(yè)面的布局，這樣的話內(nèi)容要么溢出要么使元素比他們應(yīng)該的樣式更寬。舉一例子：
.box{
background:red;
height:200px;
width:100%;
}
.contain{
background:yellow;
height:220px;
width:300px;
}
而html的代碼為：<div class=”contain”><div class=”box”></div></div>。結(jié)果如圖：
也就是說(shuō)在沒(méi)有margin和padding的情況下，100%的內(nèi)容能恰到好處地填充父元素?，F(xiàn)在假設(shè)將.box的樣式改為：
.box{
background:red;
height:200px;
width:100%;
padding:10px;
margin:10px;
}
其余保持不變，則結(jié)果為：
此時(shí)，元素出現(xiàn)了錯(cuò)位，只是出現(xiàn)了左側(cè)的margin。解決辦法就是在大多數(shù)情況下，避免給寬度屬性添加具體的值，并且只應(yīng)用外邊距，內(nèi)邊距和邊框。
四：總結(jié)
本周，我主要學(xué)習(xí)了html的盒模型和定位模型，對(duì)盒模型中的各個(gè)屬性以及屬性之間的關(guān)系有了更進(jìn)一步地了解，幫助我在日后的應(yīng)用中熟練使用。同時(shí)，也對(duì)瀏覽器的對(duì)css的解析有了進(jìn)一步地學(xué)習(xí)。
