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