一.盒子模型（框模型/box model）
1.盒子簡介：在CSS處理網頁時，它認為每個元素都包含在一個不可見的盒子里，那么網頁布局就相當于擺放盒子
2.盒子模型組成部分：
內容區（）
內邊距（）
外框（）
外邊距（）
CSS框模型概述
二.盒子模型——邊框
1.box的寬高可以用width和來設置
注意，width和只是設置盒子內容區大小，而不是盒子的整個大小，盒子可見框的大小由內容區，內邊距和邊框共同決定。因此計算盒子大小=內容區+邊框+內邊距
2.為元素設置邊框
要為一個元素設置紅邊框必須指定三個樣式（缺一不可）
-width：邊框的寬度
-color：邊框的顏色
-style：邊框的樣式
元素邊框
1）設置邊框的寬度
使用-width可以分別指定四個邊框的寬度。
如果在-width制定了四個值，則四個值會分別設置給上右下左css盒子中內容邊框屬性，按照順時針的方向設置的。
例如，-width：10px 20px 30px 40px；
如果指定三個值，則三個值會分別設置給 上 左右 下
例如，-width：10px 20px 30px ；
如果當指定兩個值，則兩個值會分別設置給上下 左右
例如，-width：10px 20px ；
如果當指定一個值，則四邊全都是該值
例如，-width：10px ；
這個規律同時適用于-color / style
-color：
除了-width，CSS中還提供了四個-xxx-width
xxx的值可能是top right left ，專門用來設置指定邊的寬度。
-xxx-width
2）設置邊框的顏色
和寬度一樣，color也提供四個方向的樣式，可以分別指定顏色。例如，-xxx-color
3）設置邊框的樣式
style也可以分別指定4個邊的邊框樣式，規則和width一樣，同時它也提供-xxx-style四個樣式，來分別設置四個邊。
-style
三.邊框簡寫屬性
的邊框樣式簡寫方式，通過它可以同時設置四個邊框的樣式，寬度，顏色，而且沒有任何的順序要求。但是！一指定就是同時指定四個邊不能分別指定。
: 10px red solid;
-xxx ，例如-top -right - -left
可以單獨設置四個邊的樣式，規則和一樣，只不過他只對一個邊生效。
order: 10px red solid;
-right: none;
四.內邊距
內邊距（），指的是盒子的內容區域盒子邊框之間的距離。
一共有四個方向的內邊距，可以通過：
-top
-right
-left
-
來設置四個方向的內邊距
內邊距會影響盒子的可見框的大小，元素的背景會延伸到內邊距。
盒子的大小由內容區、內邊距和邊框共同決定。
盒子可見框的寬度=-left-width + -left + width + -right + -right-width
可見框的高度=-top-width + -top + + - + --width
使用可以同時設置四個邊框的樣式，規則和-width一致
例如，
：100px ；
：100px 200px；
內邊距
五.外邊距
外邊距指的是當前盒子與其他盒子之間的距離css盒子中內容邊框屬性，他不會影響可見框的大小，而是會影響到盒子的位置。
盒子有四個方向的外邊距：
-top
-
-
-left
例如，設置box的外邊距，盒子上邊框和其他的盒子的距離
-top：100px；
由于頁面中的元素都是靠左上擺放的，所以注意當我們設置上和左外邊距時，會導致盒子自身的位置發生改變。
而如果是設置右和下外邊距會改變其他盒子的位置
外邊距
外邊距也可以指定一個負值，如果外邊距設置的是負值，則元素會向反方向移動
還可以設置為auto，auto一般只設置給水平方向的
如果只指定，左外邊距或者右外邊距的為auto則會將外邊距設置為最大值
垂直方向外邊距如果設置為auto，則外邊距默認就是0
如果將left和right同時設置為auto，則會將兩側的外邊距設置為相同的值，就可以使元素自動在父元素中居中，所以我們經常將左右外邊距設置為auto，以使元素在父元素中水平居中。
同時，外邊距同樣可以使用簡寫屬性，可以同時設置四個方向的外邊距，規則和一樣。
例如，：10px 20px 30px 40px；
有時還會，：0 auto；