註意外邊距摺疊 註意外邊距摺疊 與其他大多數屬性不同，上下的垂直外邊距margin在同時存在時會發生外邊距摺疊。這意味著當一個元素的下邊緣接觸到另一個元素的上邊緣時，只會保留兩個margin值中較大的那個。解決外邊距摺疊的方法有很多種，對於初學者來說最簡單的就是所有元素只使用一個方向上的margin ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
.Parent{
width: 400px;
height: 400px;
background: #dddddd;
margin: auto;
}
.Children{
width: 50px;
height: 50px;
background: saddlebrown;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="Parent">
<div class="Children"></div>
<div class="Children"></div>
</div>
</body>
</html>
-
註意外邊距摺疊
與其他大多數屬性不同，上下的垂直外邊距margin在同時存在時會發生外邊距摺疊。這意味著當一個元素的下邊緣接觸到另一個元素的上邊緣時，只會保留兩個margin值中較大的那個。解決外邊距摺疊的方法有很多種，對於初學者來說最簡單的就是所有元素只使用一個方向上的margin，比如上下的外邊距我們統統使用margin-bottom。
-
使用flex進行佈局
-
重置元素的CSS樣式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
以上簡單粗暴，網路上已經有成熟的CSS代碼庫為我們解決瀏覽器不一致問題，例如normalize.css、minireset和ress，可以在項目中引用它們。
-
所有元素設置為Border-box
box-sizing屬性有兩個值：
-
content-box（預設） - 當我們設置一個元素的寬度或高度時，就是設置它的內容的大小。所有的padding和邊框值都不包含。例如，一個div的寬度設置為100，padding為10，於是這個元素將占用120像素（100+2*10）。
-
border-box - padding與邊框包含在元素的寬度或高度中，一個設置為width: 100px和box-sizing:
border-box的div元素，他的總寬度就是100px，無論它的內邊距和邊框有多少。
將所有元素都設置為border-box，可以更輕鬆的改變元素的大小，而不必擔心padding或者border值會將元素撐開變形或者換行顯示。
-
將圖片作為背景
-
更好的表格邊框
有很多重覆的邊框，看起來很不好看。這裡有一個快速的方法來刪除所有的雙倍邊框：border-collapse: collapse
-
更友好的註釋
-
短橫線命名
當class或者ID包含多個單詞時，應使用連字元（-），CSS不區分大小寫，因此不能使用駝峰式命名。同樣，CSS中也不建議使用下劃線連接的命名方式。
-
不要重覆設置
大多數CSS屬性的值都是從DOM樹中向上一級的元素繼承的，因此才被命名為級聯樣式表。以font屬性為例-它總是從父級繼承的，您不必為頁面上的每個元素都單獨設置。
只需將要設置的字體樣式添加到<html>或<body>元素中，然後讓它們自動向下繼承。
-
使用transform屬性來創建動畫
-
保持選擇器的低權重
ID (#id) > Class (.class) > Type (例如 header)
-
不要使用!important
-
使用AutoPrefixer達到更好的相容性
