示例**：
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<
div
class
>
26<
div
class
="boxinner"
>
div>
27div
>
28body
>
29html
>
由此可見：外邊距margin是不可見的，如果設定了父元素的背景，就可以看到；背景色在邊框區域設定乙個不同的背景，就可以看到內邊距（padding）區域。並且盒模型是由margin（外邊界）+border（邊框）+padding（內邊距）+content（內容）構成的。
概念：margin屬性應用於盒子外面的空間，或者是位於盒子與文件中其他元素之間的區域，或者是盒子與瀏覽器視窗之間的區域。margin長在盒子外圍的，不會對盒子本身的大小造成影響。
屬性：margin-top(上外邊界)、margin-right(右外邊界)、margin-bottom(下外邊界)、margin-left(左外邊界)
值：支援length、百分比、auto
用法：margin設定方法：
1: margin:10px 四周(上，右，下，左)
2: margin:10px 20px 上下 左右
3: margin:10px 20px 30px 上 左右 下
4:margin:10px 20px 30px 40px 上右下左
5:margin支援負值！！
6:讓子元素在父元素裡面左右居中：margin:0 auto;
7:margin常見的bug:
例項**：
1效果如圖：doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>document
title
>
6<
style
type
="text/css"
>7*
8914.boxinner
20.other
26style
>
27head
>
28<
body
>
29<
div
class
>
30<
div
class
="boxinner"
>
div>
31<
div
class
="other"
>
div>
32div
>
33body
>
34html
>
結論：當父元素裡的第乙個子元素（塊元素），新增margin-top的時候，會錯誤的把margin-top的值新增給父元素（建立在當前的元素們，沒有新增邊框和浮動的前提下）bfc 給父元素新增overflow:hidden;推薦使用
給父元素和子元素新增浮動屬性；
可以給父元素新增邊框
把margin改為padding
示例**：
1效果圖：.boxinner
7.other
13style
>
14head
>
15<
body
>
16<
div
class
>
17<
div
class
="boxinner"
>
div>
18<
div
class
="other"
>
div>
19div
>
20body
>
21html
>
1.border屬性：用來控制盒邊框的寬度，樣式，顏色。
屬性：值（不支援百分比）常用px
border:10px solid red;
border-width:10px;
border-style:solid;
border-color:red;
1:線性： solid(實線) dashed(虛線) dotted(點狀線) double(雙線) none/0(沒有邊框)
2：給單一乙個方向新增邊框：
border-left/right/top/bottom:10px solid yellow;
3:邊框設定方法;
border:solid red;
border-width:;
乙個值：四周
兩個值：上下 左右
三個值：上 左右 下
四個值：上右下左
4:transparent; 代替顏色值 為 透明
用法：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的值不能為負值！！！
1.padding區域是邊框內邊緣和內容外邊緣之間的區域。
2.auto關鍵字對padding屬性不起作用。
3.padding屬性不可以接受複製。
4.padding不存在內邊距摺疊，只有外邊距摺疊。
介紹CSS盒模型
每個html標記都可看作乙個盒子 每個盒子都有 內容 content 填充 padding 邊框 border 邊界 margin 四個屬性 每個屬性都包括四個部分 上 右 下 左 這四部分可同時設定，也可分別設定 內容是盒子模型的中心，它呈現了盒子的主要資訊。內容有三個屬性，width heigh...
CSS盒模型之屬性總結
width 屬性指定了元素內容區的寬度 height 屬性指定了元素內容區的高度。取值 長度單位 px值 百分比 參照的是其包含塊的寬度 高度 auto 瀏覽器將會為指定的元素計算並選擇乙個寬度.語法 width 200px height 200px 初始值 auto 是否是繼承屬性 否 注意 塊級...
css盒模型有哪些屬性
css盒模型是定義元素周圍的間隔 尺寸 外邊距 邊框以及文字內容和邊框之間內邊距的一組屬性的集合。示例 效果圖 由此可見 外邊距margin是不可見的，如果設定了父元素的背景，就可以看到 背景色在邊框區域設定乙個不同的背景，就可以看到內邊距 padding 區域。並且盒模型是由margin 外邊界 ...