CSS 學習（3）
CSS 學習（3）
盒子模型
盒子的組成
border邊框，content內容，padding內邊距，margin外邊距。
邊框（border）
border-with：邊框的粗細（一般情況下使用px為單位），未指定邊框樣式沒法顯示。
border-style：邊框的樣式（solid實線，dashed虛線，dotted點線）。
border-color：邊框的顏色。
複合性寫法：border：1px solid red；（三個屬性可以不分順序）
邊框4條邊分開寫：border-top，border-bottom，border-left，border-right
用css替換原先html程式碼：
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500px" height="249"> <thead> <tr> <th>名稱</th> <th>價格</th> </tr> </thead> <tbody> <tr> <td>蘋果</td> <td>10</td> </tr> </tbody> </table>
<style>
table {
width: 500px;
height: 249px;
}
table,
td,
th {
border: 1px solid pink;
/* 合併相鄰邊框 */
border-collapse: collapse;
}
</style>
邊框會影響盒子的實際大小，盒子實際的大小=邊框大小+原本盒子大小。
內邊距（padding）
padding-left，padding-right，padding-top，padding-bottom設定邊框和內容的間隔。
複合寫法：
- padding:5px;代表上下左右都有5px
- padding:5px 10px;代表上下時5px，左右時10px
- padding:5px 10px 20px;代表上5px，左右10px，下20px
- Padding:5px 10px 20px 30px;代表上5px右10px下20px左30px（順時針）
內邊距也會影響盒子的大小，盒子實際大小=內邊距大小+原本盒子大小
如果盒子未指定width/height（繼承父親的width/height也算未指定），那麼padding就不會撐大盒子。
外邊距（margin）
margin-left，margin-right，margin-top，margin-bottom設定盒子和盒子之間的距離
複合寫法和padding一樣。
塊級元素水平居中的方法：塊級盒子設定width，然後使用margin: 0 auto;便可以實現塊級盒子水平居中。
行內元素水平居中的話讓其父親新增：text-align:center;
相鄰塊元素垂直合併問題
上下兩個塊級元素上面有一個margin-bottom下面有一個margin-top，則兩個塊級元素間的外邊距取最大的那個值，而不是相加後的值。
解決方法：上下塊級元素只新增一個外邊距。
父元素的塌陷問題
對於兩個巢狀關係（父子關係）的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值。
解決方法：
- 可以為父元素定義上邊框
- 可以為父元素定義上內邊距
- 可以為副元素新增overflow：hidden（推薦）
清除盒子的內外邊距
網頁元素可能帶有預設的內外邊距。
* {
margin: 0;
padding: 0;
}
行內元素比較特殊，為了照顧相容性，儘量設定左右內外邊距，不要設定上下內外邊距。但轉換為塊級和行內塊元素就可以了。
圓角矩形（CSS3新增）
border-radius：length設定成圓角邊框。
半徑為length的圓放四個角落。
length可以是畫素也可以是百分數。
如果要設定四個角為不同的圓角，則可以寫為border-radius：10px 20px 30px 40px;分別表示左上、右上、右下、左下。
如果設定單獨的一個角：border-top-left-radius
盒子陰影（CSS3新增）
box-shadow：h-shadow（水平陰影位置，必須） v-shadow（垂直陰影位置，必須） blur（模糊距離，影子的虛實程度） spread（陰影尺寸，影子的大小） color（陰影顏色） inset（外部陰影改為內部陰影）;
文字陰影（CSS3新增）
text-shadow：h-shadow v-shadow blur color;
CSS浮動
網頁的三種傳統佈局方式：
- 普通流（標準流/文件流）：塊級元素和行內元素按找規定排序
- 浮動
- 定位
浮動（float）
浮動可以改變元素的預設排序方式，float屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。
一般使用標準流的父元素排列上下佈局，然後使用浮動元素在父元素中排列左右的佈局。多個塊級元素總想排列找標準流，多個塊級元素橫向排列找浮動。
float {float:屬性值} （屬性值：none，left，right）
浮動特性
- 浮動元素會脫離標準流（脫離標準流的控制（浮）移動到指定位置（動），（俗稱脫標），不再保留原先的位置，浮動只會壓住後面的標準流 ）
- 浮動的元素會一行內顯示並且元素頂部對齊
- 浮動的元素會具有行內塊元素的特性
清除浮動
清除浮動的本質是清除浮動元素造成的影響，清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。
選擇器{clear：屬性值；}
left:不允許左側有浮動元素
right：不允許右側有浮動元素
both：同時清除左右兩側浮動的影響
清除浮動的方法：
- 額外標籤法也稱為隔牆法，是W3C推薦的做法
- 父級新增overflow屬性
- 父級新增after偽元素
- 父級新增雙偽元素
/* 方法一：在浮動元素的最後再新增一個額外元素（必須是塊級元素），使用clear: both */
.clear {
clear: both;
}
/* 方法二：給父元素新增程式碼 */
.father {
/* 清除浮動，其中的值為hidden、auto、scroll都可以 */
overflow: hidden;
}
/* 方法三： 給父元素新增程式碼（是隔牆法的升級版，由css生成了額外元素）*/
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
/* 相容IE6和IE7 */
*zoom: 1;
}
/* 方法四：給父元素新增程式碼 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
需要清除浮動的情況：
- 父級沒高度。
- 子盒子浮動了。
- 影響下面佈局了，我們就應該清除浮動了。