css盒模型： 外邊距 邊框 內填充 內容 盒模型分為兩種： 標準盒模型： 怪異盒模型（IE盒模型）： 邊框：border border: 10px solid blue;表示設置10像素藍色實線條的邊框 是以下三個樣式的複合語法 border-width: 10px; 設置邊框的寬度 border ...
css盒模型：
外邊距 邊框 內填充 內容
盒模型分為兩種：
標準盒模型：
怪異盒模型（IE盒模型）：
邊框：border
border: 10px solid blue;表示設置10像素藍色實線條的邊框
是以下三個樣式的複合語法
border-width: 10px; 設置邊框的寬度
border-color: blue; 設置邊框的顏色
border-style: solid; 設置邊框的樣式
solid：實線
dashed: 虛線 裝訂線
dotted: 點線
double: 雙線
如何單獨設置一個邊的邊框：
border-left:
border-right:
border-top:
border-bottom:
border-radius 設置圓角邊框 取值可以是 px % em 最大設置範圍到50% 超出則按照50%計算
參數最少可以設置一個 最多可以設置八個
border-radius: 5px 50% 50% 50% / 5px 50% 50% 50%;
前四個值代表水平方向的取值 左上 右上 右下 左下
後四個值代表垂直方向的取值
利用css邊框知識 在頁面繪製一個三角形：
需要將一個盒子寬高設置為0 然後設置四個邊框，其中三個面的邊框顏色設置成透明色，則會顯示成一個三角形
width: 0px;
height: 0px;
border-left: 200px solid transparent;
border-top: 200px solid transparent;
border-right: 200px solid transparent;
border-bottom: 200px solid #ff0;
內容： 我們所設置的寬和高 實際上指的是內容區域的寬高 （標準盒模型）
width 寬
height 高
外邊距和內填充：
padding 內填充 （內邊距/內補白） ： 表示一個元素，邊框和內容之間的距離
padding: 20px; 如果只給一個值，代表上下左右的內填充同時設置20px
padding: 20px 40px; 如果給兩個值 第一個值代表上下 第二個值代表左右
padding: 20px 40px 60px; 三個值 第一個值代表上 第二個值代表左右 第三個之代表下
padding: 20px 40px 60px 80px; 四個值分別對應 上 右 下 左 以順時針方向賦值
padding-bottom:; 單獨設置一邊的內填充 可以使用 padding-方向 來設置
margin 外邊距（外補白） 表示元素與元素之間的距離，也就是邊框以外的距離 設置的值和內填充原理一致
當設置外邊距時 如果兄弟元素之間，上下的外邊距有重合，則取最大值
去除瀏覽器預設的所有標簽的外邊距和內填充
*{
margin: 0;
padding: 0;
}
設置一個盒子在父元素寬度內水平居中
margin:0 auto;
外邊距的重合問題：
當子元素和父元素的上外邊距重合到一起時，不管給小盒子還是大盒子設置上外邊距，影響的都是大盒子，
取值取兩者的最大值
盒模型的計算：
標準盒模型 寬度計算： width + paddingleft + paddingright + borderleft + borderright + marginleft + marginright
IE盒模型 寬度計算： width + marginleft + marginright
標準盒模型 設置的 width = 實際內容的寬度
IE盒模型 設置的 width = 實際內容的寬度 + 邊框的寬度 + 內填充的寬度
兩種盒模型之間的轉換：
box-sizing:content-box; 標準
box-sizing:border-box; IE
