1. 引用下曹劉陽寫的《編寫高質量代碼-web前端開發修煉之道》一書中看到的一句話：
position：absolute和float會隱式地改變display類型，不論之前什麼類型的元素（display:none除外），
只要設置了position：absolute、 float中任意一個，都會讓元素以display:inline-block的方式顯示：可以設置長寬，默認寬度並不佔滿父元素
以span爲例子，如何讓元素變爲inline-block。
<!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>
</head>
<body>
<span style="height:100px;width:200px;background:yellowgreen">normal span, width and height doesn't work.</span>
<br>
<br>
<span style="height:100px;width:200px;background:pink;position:absolute">span with position:absolute, width and
height work.</span>
<br>
<br>
<br>
<br>
<br>
<span style="height:100px;width:200px;background:orange;float:left">span with float:left, width and height
work.</span>
<br>
<br>
<br>
<br>
<br>
<div style="display: flex">
<span style="height:100px;width:200px;background:gold;">span's father with display:flex, width and height
work.</span>
</div>
<br>
<span style="height:100px;width:200px;background:deeppink;position:fixed">span with position:fixed, width and height
work.</span>
</body>
</html>
2. Fixed未解之謎
<!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>
body{
margin: 0;
padding: 0;
}
.box1{
width: 100%;
position: fixed;
height:80px;
background: yellowgreen;
}
p{
margin:30px;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by
Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections
1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
<p style="color:red">去掉段落，box1沒有top margin， 加上段落後，就會出現top margin，margin來自於p的margin Why</p>
<p>生成絕對定位的元素，相對於瀏覽器窗口進行定位。這不對啊</p>
</body>
</html>
3. background-size 詳述
contain:自由伸展，直到有一邊貼邊。 包含，但是會有富裕
cover: 等比例覆蓋，沒有空白，圖片會有顯示不到的地方。
percentage: X% Y% 寬高均參考父元素。
length：具體數值。只給一個值，另外一個值爲auto， 50% （auto）, auto 50%, background-size默認情況是（auto auto），使用圖片自己本身的尺寸。
4. background 的image居中 可以使用background-position:50% 50%
5. 設置多個相同元素間隔，可以使用margin-left/right