盒子模型之邊框 border-(top/bottom/left/right)-style: solid 邊框的風格 如(solid 實線，dotted 點線，dashed 虛線) border-top-color: #aaa 邊框顏色 border-top-width: 20px 邊框粗細 邊框四個 ...
盒子模型之邊框
border-(top/bottom/left/right)-style: solid 邊框的風格 如(solid 實線，dotted 點線，dashed 虛線)
border-top-color: #aaa 邊框顏色
border-top-width: 20px 邊框粗細
邊框四個方向連寫： 如 border-color: #000
邊框屬性連寫： border-top: #555 solid 5px
四個方向邊框屬性同寫： border: 12px dashed 10px
註意： 沒有順序要求，但邊框風格也就是線型不能少
補充：
邊框合併： border-collapse: collapse
去掉邊框： border: 0 none
去掉路輪廓線： outline-style: none
盒子模型之內邊距
padding-left: 20px;
padding-right: 10px;
padding-top: 30%;
padding-bottom: 40%;
屬性連寫：
padding: 20px; 上下左右都為20px
padding: 10px 20px; 上下為10px，左右為20px
padding: 10px 20px 30px; 上內邊距為10px，左右為20px，底為30px
padding: 10px 20px 30px 40px; 上10px，右20px，下30px，左40px
註意： 給盒子指定寬高，在裡面使用padding會撐大盒子
補充： 盒子的寬度等於： 定義的寬度+邊框寬度+左右內邊距
盒子模型之外邊距
margin(與內邊距使用方法相似): margin: 20px
margin: 20px auto (auto表示自適應，個人理解就是居中)
補充： 兩個盒子垂直，上面的盒子設置下邊距。下麵的盒子設置下邊距，兩個盒子的邊距取設置邊距大的那個
解決：嵌套的盒子外邊距塌陷
當給子盒子里設置如margin-top: 10px時，父盒子相對於頂部向下移動了10px，而子盒子相對於父盒子沒有移動
兩種方法解決： 第一個是給父盒子設置一個邊框；第二個方法是給父盒子設置： overflow: hidden;(內容溢出元素框時隱藏)
補充： 行內元素可以定義左右的內外邊距，上下會被忽略；行內塊可以定義內外邊距
浮動佈局
float: left / right
特點：
元素浮動後不占據原來的位置(脫標)
浮動的盒子在一行顯示(除非邊框已經無法容納)
行內元素浮動後會轉化成行內塊元素
清除浮動的方法：
clear: left / both / right 用的最多的是clear: both
第一種方法： <div style="clear: both;"></div>
第二種方法： overflow: hidden
註意： 如果內容出了盒子，則不能使用這個方法
第三種方法： 偽元素清除浮動(推薦使用)
.clearfix:after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden; 規定元素不可見(但會占據頁面上的空間)
clear: both;
}
相容IE瀏覽器：
.clearfix{
zoom: 1;
}
