CSS之框模型和定位篇

框模型

在排版Html的時候，除了對元素的顯示外觀進行美化，還會涉及到頁面元素的布局，于是引入了框的概念， 即我們對HTML里面的元素排版以一個個框為基本單位。

元素div與span的異同

首先我們先來了解兩個元素

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

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

通俗的來說，沒有預(yù)定義即不同與

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

<span>This is span1</span>
<span>This is span2</span>
<div>This is div1</div>
<div>This is div2</div>

在頁面上我們會看到：

當然我們也有方法讓他們通用，通過display屬性的inline和block值來實現(xiàn)對方的效果

<span >This is span1</span>
<span>This is span2</span>
<div >This is div1</div>
<div >This is div2</div>

在頁面上我們會看到：

框模型中常用屬性

在一個框中包含了四個部分

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

• border:邊框

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

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

下面來看一段代碼

<style type="text/css">
.box{
width:200px;
height:200px;
margin:30px;
padding:20px;
border:30px;
}
</style>
<div class="box">this is box</div>

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

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

定位

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

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

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

本文名稱：Js腳本之jQuery學(xué)習(xí)筆記（4）-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://m.newbst.com/article4/jgsie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、商城網(wǎng)站、手機網(wǎng)站建設(shè)、網(wǎng)站改版、微信公眾號、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)