使用width來設置盒子內容區的寬度
使用來設置盒子內容區的高度
width和只是設置的盒子內容區的大小，而不是盒子的整個大小，盒子可見框的大小由內容區，內邊距和邊框共同決定
為元素設置邊框
要為一個元素設置邊框必須指定三個樣式
-width:邊框的寬度
-color:邊框顏色
-style:邊框的樣式
使用-width可以分別指定四個邊框的寬度
如果在-width指定了四個值
則四個值會分別設置給上、右、下、左，按照順時針的方向設置的
如果指定三個值
則三個值會分別設置給上、左右、下
如果指定兩個值
則兩個值會分別設置給上下、左右
如果指定一個值，則四邊全都是該值
除了-width，CSS中還提供了四個-xxx-width
xxx的值可能是top right left
專門用來設置指定邊的寬度
* 設置邊框的顏色
* 和寬度一樣，color也提供四個方向的樣式，可以分別指定顏色
例如：-color: red;
/*-color: red blue;*/
/*-color: red ;*/
/*-color: red ;*/
格式和邊框設置顏色相同.
* 設置邊框的樣式
* 可選值：
* none，默認值，沒有邊框
* solid 實線
* 點狀邊框
* 虛線
* 雙線
*
* style也可以分別指定四個邊的邊框樣式，規則和width一致，同時它也提供-xxx-style四個樣式css盒子中內容邊框屬性，來分別設置四個邊
設置邊框
大部分的瀏覽器中，邊框的寬度和顏色都是有默認值，而邊框的樣式默認值都是none
*/
/* -width: 10px;
-color: red;
-style: solid; */
/*
- 邊框的簡寫樣式，通過它可以同時設置四個邊框的樣式，寬度，顏色
- 而且沒有任何的順序要求
- 一指定就是同時指定四個邊不能分別指定
-top -right - -left
可以單獨設置四個邊的樣式，規則和一樣，只不過它只對一個邊生效
*/
/*: red solid 10px;*/
/*-left: red solid 10px;*/
內邊距：
內邊距（），指的是盒子的內容區與盒子邊框之間的距離，一共有四個方向：
-top
-right
-
-left
內邊距會影響盒子的可見框的大小，元素的背景會延伸到內邊距
盒子的大小由內容區、內邊距和邊框共同決定
盒子可見框的寬度 = -left-width + -left + width + -right + -right-width
盒子可見框的高度 = -top-width + -top + + - + --width
*/
/*設置上內邊距*/
/*-top: 100px;*/
/*設置右內邊距*/
/*-right: 100px;
-: 100px;
-left: 100px;*/
/*
使用可以同時設置四個邊框的樣式，規則和-width一致
*/
/*: 100px;*/
/*: 100px 200px;*/
/*: 100px 200px 300px;*/
外邊距：
外邊距指的是當前盒子與其他盒子之間的距離，他不會影響可見框的大小，而是會影響到盒子的位置
盒子有四個方向的外邊距：
-top
-right
-
-left
由于頁面中的元素都是靠左靠上擺放的，所以注意當我們設置上和左外邊距時css盒子中內容邊框屬性，會導致盒子自身的位置發生改變，而如果是設置右和下外邊距會改變其他盒子的位置
*/
/*設置上外邊距，即盒子的上邊框與其他盒子的距離*/
/*-top: 100px;*/
/*左外邊距*/
/*-left: 100px;*/
/*設置右和下外邊距*/
/*-right: 100px;
-: 100px;*/
/*
外邊距也可以指定為一個負值，如果外邊距設置的是負值，則元素會向反方向移動
*/
/*-left: -100px;
-top: -100px;
-: -100px;*/
/*-: -100px;*/
/*
還可以設置為auto，auto一般只設置給水平方向的
如果只指定，左外邊距或右外邊距的為auto則會將外邊距設置為最大值
垂直方向外邊距如果設置為auto，則外邊距默認就是0
如果將left和right同時設置為auto，則會將兩側的外邊距設置為相同的值，就可以使元素自動在父元素中居中
所以我們經常將左右外邊距設置為auto，以使子元素在父元素中水平居中
*/
/*-left: auto;
-right: auto;*/
/*-top: auto;*/
/*
外邊距同樣可以使用簡寫屬性 ，可以同時設置四個方向的外邊距,規則和一樣
*/
/*: 10px 20px 30px 40px;*/
為上邊的元素設置一個下外邊距：-: 100px;
為下邊的元素設置一個上外邊距：-top: 100px;
垂直外邊距的重疊
在網頁中相鄰的垂直方向的外邊距會發生外邊距的重疊
所謂的外邊距重疊指兄弟元素之間的相鄰外邊距會取最大值而不是取和
如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素
.box3{
width: 200px;
: 100px;
-color: ;
/*為box3設置一個上邊框*/
/*-top: 1px red solid;*/
/*-top: 1px;*/
-top: 100px;
}
.box4{
width: 100px;
: 100px;
-color: ;
/*為子元素設置一個上外邊距，使子元素的位置下移*/
/*-top: 100px;*/
瀏覽器為了在頁面中沒有樣式時，也可以有一個比較好的顯示效果，所以為很多的元素都設置了一些默認的和，而它的這些默認樣式，正常情況下我們是不需要使用的。
所以我們往往在編寫樣式之前需要將瀏覽器中的默認的和統統的去掉
格式：
*{
: 0;
: 0;
}