CSS盒子模型
css盒子模型 由 邊框 border， 外邊距 margin ，內邊距 padding ，和實際內容組成
（1）邊框 border
border： 1px solid black; // 第一個參數1px指的是邊框的粗細，第二個參數solid指的是邊框的樣式：實線
第三個參數指的是邊框的顏色
border : 1px dashed black; //虛線
border: 1px dotted black; //點線
（2）外邊距 margin （外邊距指的是元素邊框與相鄰元素之間的距離）
外邊距的一個重要作用，使塊級盒子水平居中對齊。要求：1.塊級盒子必須指定寬度 2.盒子左右外邊距設置為auto。 最常見的做法： margin : 0 auto; 上下外邊距設置為0，左右外邊距設置為 auto
一個常見的問題，當塊級盒子B位於塊級盒子A當中時，是無法通過設置外邊距margin來實現塊級盒子B的下移的，要想解決這個問題，可以給A設置一個border（或者border-top 上邊框）即可。
（3） 內邊距 padding
首先要明確一點，邊框border是有寬度的，當你設置了一個寬度為100px，高度為100px的div盒子，如果你為其添加了一個寬度為1px的邊框，那么它的實際寬度，高度就會變成101px。而外邊距margin指的是該元素的邊框與其他元素的距離，無論你如何調整margin，該元素 本身的寬度和高度是不會發生變化的。 而內邊距指的是盒子中的內容與盒子的邊框的距離，而內邊距會撐開盒子！！！
padding : 5px; //上下左右的內邊距都為5px
padding: 5px 10px 15px 30px; // 第一個參數是上方內邊距 為5px， 第二個參數是右邊內邊距，第三個參數是下方內邊距，第四個參數是左邊內邊距 ，順序是一個順時針，上右下左
（4）消除內外邊距 （重要）
網頁元素很多都有着默認的內外邊距，而且不同瀏覽器的默認格式也不一致，所以在 布局前要清除網頁元素的內外邊距
* {
padding:0;
margin:0;
}
補充一個小知識點，去除 li 前面的項目符號（小圓點）
list-style:none;
