溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
在排版Html的時候，除了對元素的顯示外觀進(jìn)行美化，還會涉及到頁面元素的布局，于是引入了框的概念， 即我們對HTML里面的元素排版以一個個框為基本單位。
首先我們先來了解兩個元素
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> |
在頁面上我們會看到：
當(dāng)然我們也有方法讓他們通用，通過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就能看到上面的框模型圖了～
框模型當(dāng)然還有更多具體的邊距和邊框選項，針對邊距的上下左右來設(shè)置具體的值，生成不規(guī)則的四邊形，以及一些多樣化的邊框?qū)傩裕缣摼€、實線、凹陷、突出等，由于我們目標(biāo)是先學(xué)會這些概念，這里不再具體說明。
在了解了框模型之后，我們需要進(jìn)一步來瀏覽器窗口中固定其位置，定義不同的框之間的位置關(guān)系。
| 屬性 | 說明 |
|---|---|
| position | 定義元素在頁面的定位方式 |
| left | 制定元素與最近一個具有定位設(shè)置的父對象左邊的距離 |
| right | 制定元素與最近一個具有定位設(shè)置的父對象右邊的距離 |
| top | 制定元素與最近一個具有定位設(shè)置的父對象上邊的距離 |
| bottom | 制定元素與最近一個具有定位設(shè)置的父對象下邊的距離 |
| float | 制定元素是否以及如何浮動，圖文結(jié)合時使用 |
總結(jié)：框模型加上定位功能，基本上已經(jīng)覆蓋了頁面排版了，CSS的基礎(chǔ)知識也終于學(xué)完了，下章開始學(xué)習(xí)jQuery入門～
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
