css盒模型。邊框和內外邊距

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