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