css的盒子模型有幾種
css的盒子模型有2種，分別為：1、W3c標準的盒子模型（標準盒子模型），width和height指的是內容區域的寬度和高度；2、IE標準的盒子模型（怪異盒模型），width和height指的是內容區域、邊框、內邊距總的寬度和高度。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
盒子模型
CSS盒子模型就是在網頁設計中常用到的CSS技術所使用的一種思考模型。盒子模型（Box Modle）可以用來對元素進行佈局，包括內邊距，邊框，外邊距，和實際內容這幾個部分。
盒子中的區域
一個盒子中主要的屬性就5個：width、height、padding、border、margin。如下：
- width和height：內容的寬度、高度（不是盒子的寬度、高度）。
- padding：內邊距。
- border：邊框。
- margin：外邊距。
盒子模型的示意圖：
程式碼示範：
上面這個盒子，width:200px; height:200px; 但是真實佔有的寬高是302*302。這是因為還要加上padding、border。
注意：寬度和真實佔有寬度，不是一個概念！ 來看下面這例子。
標準盒模型與IE盒模型
盒子模型分為兩種：
第一種是W3c標準的盒子模型（標準盒模型）
第二種IE標準的盒子模型（怪異盒子模型）
我們目前所學習的知識中，以標準盒子模型為準。
標準盒子模型：
IE盒子模型：
- width和height：
- 內容的寬度、高度（不是盒子的寬度、高度）。 padding：內邊距。
- border：邊框。
- margin：外邊距。
- #在
標準盒子模型中，width 和height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但會增加元素框的總尺寸。
IE盒子模型中，width 和height 指的是內容區域border padding #的寬度和高度。
標籤也有margin
標籤有必要強調一下。很多人以為標籤佔據的是整個頁面的全部區域，其實是錯的，正確的理解是這樣的：整個網頁最大的盒子是，即瀏覽器。而是的兒子。瀏覽器給預設的margin大小是8個像素，此時佔據了整個頁面的一大部分區域，而不是全部區域。來看一段程式碼。 <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>有生之年</div>
<div>狭路相逢</div>
</body>
</html>
.box1{
width: 100px;
height: 100px;
padding: 100px;
border: 1px solid red;
}盒子2：
.box2{
width: 250px;
height: 250px;
padding: 25px;
border: 1px solid red;
}真实占有宽度 = 左border + 左padding + width + 右padding + 右border
上面这两个盒子的盒模型图如下：
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
认识padding
padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。
效果如下：
padding有四个方向
padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性的写法：
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
padding:30px 20px 40px 100px;
如果写了四个值，则顺序为：上、右、下、左。
如果只写了三个值，则顺序为：上、右、下。??和右一样。
如果只写了两个值，比如说：
padding: 30px 40px;
则顺序等价于：30px 40px 30px 40px;
要懂得，用小属性层叠大属性。比如：
padding: 20px; padding-left: 30px;
上面的padding对应盒子模型为：
下面的写法：
padding-left: 30px; padding: 20px;
第一行的小属性无效，因为被第二行的大属性层叠掉了。
（学习视频分享：css视频教程）
以上是css的盒子模型有幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap怎麼設置框架
Apr 07, 2025 pm 03:27 PM
要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
