1.電腦中的 1個像素的大小，相當於手機的4個像素的大小。也就是說，電腦中12px的長度，在手機中默認乘以4，爲48像素
1em = 1font-size , 1em 是相對於自身的字體大小來計算的。
顏色 rbg(255,255,255) rgb(100%,100%,100%) 值在 0-255之間，用十六進制表示： #紅色綠色藍色 #00FF00 #0F0
瀏覽器 中默認的字體大小 是 16px
字體分類（指一類字體的集合）： font-family: arial, "微軟雅黑", serif;
font-style: normal; 以及斜體 font-style: italic;
font-weight: normal; 以及 font-weight: bold;
小寫字母變成 小型的大寫字母 font-variant: small-caps;
使用 （倒數第一是font-family，倒數第二是 font-size， 這裏兩個不可少），可以一次性解析，不用解析5次。
font: small-caps italic bold 24px "微軟雅黑";
2. line-height: 20px; 字體大小font-size: 10px; 則上下各留了 5px 的距離，所以行高爲10px。
可以得出結論： 行高 = line-height 減去 font-size
font-size: 20px;
line-height: 100%; /*相對於font-size, 值爲20 * 100% = 20px;*/
line-height: 1.5; /*相對於font-size, 值爲 20 * 1.5 = 30p;*/
注意：如果使用 font: 30px "微軟雅黑"; 時 line-height會被重置爲默認值，所以line-height不能寫在 font前面
line-height: 40px; /**此句將不起作用*/
font: 30px "微軟雅黑"; /**此處line-height 被重置了*/
應該這樣寫：
font: 30px "微軟雅黑"; /**此處line-height 被重置了*/
line-height: 40px; /**寫在後面，起作用*/
或者直接：
font: 30px/40px "微軟雅黑";
3. text-transform: capitalize; 每個單詞的首字母都大寫
a 標籤的 text-decoration 的默認值是 underline, 可以使用 text-decoration: none; 去除下劃線
word-spacing 其實就是延長空格的長度
一個字默認16px, 縮進2個漢字就是 text-indent: 32px; 但如果font-size 不是16px就不是兩個漢字，於是用
text-indent: 2em;
負值 表示首行向左移動 text-indent: -2em;
用處： text-intent: -99999px; 將這段話隱藏起來（不想讓用戶看到，但又想讓搜索引擎可以搜到）
4. 盒子模型（框模型）box model ， 一直把 padding 和 margin 搞混( • ̀ω•́ )✧
邊框 3個屬性缺一不可：
border-width: 10px;
border-color: red;
border-style: solid;
其中 border-width: 10px 20px 30px 40px; 4個值： 上 右 下 左
border-width: 10px 20px 30px; 3個值： 上 右/左 下
border-width: 10px 20px; 2個值： 上/下 右/左 （可以使用 border-xxx-width 來分別設置）
border-color, border-style 也遵循上面的規律，也有 border-xxx-color; border-xxx-style.
瀏覽器默認的 border-color爲black, border-width: 3px; 但 border-style爲none，也就是如果僅僅只設置 border-style: solid; 也是能夠看到邊框的。
同時指定（沒有順序規定）： border: 10px red solid; 可以 使用 border-xxx: 10px red solid; 分別指定。
假如我只要三邊，不要右邊：
border: 10px yellow dashed;
border-right: none;
5. 外邊距 margin
現在都是相對於 左，上 ，設置 margin-top , margin-left 會改變元素自身的位置
但設置 margin-right, margin-bottom 不會改變自身位置，但會改變相鄰的元素的位置。
margin 一般只給水平方向設置 auto , 左右方向設置爲auto會將外邊距設置爲最大值， 上下方向設置爲auto,則外邊距爲0
若 margin-right 和 margin-left 同時設置爲auto，則會將兩側外邊距設置爲相同的值。
兄弟元素外邊距重疊（選最大的），例如上一個元素的margin-bottom:100px; 下一個相鄰的元素的margin-top: 200px; 則這兩個元素之間的距離爲 200px;而不是 300px;
父子元素垂直外邊距 相鄰 ，子元素的外邊距會賦值給 父元素(垂直方向)。例如子元素的 margin-top: 100px; 但未給父元素設置margin-top，但此時父元素的 margin-top也變成了100px;
6. 瀏覽器 默認 的 <body></body> 有一個 8px 的 外邊距
去除瀏覽器默認樣式
*{
margin: 0;
padding: 0;
}
7. 對於內聯元素 來說： <span>我是內容我是內容</span>, 設置 width 和 height 是不起作用的
內聯元素支持 水平方向的 外邊距 margin-left 和 margin-right , 不支持垂直方向的外邊距 margin-top，margin-bottom
display: inline; /*內聯元素，不可設置width和height*/
display：block; /*塊級元素，獨佔一行*/
display: inline-block; /*既有內聯元素特點又有塊級元素特點，即支持width和height，但不獨佔一行*/
display: none; /*隱藏， 並且不佔位置*/
visibility: hidden; /*隱藏，但佔位置*/
visibility: visible; /*默認值，顯示*/
例如 <img src="" alt=""/> 就是 inline-block ，既可以設置 寬高，又不獨佔一行。
8. 如果子元素 的 高度 超出了 父元素的高度， 則 子元素會 溢出。 這裏的 overflow: visible; 默認值，表示不對溢出部分處理，元素會在父元素以外的位置顯示。 overflow: hidden; 會把溢出部分會被修剪，不會顯示
overflow: scroll; 爲父元素添加滾動條，拖動來查看完整內容。但這個存在缺點，不管子元素有沒有超出，水平和豎直方向都會有滾動條，所以可以使用 overflow: auto; 根據需求來添加滾動條，需要水平就添加水平，需要豎直就添加豎直，不需要就不加。
9. 文檔流 ， 是網頁最底層的， 塊元素：默認寬度是父元素寬度的100%
float: none; float: left; float: right;
導航條 小練習：（這是我的一小步，更是人類的一大步(◕ᴗ◕✿)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
list-style: none;
width: 1000px;
background-color: rgb(95,145,243);
margin: 50px auto;
overflow: hidden;
}
.nav li{
float: left;
width: 25%;
}
.nav a{
display: block;
width: 100%;
text-align: center;
padding: 5px 0;
text-decoration: none;
color: white;
font-weight: bold;
}
.nav a:hover{
background-color: #cc0000;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">地址</a></li>
<li><a href="#">商品</a></li>
<li><a href="#">榜單</a></li>
</ul>
</body>
</html>
真的是很神奇啊，從
變成 ：
內聯元素 設置 width 和 height是沒有效果的，它只會被內容撐開 。
10. 清除浮動： clear: left; clear: right; clear: both; 清除對其影響最大的一邊的浮動
使用clear: both; 解決高度坍塌問題：
對於：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 5px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
給子元素添加 float: left; 造成高度坍塌
添加一個新的 <div class="clear">clear</div> , 並賦予樣式 clear: both;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 5px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear">clear</div>
</div>
</body>
</html>
它將父元素撐了起來：
如果 中間不加內容 <div class="clear"></div> ， 成功解決高度坍塌問題。
但這種方法需要 添加格外的 html , 下面使用 僞類選擇器 :after 在父元素之後用css添加html，需滿足第一是 塊級元素，第二是 清除浮動，第三是沒有內容，給該class取名爲 clearfix, 可以複用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
border: 5px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
11. 定位
position: static; 默認值，元素沒有開啓定位 relative 相對定位 absolute 絕對定位 fixed 固定定位
position:relative; 內聯元素還是內聯元素
position:absolute; 相對於 開啓了定位的祖先元素，
一般情況是 子元素position: absolute; 此時 其祖先元素開啓了 position:relative
並且內聯元素會變成塊元素
position: fixed; 固定定位，相對於瀏覽器。
z-index: 9999;
只有設置了 定位的元素，可以使用 z-index ， 對於position: static; 來說z-index設置無效。
父元素永遠都蓋不住子元素
12. 背景
background-repeat: repeat;
background-position:
這種寫法總共就九個位置：
可以具體制定位置：
background-attachment
13. 按鈕，有三張背景圖片，
.btn:link{
width: 93px;
height: 26px;
background-image: url("/img/btn.jpg");
}
.btn:hover{
background-image: url("/img/hover.jpg");
}
.btn:active{
background-image: url("/img/active.jpg");
}
會出現一種情況： 第一次點擊的時候，會閃一下，這是因爲 :hover 和 :active 只有在移到按鈕，點擊的時候才觸發樣式，此時纔會去請求獲取圖片，因此第一次會閃爍。
解決方法： 將三張圖片合成一張圖片，叫做 CSS-Sprite 雪碧圖，這樣 .btn:link 獲取一次圖片就行了，再往左移。
.btn:link{
width: 93px;
height: 26px;
background-image: url("/img/sprite.jpg");
}
.btn:hover{
background-position: -93px 0px;
}
.btn:active{
background-position: -186px 0px;
}
13. 表格
<table>
<tr>
<td colspan="2"> colspan 橫向合併單元格 </td>
<td rowspan="2"> rowspan 縱向合併單元格 </td>
</tr>
</table>
對於
<table>
<tr>
<th>編號</th> <th>姓名</th> <th>性別</th>
</tr>
<tr>
<td>0001</td> <td>why_su</td> <td>男</td>
</tr>
<tr>
<td>0002</td> <td>張三</td> <td>女</td>
</tr>
<tr>
<td>0003</td> <td>李四</td> <td>男</td>
</tr>
</table>
使用
table{
width: 300px;
margin: 0 auto;
border: 1px solid black;
}
th, td{
border: 1px solid black;
}
結果
使用 border-spacing: 0px; 可以設置 table 和 td邊框 之間的 距離
因爲兩個邊框重合，看起來像加粗效果，可以給table設置 border-collapse: collapse; 表示 邊框不重合，此時 border-spacing: 0px; 不起作用
設置 隔行變色 ， 以及 鼠標經過時更改背景顏色
tr:nth-child(even){
background-color: #bfa;
}
tr:hover{
background-color: #fba;
}
tfoot 反正都是在表格末尾，寫代碼的時候可以寫在 tbody 前面
<table>
<thead></head>
<tfoot></tfoot>
<tbody></tbody>
</table>
使用 table > tr { ... } 無法設置樣式，原因在於，如果 table 與 tr 之前沒有寫 tbody 的話，瀏覽器會默認爲其添加 tbody 標籤。
使用 tbody > tr {... } 就可以了
14， 對於
<div class="box1">
<div class="box2"></div>
</div>
設置樣式
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: #fba;
margin-top: 100px;
}
這裏使用 margin-top: 100px; 因爲子元素 和 父元素 相鄰的 垂直外邊距 會重疊，子元素的外邊距會傳遞給 父元素
可以在 兩個 div 之間加一個 <table></table> 解決（這樣就不是相鄰的了）
<div class="box1">
<table></table>
<div class="box2"></div>
</div>
用CSS的形式表示就是：
.box1:before{
content: "";
display: table;
}
可以使用如下 ： 同時 解決 父元素高度坍塌 和 父子元素相鄰垂直外邊距重疊 ：
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
15， 默認選中：checked="checked" selected="selected"
<form action="">
用戶名：<input type="text" name="username"/> <br/>
密碼：<input type="password" name="password"/> <br/>
性別：<input type="radio" name="gender" value="male" checked="checked"/>男
<input type="radio" name="gender" value="female"/>女<br/>
愛好：<input type="checkbox" name="hobby" value="dayouxi"> 打遊戲
<input type="checkbox" name="hobby" value="dushu" checked="checked"> 讀書
<input type="checkbox" name="hobby" value="xiezi" checked="checked"> 寫字<br/>
喜歡的明星：
<select name="mingxing">
<option value="huge">胡歌</option>
<option value="liushishi" selected="selected">劉詩詩</option>
<option value="zhaoliying">趙麗穎</option>
</select><br/>
<input type="submit" value="註冊">
<input type="reset" value="重置">
</form>
其中可以使用 <optgroup label=""></optgroup> 來分組
<select name="mingxing">
<optgroup label="男明星">
<option value="huge">胡歌</option>
<option value="huojianhua">霍建華</option>
</optgroup>
<optgroup label="女明星">
<option value="liushishi">劉詩詩</option>
<option value="zhaoliying">趙麗穎</option>
</optgroup>
</select>
<input type="button" value="按鈕"/>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
<button type="button">按鈕</button>
<button type="reset">重置</button>
<button type="submit">提交</button>
關於 label , 有個屬性for="id" 指向id， 當點擊 文本的時候 可以選中 組件：
性別：<input type="radio" name="gender" value="male" checked="checked" id="male"/>
<label for="male"> 男 </label>
<input type="radio" name="gender" value="female" id="female"/>
<label for="female"> 女 </label>
使用
<fieldset>
<legend>性別</legend>
</fieldset>
把上面內容給圈起來
16. 框架集 frameset 在 HTML 中不能和 <body> 合用，你要使用 <frameset>就不能使用 <body> , HTML5 廢除了 <iframe>, 使用 iframe和 frameset 的話，不能被搜索引擎搜索到。不建議使用
<frameset rows="30%,*,30%">
<frame src="1.html"></frame>
<frameset cols="50%,50%">
<frame src="1.html"></frame>
<frame src="2.html"></frame>
</frameset>
<frame src="2.html"></frame>
</frameset>
17. IE 10 以上已經不支持此寫法
<!--[if IE]>
條件Hack，IE以外瀏覽器識別爲“註釋”，並且IE10以上版本已不支持該寫法
<![endif]-->
也可以指定具體IE版本: <!--[if IE 6]> <![endif]-->
小於 指定版本才顯示，使用 lt ： <!--[if lt IE 9]> <![endif]-->
小於等於指定版本，使用 lte: <!--[if lte IE 9> <![endif]-->
大於 gt 大於等於 gte
18. 屬性 hack
我之前這麼寫過哈哈，還以爲能用的ヾ(๑╹◡╹)ﾉ"
