溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css3框模型有哪些屬性”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“css3框模型有哪些屬性”文章能幫助大家解決問題。
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電腦。
盒模型又叫框模型，是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。 盒子模型（Box Modle）可以用來對元素進(jìn)行布局，包括內(nèi)邊距，邊框，外邊距，和實(shí)際內(nèi)容這幾個部分。
盒子中的區(qū)域
一個盒子中主要的屬性就5個：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é)會查看瀏覽器控制臺中的盒模型圖：
一、寬度 width
| 寬度 width屬性 | 說明 |
|---|---|
| 屬性名 | width |
| 作用 | 設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度 |
| 屬性值 | 屬性值說明 |
|---|---|
| auto（默認(rèn)值） | 瀏覽器可計(jì)算出實(shí)際的寬度 |
| px像素值 | 定義的寬度 |
| % | 定義參考父元素寬度 width 的百分比寬度 |
（1）如果一個元素不添加width 屬性，默認(rèn)屬性值為auto；不同的元素瀏覽器會根據(jù)其 特點(diǎn)自動計(jì)算出實(shí)際寬度；
例如<div>元素等獨(dú)占一行的，其 width 屬性的值會自動撐滿父元素的 width 區(qū)域；
如果是<span>元素等不需要獨(dú)占一行的，其width屬性的值是內(nèi)部元素內(nèi)容自動撐開的寬度。
（2）<body>元素比較特殊，不需要設(shè)置width屬性，寬度會自動適應(yīng)瀏覽器窗口的寬度。
二、高度 height
| 高度 height屬性 | 說明 |
|---|---|
| 屬性名 | height |
| 作用 | 設(shè)置可以添加元素內(nèi)容的區(qū)域的高度 |
| 屬性值 | 屬性值說明 |
|---|---|
| auto（默認(rèn)值） | 瀏覽器可計(jì)算出實(shí)際的高度 |
| px像素值 | 定義的高度 |
| % | 定義參考父元素高度 height 的百分比寬度 |
如果一個元素不添加
height屬性，默認(rèn)屬性值為auto，瀏覽器會自動計(jì)算出實(shí)際高度，也就是是內(nèi)部元素內(nèi)容自動撐開的高度。元素的高度自適應(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)邊距的方向不同劃分為四個方向的單一屬性 | |
| padding-top | 上內(nèi)邊距 |
| padding-right | 右內(nèi)邊距 |
| padding-bottom | 下內(nèi)邊距 |
| padding-left | 左內(nèi)邊距 |
p {padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;}
| 內(nèi)邊距 padding 屬性值 | 說明 |
|---|---|
| ②化簡書寫 | 將四個方向的單一屬性進(jìn)行合寫 |
| 可以有 1-4 個值，值之間用空格進(jìn)行分隔 | padding 有多種值的書寫表示方法 |
| 根據(jù) padding的屬性值的個數(shù)不同，有四種表示法： | |
| 四值法 | 設(shè)置四個屬性值，分配方向上、右、下、左 |
| 三值法 | 設(shè)置三個值分配給上、左右、下 |
| 二值法 | 設(shè)置兩個值，分配給上下、左右 |
| 單值法 | 設(shè)置屬性值只有一個，分配方向上右下左，四邊的值相同 |
p {padding: 10px 20px 30px 40px;}
p {padding: 10px 20px 30px;}
p {padding: 10px 20px;}
p {padding: 10px;}
四、邊框 border
| 邊框 border 屬性 | 說明 |
|---|---|
| 是一個復(fù)合屬性 | |
| 作用 | 設(shè)置的是內(nèi)邊距外面的邊界區(qū)域，作為盒子的實(shí)體化的最外層 |
| ①復(fù)合屬性值 | 由三個值組成，分為線的寬度、線的形狀、線的顏色 |
| 寬度，屬性值：常用px形式的數(shù)值 | |
| 形狀，屬性值：形狀的單詞 | |
| 顏色， 屬性值：顏色名或顏色值 | |
| 舉例 | border: 1px solid red; |
| ②單一屬性值 | |
| a.按照屬性值的類型劃分 | |
| 線寬：border-width | 屬性值：常用px形式的數(shù)值。四個方向都有邊框?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ù)邊框的方向劃分 | 每個單一屬性都必須與復(fù)合屬性 border 一致，設(shè)置三個屬性值。 |
| 上邊框：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ì)分時必須先寫方向劃分再寫類型劃分，否則屬性名錯誤 |
| 舉例 | border-top-color: #ff0; |
| border-bottom-width: 2px; |
補(bǔ)充：border-style屬性值可能性:
五、外邊距 margin
| 外邊距 margin屬性 | 說明 |
|---|---|
| 屬性名 | margin |
| 作用 | 設(shè)置的是盒子與盒子之間的距離 |
| 特點(diǎn) | 不能渲染背景 |
| 屬性值 | 常用 px 為單位的數(shù)值 |
①單一屬性：
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;
關(guān)于“css3框模型有哪些屬性”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼