盒子概述
以下是盒子模型的乙個圖形解釋
一、內邊距（填充）
屬性有： (1) padding 設定所有內邊距
(2) padding-top 設定上邊距
(3) padding-left 設定左邊距
(4) padding-right 設定右邊距
(5) padding-bottom 設定底邊距
如果在設定時：
padding：100px 這代表四個邊距都為100px。
內邊距例子：
首先我們設定乙個div
.neibianju
內邊距
效果如下：
（6）加入左內邊距
.neibianju
然後我們在通過"開發者選項(f12)"檢視，在左邊增加了100px的內邊距
其他邊距同理
二、邊框
同樣使用上邊的**
.neibianju
border：邊框
5px: 邊框寬度為5畫素。
solid: 邊框為實線
blue：邊框顏色為藍色
下過如下圖：
邊框為藍色的
三、外邊距屬性：margin
控制塊與塊之間的距離
（1）上下外邊距會重疊
比如：上邊的塊距離下邊的塊30px，下邊的塊距離上邊的塊也30px。結果他們之間的距離不會變成60，還是30px。
例子：
（2）div能夠實現巢狀，但是子div的margin-top的屬性值會傳遞給父級div。效果就是子盒子不會離父盒子有30px。而是他們倆同時向下移動30px.
可以使用內邊距離是子盒子向下移動
注意：盡量少使用外邊距
例子：.a
.b 正常下效果如下： 將子div設定margin-top效果如下
但是在父級div上加入border:1px solid aqua;
子div的margin-top就不會傳遞給父div。不知道是什麼原因效果如下：
上邊這種情況稱之為:外邊距塌陷
首先盒子與盒子之間屬於巢狀關係
解決方式
(1)、給父盒子新增border值
但是這樣會影響盒子本身的大小。
(2)、給父盒子新增 overflow: hidden;
overflow:hidden: 觸發元素的bfc(格式化上下文)
(3)單個盒子的外邊距
：他始終都是居中的。
簡寫為：
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
CSS基礎 盒子模型
width和height指內容區域的寬度和高度 元素實際寬度 左右外邊距 左右邊框 左右內邊框 width 元素實際高度 上下外邊距 上下邊框 上下內邊距 height 定義元素的寬和高需要使用下面屬性 1 width寬度 height高度 固定的寬度和高度，當內容超出寬度和高度之後，不會自動填充擴...
（6）css盒子模型（基礎下）
一 理解多個盒子模型之間的相互關係 現在大部分的網頁都是很複雜的，原因是乙個 給人用的 網頁中是可能存在著大量的盒子，並且它們以各種關係相互影響著。html與dom的關係 詳情了解 dom dom 是 document object model 文件物件模型 的縮寫。乙個網頁的所有元素組織在一起，就...