溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在排版Html的時候，除了對元素的顯示外觀進行美化，還會涉及到頁面元素的布局，于是引入了框的概念， 即我們對HTML里面的元素排版以一個個框為基本單位。
首先我們先來了解兩個元素
div:
屬于對內容分組使用的元素，沒有任何預定語義的通用元素
span:
屬于文本元素，沒有任何預定語義的通用元素
通俗的來說，沒有預定義即不同與
代表段落、代表超鏈接已經有了自己含義。
這兩個元素的區別在于,使用div修飾時，它有一個區域的概念，會另起一行，與上下的元素隔離，而使用span時，他會在本行生效。見代碼：
<span>This is span1</span> <span>This is span2</span> <div>This is div1</div> <div>This is div2</div> |
在頁面上我們會看到：
當然我們也有方法讓他們通用，通過display屬性的inline和block值來實現對方的效果
<span >This is span1</span> <span>This is span2</span> <div >This is div1</div> <div >This is div2</div> |
在頁面上我們會看到：
在一個框中包含了四個部分
margin:外邊距，代表這距離瀏覽器窗口邊的距離
border:邊框
padding: 內邊距，代表內容區域到邊框的距離
內容區域:代表文字或圖片等內容的區域大小，有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”是漂浮在中間的，這時候通過查看網頁源碼的style就能看到上面的框模型圖了～
框模型當然還有更多具體的邊距和邊框選項，針對邊距的上下左右來設置具體的值，生成不規則的四邊形，以及一些多樣化的邊框屬性，如虛線、實線、凹陷、突出等，由于我們目標是先學會這些概念，這里不再具體說明。
在了解了框模型之后，我們需要進一步來瀏覽器窗口中固定其位置，定義不同的框之間的位置關系。
| 屬性 | 說明 |
|---|---|
| position | 定義元素在頁面的定位方式 |
| left | 制定元素與最近一個具有定位設置的父對象左邊的距離 |
| right | 制定元素與最近一個具有定位設置的父對象右邊的距離 |
| top | 制定元素與最近一個具有定位設置的父對象上邊的距離 |
| bottom | 制定元素與最近一個具有定位設置的父對象下邊的距離 |
| float | 制定元素是否以及如何浮動，圖文結合時使用 |
總結：框模型加上定位功能，基本上已經覆蓋了頁面排版了，CSS的基礎知識也終于學完了，下章開始學習jQuery入門～
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
