CSS之框模型和定位篇

框模型

在排版Html的時(shí)候，除了對(duì)元素的顯示外觀進(jìn)行美化，還會(huì)涉及到頁(yè)面元素的布局，于是引入了框的概念， 即我們對(duì)HTML里面的元素排版以一個(gè)個(gè)框?yàn)榛締挝弧?/p>

元素div與span的異同

首先我們先來(lái)了解兩個(gè)元素

• div:
  屬于對(duì)內(nèi)容分組使用的元素，沒(méi)有任何預(yù)定語(yǔ)義的通用元素

• span:
  屬于文本元素，沒(méi)有任何預(yù)定語(yǔ)義的通用元素

通俗的來(lái)說(shuō)，沒(méi)有預(yù)定義即不同與

代表段落、代表超鏈接已經(jīng)有了自己含義。
這兩個(gè)元素的區(qū)別在于,使用div修飾時(shí)，它有一個(gè)區(qū)域的概念，會(huì)另起一行，與上下的元素隔離，而使用span時(shí)，他會(huì)在本行生效。見(jiàn)代碼：

This is span1
This is span2
This is div1
This is div2

在頁(yè)面上我們會(huì)看到：

當(dāng)然我們也有方法讓他們通用，通過(guò)display屬性的inline和block值來(lái)實(shí)現(xiàn)對(duì)方的效果

This is span1
This is span2
This is div1
This is div2

在頁(yè)面上我們會(huì)看到：

框模型中常用屬性

在一個(gè)框中包含了四個(gè)部分

• margin:外邊距，代表這距離瀏覽器窗口邊的距離

• border:邊框

• padding: 內(nèi)邊距，代表內(nèi)容區(qū)域到邊框的距離

• 內(nèi)容區(qū)域:代表文字或圖片等內(nèi)容的區(qū)域大小，有width和height兩個(gè)屬性值來(lái)定義

下面來(lái)看一段代碼

.box{
width:200px;
height:200px;
margin:30px;
padding:20px;
border:30px;
}

this is box

生成html后，我們可以在瀏覽器中看到，”this is box”是漂浮在中間的，這時(shí)候通過(guò)查看網(wǎng)頁(yè)源碼的style就能看到上面的框模型圖了～

框模型當(dāng)然還有更多具體的邊距和邊框選項(xiàng)，針對(duì)邊距的上下左右來(lái)設(shè)置具體的值，生成不規(guī)則的四邊形，以及一些多樣化的邊框?qū)傩?，如虛線、實(shí)線、凹陷、突出等，由于我們目標(biāo)是先學(xué)會(huì)這些概念，這里不再具體說(shuō)明。

定位

在了解了框模型之后，我們需要進(jìn)一步來(lái)瀏覽器窗口中固定其位置，定義不同的框之間的位置關(guān)系。

總結(jié)：框模型加上定位功能，基本上已經(jīng)覆蓋了頁(yè)面排版了，CSS的基礎(chǔ)知識(shí)也終于學(xué)完了，下章開(kāi)始學(xué)習(xí)jQuery入門(mén)～

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。