CSS 樣式介紹（三）

各種樣式屬性

• 注意：body標籤在瀏覽器中 padding有默認的值 ，ul 和 li 也有默認邊距，所以可以通過下面來設置默認的，清除元素默認內外邊距樣式

body, ul, li {
    margin: 0;
    padding: 0;
}  

* {
    margin: 0;
    padding: 0;
}   

ul {
    list-style: none; /**取消列表自帶的小點**/
}

1.邊框、內邊距、外邊距
border 屬性: border: border-width || border-style || border-color
border-style 邊框樣式屬性(邊框風格)：none 沒有邊框，默認值, solid 邊框爲單實線（最爲常用的），dashed 邊框爲虛線，dotted 邊框爲點線,double爲雙實線

div { 
    border-width: 3px;
    border-color: red;
    border-style: double;
    border-top-color: red;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: red;
    border-bottom-style: solid;
    border-top: 1px solid red; /**上邊框寬度爲1 單實線 紅色**/
    border-bottom: 1px solid red;
}

table {
    border: 1px solid red;
    border-collapse: collapse; /**表示邊框合併在一起，合併相鄰邊框**/
}

 /**cellpadding 單元格的padding爲0 ，單元格的間隔爲0**/
<table cellpadding="0" cellspacing="0"></table>

p {
    
    border-radius: 10px; /**圓角度*/
    border-radius: 50%; /**百分比圓角度*/
    border-radius: 10px 40px; /**對角線設置圓角度：左上角 和 右下角 是10px, 右上角和左下角是40px, */
    border-radius: 10px 40px 80px; /**左上角 10px, 右上角和左下角是40px,  右下角 是 80px*/
    border-radius: 10px 40px 80px 100px; /**左上角 10px, 右上角是40px, ， 右下角是80px 左下角是100；順時針*/

    padding: 10px; /**內邊距,表示上下左右內邊距*/
    padding-left: 10px; /**左內邊距，還有padding-right padding-top padding-bottom*/
    padding: 20px 30px; /**上下10px 左右30px*/
    padding: 10px 30px 50px; /**上下10px 左右30px 下50px*/
    padding: 10px 30px 50px 70; /**上 右 下 左*/

    margin-top: 100px; /**上外邊距*/ 
    margin: 10px 20px 30px 40px; /**外邊距：上 右 下 左*/
    margin: 30px; /**上右下左*/

    margin: 30px auto; /** 盒子水平居中，上下30px 左右auto(自動)  這樣可以讓塊級帶有寬度的盒子水平居中對齊*/
}

/* 注意！：我們儘量不要給行內元素指定上下的內外邊距，左右可以指定*/
/* 注意！：外邊距合併：垂直的塊級盒子，以最大的爲準*/

/*解除嵌套塊元素垂直外邊距的合併 塌陷的問題
    1.給border
    2.給padding
    3.overflow: hidden;
*/
.father {
    margin-top: 30px;
    margin-bottom: 200px;
    width: 300px;
    height: 300px;
    padding: 20px;
    /*border: 1px solid red; */
    /*padding: 1px;*/
    overflow: hidden;

    /*css3新增的box-sizing屬性*/
    /*box-sizing: content-box;*/ /**盒子大小的width+padding+border**/
    box-sizing: border-box; /** padding不會撐開盒子寬度, 盒子大小就是width**/

    /*盒子陰影*/
    box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, 0.4);
    /*box-shadow: 水平位置 垂直位置 模糊距離 陰影尺寸(影子大小) 陰影顏色 內/外陰影(默認外陰影，內陰影是inset)*/
}

.son {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-top: 40px;
}

2.計算盒子尺寸

• 外盒尺寸計算：content width + padding + border + margin
• 內盒尺寸計算：content width + padding + border
• 如果一個盒子沒有給定寬度/高度或者繼承了父親的寬度/高度，則padding不會影響盒子的大小
• box-sizing: content-box; 代表盒子大小的爲width+padding+border
• box-sizing: border-box; 代表 padding不會撐開盒子寬度, 盒子大小就是width

3.浮動 (重點)
爲什麼不用display:inline-block？
display: inline-block; 轉換行內塊元素，就可以放一行上 但是元素之間有空隙，不方便處理，所以用浮動則之間沒有間隙。

float浮動脫離標準流，標準流在地方，浮動在標準流的上方，會壓着標準流。所以浮動首先創建包含塊的概念，就是說浮動的元素總是找離它最近的父級元素對齊，但是不會超出內邊距的範圍。
浮動：如果一個盒子裏面其中第一個子元素有浮動，則其他子元素都需要浮動，這樣才能一行對齊顯示。
浮動：元素添加浮動後，元素會具有行內塊元素的特性。目的就是讓多個塊級元素在同一行顯示。

• 1.加了浮動的元素盒子是浮起來，漂浮在其他標準流盒子的上面
• 2.加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置給了標準流的盒子

特別注意：浮動的盒子需要和標準流的父級搭配使用

特別注意：如果盒子的子元素都是浮動，並且盒子沒有高度，則父親高度爲0。所以當不方便爲固定高度時，爲了讓該盒子自動撐開則用清除浮動來完成。

/clear 是清除屬性，包括 left(清除左浮動影響)、 right(清除右浮動影響) 、both(左右都清除浮動影響) 值/

• 1.額外標籤法：在浮動盒子的後面添加一個空盒子 <div style="clear: both;"></div>, 缺點：增加很多無意義標籤，所以很少用
• 2.父級添加overflow屬性方法 overflow: hidden|auto|scroll都可以實現,會觸發BFC BFC會觸發清除浮動
• 3.使用after僞元素清除浮動
• 4.使用before和after雙僞元素清除浮動，強烈推薦

/*3.使用after僞元素清除浮動*/
.clearfix:after {
    content: "."; /**內容是小點 ，儘量加,不要空，防止舊版本瀏覽器有空隙**/
    display: block;
    height: 0; /*高度爲0*/
    visibility: hidden; /*隱藏小點*/
    clear: both; /**清除浮動both**/

}

.clearfix { /**ie6.7瀏覽器清除浮動的方式**/
    *zoom: 1; /**  *代表ie6、7能識別的特殊符號，zoom就是ie6、7 清除浮動的方法，zoom會觸發 hasLayout去清除浮動*/
}

 /*4.雙僞元素清除浮動，強烈推薦*/
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.clearfix { 
    *zoom: 1;
}

span {
    background-color: purple;
    height: 100px;
    float: left; /**塊級元素和行內元素添加浮動後具有行內塊特性，span是行內元素**/
}