一，主流瀏覽器及內核 Chrome Webkit/blink IE Trident Firfox Gecko Safari Webkit Opera presto 二，css權重 ！importent Infinity（正無窮） 行間樣式 1000 id 100 class/屬性/偽類 10 標簽/ ...
一，主流瀏覽器及內核
Chrome Webkit/blink
IE Trident
Firfox Gecko
Safari Webkit
Opera presto
二，css權重
！importent Infinity（正無窮）
行間樣式 1000
id 100
class/屬性/偽類 10
標簽/為元素 1
通配符 0
css的優先順序取決於權重，權重間的進位是256.
三，行級 塊級 行級塊 元素
行級元素：1內容決定元素大小 2無法通過css改變寬高（span em a strong...）
塊級元素：1獨占一行 2可以改變寬高 （p div ul li form address...）
行級塊元素：內容決定大小 可以改變寬高 (img)
四，定位
絕對定位：absolute：脫離原來位置，以最近父級定位，如果沒有以文檔頂端定位
相對定位：relative：保留自己以前的位置，並且以自己以前位置定位
五，margin倆bug
1，margin-top塌陷：子div在父div中 子div margin-top無效，除非子div margin-top值大於父級的，而且此時還帶動父級一起移動。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background: #000000;
}
.content{
margin-left: 50px;
margin-top: 50px;/* 這句話並不會有效 */
width: 50px;
height: 50px;
background: #008000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
</html>
父級div上邊框消失了一樣，給父級加上一個上邊框可以解決（不可取），或者使用BFC（block formatting context 塊級格式化上下文）
CSS2.1中規定滿足下列CSS聲明之一的元素便會生成BFC。
- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block、table-cell、table-caption
- position的值為absolute或fixed
給父級添加如上所示就能解決此問題
2，margin合併：兩個併排塊級元素，上塊設置margin-bottom同時下塊設置margin-top。兩個只會一個有效。（值大的那個有效）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.wrapper {
margin-bottom: 50px;
/* 無效 */
width: 100px;
height: 100px;
background: #000000;
}
.content {
margin-left: 50px;
margin-top: 100px;
/* 有效 */
width: 50px;
height: 50px;
background: #008000;
}
</style>
</head>
<body>
<div class="wrapper">
</div>
<div class="content"></div>
</body>
</html>
解決：只設置一個
六，不載入css/js情況下網站能運作的一個小例子
圖片作為超鏈接時，網速不佳不能載入css，依然可以繼續操作。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a { display: block; border: 1px solid black; background: url(img/lushi.ico) 0 0 no-repeat; width: 100px; /* 第一種 */ /* height: 0px; padding-top: 100px;*/ /* 第二種*/ /* height: 100px; text-indent: 199px; white-space: nowrap; */ overflow: hidden; background-size: 100% 100%; } </style> </head> <body> <a href="https://baidu.com" target="_blank">爐石</a> </body> </html>
第一種
1，給a標簽設置塊級/行級塊 和寬。然後高度為零（此時圖片就顯示不出來）。
2，然後加上padding-top就會把圖片需要的位置頂出來（圖片可以出現在padding中），並且把超鏈接文字頂出a標簽範圍。
3，然後overflo-hidden把文字隱藏就好了。
4，當不載入css的屬性時，‘爐石’就會出現，不耽誤操作。
第二種
1，給a標簽設置塊級/行級塊 寬和高。
2，然後設置文本縮進，把‘爐石’頂出去，並設置不換行。
3，
4，
