css盒模型是定義元素周圍的間隔、尺寸、外邊距、邊框以及文字內容和邊框之間內邊距的一組屬性的集合。
示例**：
效果圖：
由此可見：外邊距margin是不可見的，如果設定了父元素的背景，就可以看到;背景色在邊框區域設定乙個不同的背景，就可以看到內邊距(padding)區域。並且盒模型是由margin(外邊界)+border(邊框)+padding(內邊距)+content(內容)構成的。
二、屬性介紹
1、margin屬性
概念：margin屬性應用於盒子外面的空間，或者是位於盒子與文件中其他元素之間的區域，或者是盒子與瀏覽器視窗之間的區域。margin長在盒子外圍的，不會對盒子本身的大小造成影響。
屬性：margin-top(上外邊界)、margin-right(右外邊界)、margin-bottom(下外邊界)、margin-left(左外邊界)
值：支援length、百分比、auto
用法：margin:10px 四周(上，右，下，左)
margin:10px 20px 上下 左右
margin:10px 20px 30px 上 左右 下
margin:10px 20px 30px 40px 上右下左
margin支援負值!!
讓子元素在父元素裡面左右居中：margin:0 auto;
margin常見的bug：
a:當父元素和子元素都沒有浮動的情況下：給第乙個子元素新增margin-top:會錯誤的把margin值加在父元素上面
例項**：
效果圖：
結論：當父元素裡的第乙個子元素(塊元素)，新增margin-top的時候，會錯誤的把margin-top的值新增給父元素(建立在當前的元素們，沒有新增邊框和浮動的前提下)
解決方法：
1、bfc 給父元素新增overflow:hidden;推薦使用
2、給父元素和子元素新增浮動屬性;
3、可以給父元素新增邊框
4、把margin改為padding
b：相鄰兩個元素上下margin會重疊，按照較大的值設定。
示例**：
.boxinner{
width: 100px;
height: 100px;
margin-bottom: 20px;
background: skyblue;
.other{
width: 50px;
height: 50px;
background: #999;
margin-top: 20px;
效果圖：
可以看出外邊距摺疊。當boxinner的下外邊距和other元素的上外邊距接觸時，外邊距發生了摺疊!，他們之間只有20px,而不是40px;
2、邊框
border屬性：用來控制盒邊框的寬度，樣式，顏色。
屬性：值(不支援百分比)常用px
border:10px solid red;
border-width:10px;
border-style:solid;
border-color:red;
線性： solid(實線) dashed(虛線) dotted(點狀線) double(雙線) none/0(沒有邊框)
給單一乙個方向新增邊框：
border-left/right/top/bottom:10px solid yellow;
邊框設定方法;
border:solid red;
border-width:;
乙個值：四周
兩個值：上下 左右
三個值：上 左右 下
四個值：上右下左
3、transparent; 代替顏色值 為 透明
4、padding屬性：內邊距是元素的內容和邊框之間的區域
用法：1:padding是新增在父元素(盒子)上的
2:padding 調整子元素在父元素裡面的位置關係
3:padding會把盒子撐大。
4：想讓盒子保持原有的大小：在寬高的基礎上減掉padding值。
5:給單一乙個方向新增padding值： padding-top/bottom/left/right:
6:padding設定方法：
padding:10px 四周
padding:10px 20px 上下 左右
padding:10px 20px 30px 上 左右 下
padding:10px 20px 30px 40px 上右下左
7：padding不會對背景圖造成影響
8：padding的值不能為負值!!!
對比padding和margin
1.padding區域是邊框內邊緣和內容外邊緣之間的區域。
2.auto關鍵字對padding屬性不起作用。
3.padding屬性不可以接受複製。
4.padding不存在內邊距摺疊，只有外邊距摺疊。
css盒模型有哪些及區別
ie盒子模型box sizing border box 怪異模式 w3c標準盒子模型box sizing content box 標準模式 預設模式 content box 這是預設樣式指定css標準。測量width和height屬性只包括的內容，但不是border,margin,或者 paddin...
CSS盒模型之屬性總結
width 屬性指定了元素內容區的寬度 height 屬性指定了元素內容區的高度。取值 長度單位 px值 百分比 參照的是其包含塊的寬度 高度 auto 瀏覽器將會為指定的元素計算並選擇乙個寬度.語法 width 200px height 200px 初始值 auto 是否是繼承屬性 否 注意 塊級...
CSS盒模型屬性詳細介紹
示例 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title document title 6 style type text css 7 8917.boxinner 22style 23head 24 body 25 di...