站長資訊網(wǎng)
css3框模型有5種屬性：1、width屬性，設(shè)置內(nèi)容的寬度；2、height屬性，設(shè)置內(nèi)容的高度；3、padding屬性，設(shè)置內(nèi)邊距；4、margin屬性，設(shè)置外邊距；5、border屬性，設(shè)置邊框。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3框模型
盒模型又叫框模型，是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。 盒子模型（Box Modle）可以用來對元素進(jìn)行布局，包括內(nèi)邊距，邊框，外邊距，和實(shí)際內(nèi)容這幾個(gè)部分。
盒子中的區(qū)域
一個(gè)盒子中主要的屬性就5個(gè)：width、height、padding、border、margin。如下：
-
width和height：內(nèi)容的寬度、高度（不是盒子的寬度、高度）。
-
padding：內(nèi)邊距。
-
border：邊框。
-
margin：外邊距。
為了更好理解，如下生活中的舉例：
常見盒模型區(qū)域
盒模型的屬性中，根據(jù)不同屬性的效果，可以劃分區(qū)域：
（1）書寫元素內(nèi)容區(qū)域：width+height
（2）盒子可以實(shí)體化的區(qū)域：width+height+padding+border
（3）盒子實(shí)際占位的位置：width+height+padding+border+margin
學(xué)習(xí)過程中，學(xué)會(huì)查看瀏覽器控制臺(tái)中的盒模型圖：
一、寬度 width
| 寬度 width屬性 | 說明 |
|---|---|
| 屬性名 | width |
| 作用 | 設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度 |
| 屬性值 | 屬性值說明 |
|---|---|
| auto（默認(rèn)值） | 瀏覽器可計(jì)算出實(shí)際的寬度 |
| px像素值 | 定義的寬度 |
| % | 定義參考父元素寬度 width 的百分比寬度 |
特殊應(yīng)用
（1）如果一個(gè)元素不添加width 屬性，默認(rèn)屬性值為auto；不同的元素瀏覽器會(huì)根據(jù)其 特點(diǎn)自動(dòng)計(jì)算出實(shí)際寬度；
例如<div>元素等獨(dú)占一行的，其 width 屬性的值會(huì)自動(dòng)撐滿父元素的 width 區(qū)域；
如果是<span>元素等不需要獨(dú)占一行的，其width屬性的值是內(nèi)部元素內(nèi)容自動(dòng)撐開的寬度。
（2）<body>元素比較特殊，不需要設(shè)置width屬性，寬度會(huì)自動(dòng)適應(yīng)瀏覽器窗口的寬度。
二、高度 height
| 高度 height屬性 | 說明 |
|---|---|
| 屬性名 | height |
| 作用 | 設(shè)置可以添加元素內(nèi)容的區(qū)域的高度 |
| 屬性值 | 屬性值說明 |
|---|---|
| auto（默認(rèn)值） | 瀏覽器可計(jì)算出實(shí)際的高度 |
| px像素值 | 定義的高度 |
| % | 定義參考父元素高度 height 的百分比寬度 |
特殊應(yīng)用
如果一個(gè)元素不添加
height屬性，默認(rèn)屬性值為auto，瀏覽器會(huì)自動(dòng)計(jì)算出實(shí)際高度，也就是是內(nèi)部元素內(nèi)容自動(dòng)撐開的高度。元素的高度自適應(yīng)內(nèi)部內(nèi)容的高度。
三、內(nèi)邊距 padding
| 內(nèi)邊距 padding屬性 | 說明 |
|---|---|
| 屬性名 | padding |
| 作用 | 設(shè)置的是元素的邊框內(nèi)部到寬高區(qū)域之間的距離 |
| 特點(diǎn) | 可以去加載背景，不能書寫嵌套的內(nèi)容 |
| 內(nèi)邊距 padding 屬性值 | 說明 |
|---|---|
| 常用px為單位的數(shù)值 | |
| ①可以根據(jù)內(nèi)邊距的方向不同劃分為四個(gè)方向的單一屬性 | |
| padding-top | 上內(nèi)邊距 |
| padding-right | 右內(nèi)邊距 |
| padding-bottom | 下內(nèi)邊距 |
| padding-left | 左內(nèi)邊距 |
padding四個(gè)方向單一屬性示例：
p {padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;}
| 內(nèi)邊距 padding 屬性值 | 說明 |
|---|---|
| ②化簡書寫 | 將四個(gè)方向的單一屬性進(jìn)行合寫 |
| 可以有 1-4 個(gè)值，值之間用空格進(jìn)行分隔 | padding 有多種值的書寫表示方法 |
| 根據(jù) padding的屬性值的個(gè)數(shù)不同，有四種表示法： | |
| 四值法 | 設(shè)置四個(gè)屬性值，分配方向上、右、下、左 |
| 三值法 | 設(shè)置三個(gè)值分配給上、左右、下 |
| 二值法 | 設(shè)置兩個(gè)值，分配給上下、左右 |
| 單值法 | 設(shè)置屬性值只有一個(gè)，分配方向上右下左，四邊的值相同 |
padding四值法示例：
p {padding: 10px 20px 30px 40px;}
padding三值法示例：
p {padding: 10px 20px 30px;}
padding二值法示例：
p {padding: 10px 20px;}
padding單值法示例：
p {padding: 10px;}
四、邊框 border
| 邊框 border 屬性 | 說明 |
|---|---|
| 是一個(gè)復(fù)合屬性 | |
| 作用 | 設(shè)置的是內(nèi)邊距外面的邊界區(qū)域，作為盒子的實(shí)體化的最外層 |
| ①復(fù)合屬性值 | 由三個(gè)值組成，分為線的寬度、線的形狀、線的顏色 |
| 寬度，屬性值：常用px形式的數(shù)值 | |
| 形狀，屬性值：形狀的單詞 | |
| 顏色， 屬性值：顏色名或顏色值 | |
| 舉例 | border: 1px solid red; |
| ②單一屬性值 | |
| a.按照屬性值的類型劃分 | |
| 線寬：border-width | 屬性值：常用px形式的數(shù)值。四個(gè)方向都有邊框?qū)挾龋瑢傩灾殿愃朴?padding，也有四種值的寫法。舉例：border-width：1px 2px 3px 4px; |
| 線型：border-style | 屬性值：形狀的單詞。詳細(xì)常見屬性值見下方補(bǔ)充；總體也是類似 padding 的綜合屬性寫法。舉例：border-style: solid; |
| 顏色：border-color | 屬性值：顏色名或顏色值?？傮w也是類似 padding 的綜合屬性寫法。舉例：border-color: #00f #f00 #0f0 #ff0; |
| b.根據(jù)邊框的方向劃分 | 每個(gè)單一屬性都必須與復(fù)合屬性 border 一致，設(shè)置三個(gè)屬性值。 |
| 上邊框：border-top | 舉例： border-top： 1px solid blue; |
| 右邊框：border-right | 舉例： border-right： 1px solid blue; |
| 下邊框：border-bottom | 舉例： border-bottom： 1px solid blue; |
| 左邊框：border-left | 舉例： border-left： 1px solid blue; |
| c.根據(jù)方向和類型，進(jìn)一步細(xì)分 | border-方向-類型 |
| 注意 | 細(xì)分時(shí)必須先寫方向劃分再寫類型劃分，否則屬性名錯(cuò)誤 |
| 舉例 | border-top-color: #ff0; |
| border-bottom-width: 2px; |
補(bǔ)充：border-style屬性值可能性:
五、外邊距 margin
| 外邊距 margin屬性 | 說明 |
|---|---|
| 屬性名 | margin |
| 作用 | 設(shè)置的是盒子與盒子之間的距離 |
| 特點(diǎn) | 不能渲染背景 |
| 屬性值 | 常用 px 為單位的數(shù)值 |
外邊距的設(shè)置方式與內(nèi)邊距 padding 一模一樣的：
①單一屬性：
p { margin‐top: 20px; margin‐right: 20px; margin‐left: 20px; margin‐bottom: 10px; }
②綜合寫法：
四值法 margin: 10px 20px 30px 40px;
三值法 margin: 10px 20px 30px;
二值法 margin: 10px 20px;
單值法 margin: 10px;
（學(xué)習(xí)視頻分享：css視頻教程）
