溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Css中盒子模型是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
網(wǎng)頁(yè)設(shè)計(jì)中常用的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物--盒子作一個(gè)比喻來(lái)理解，所以叫它盒子模式。
CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。
1.width(寬度)
2.height（高度）
3.Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
4.Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
5.Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
6.Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。
總寬度 = 寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距。
總高度 = 高度 + 頂部填充 + 底部填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距。
代碼與效果演示：
代碼部分如下：
<head><meta charset="utf-8"><title>盒子模型</title><style type="text/css">
不作聲明時(shí)，網(wǎng)頁(yè)默認(rèn)的有margin和padding，可以通過(guò)以下代碼去除掉網(wǎng)頁(yè)中默認(rèn)的margin和padding。
代碼演示如下：
<style>
直接寫上 padding:20px; 的話默認(rèn)的是上下左右都是 20px ；
當(dāng)padding:10px 20px ;設(shè)為兩個(gè)值的時(shí)候，第一個(gè)表示上下，第二值表示左右；
當(dāng)padding:10px 20px 30px 設(shè)置為三個(gè)值的時(shí)候，第一個(gè)值表示上 第二個(gè)值表示左右，第三個(gè)值表示下；
四個(gè)值的時(shí)候，采用上右下左。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Css中盒子模型是什么”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
