學習要點：
1.元素尺寸
2.元素內邊距
3.元素外邊距
4.處理溢位
主講教師：李炎恢
本章主要** html5 中 css 盒模型，學習怎樣了解元素的外觀配置以及文件的整體布局。
一．元素尺寸
css 盒模型中最基礎的就是設定乙個元素的尺寸大小。有三組樣式來配置乙個元素的尺寸大小，樣式表如下：
屬性
值
說明
css 版本
width
auto、長度值或百分比
設定元素的寬度
1height
auto、長度值或百分比
設定元素的高度
1min-width
auto、長度值或百分比
設定元素最小寬度
2min-height
auto、長度值或百分比
設定元素最小高度
2max-width
auto、長度值或百分比
設定元素最大寬度
2max-height
auto、長度值或百分比
設定元素最大高度
2//設定元素尺寸
div解釋：設定元素的固定尺寸。
//限制元素尺寸
div解釋：這一組主要是應對可能動態產生元素尺寸變大變小的問題，從而限制它最大和最小的值。
//auto 自適應
div解釋：auto 是預設值，width 在 auto 下是 100%的值；height 在 auto 下是自適應。
//百分比方式
#a #b
<解釋：百分比就是相對于父元素長度來衡定的。div
id="a"
>
<
div
id="b"
>
我是 html5
div>
div>
二．元素內邊距
css 盒模型中可以設定元素內部邊緣填充空白的大小，我們成為內邊距。樣式表如下：
屬性
值
說明
css 版本
padding-top
長度值或百分比
設定頂部內邊距
1padding-bottom
長度值或百分比
設定底部內邊距
1padding-left
長度值或百分比
設定左邊內邊距
1padding-right
長度值或百分比
設定右邊內邊距
1padding
1 ~ 4 個長度值或百分比
簡寫屬性
1//設定四個內邊距
div//簡寫形式，分別為上 10px、右 10px、下 10px、左 10px
div//簡寫形式，分別為上 10px，左右 50px，下 200px
div//簡寫形式，分別是上下 10px，左右 20px
div//簡寫形式：上下左右均 10px
div三．元素外邊距css 盒模型中可以設定元素外部邊緣填充空白的大小，我們成為外邊距。樣式表如下：
屬性
值
說明
css 版本
margin-top
長度值或百分比
設定頂部內邊距
1margin-bottom
長度值或百分比
設定底部內邊距
1margin-left
長度值或百分比
設定左邊內邊距
1margin-right
長度值或百分比
設定右邊內邊距
1margin
1 ~ 4 長度值或百分比
簡寫屬性
1//設定四個內邊距
div//簡寫形式，分別為上 10px、右 10px、下 10px、左 10px
div//簡寫形式，分別為上 10px，左右 50px，下 200px
div//簡寫形式，分別是上下 10px，左邊 20px
div//簡寫形式：上下左右均 10px
div四．處理溢位當設定了元素固定尺寸且內容過大時，就會出現溢位的問題。溢位主要朝兩個方向：右側和底部。我們可以通過 overflow 系列樣式來控制它。
//設定溢位為 auto 值
div
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
CSS 盒模型和怪異盒模型
盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係,css定義所有元素都可以擁有像盒子一樣的外形和平面空間,即都包含內容區,補白 填充,內邊距 邊框,邊界 外邊距 下面說明了盒子模型 盒模型又分為標準盒模型 w3c標準 和怪異盒模型 ie盒模型 標準盒模型與ie盒模型的區別在於寬高...
css盒模型組成
css盒模型是本節教程的重點。前面幾個知識點，如果您會用 布局的話，就非常好理解和掌握了。這裡的盒模型是和table布局的乙個不同點。學 習web標準，首先要弄懂的就是這個盒模型，這就是div排版的核心所在。傳統的 排版是通過大小不一的 和 巢狀來定位排版網頁內容，改用css 排版後，就是通過由cs...