一、書寫css樣式：

1.優先寫位置---使元素脫離文件流的功能

2.再寫寬高內外邊距等---合模型的內容

3.背景顏色，樣式

4.css3的動畫轉換等效果

目的：瀏覽器在解析時先重拍再重繪，先寫位置可以先確定位置再排版，最後新增附屬樣式可以修飾。

二、常見標籤的一些用法

a標籤的作用：

1.超連結

2.錨點  常見用法：側邊導航欄固定，通過錨點跳轉到指定id的模組<a href="#id"></a>

3.打電話  <a href="tel:12345678901"></a> 移動端用這個可以自動呼叫手機進行電話撥打

4.協議限定符 <a href="javascript:void(0)"></a> 消除跳轉功能，void(0)可換成需要執行的js程式碼

input的placeholder的原生實現

<input type="text" onblur="if(this.value=='')this.value='招聘季月薪10000+'" onfocus="if(this.value=='招聘季月薪10000+')this.value=''">
//可以通過失去焦點，得到焦點修改classname來修改文字的顏色

三、選擇器權重問題

！important > 行間樣式 > id > class | 屬性選擇器 | 偽類 > 標籤選擇器 | 偽元素選擇器 > 萬用字元

   Infinite           1000       100                    10                                       1                             0 

權重進位制是256進位制，也就是這個10是256個1；

瀏覽器在遍歷選擇器時時從最後的葉子開始向樹根遍歷，效率高（div p span i）---從i到span到p到div去找符合的路徑；

四、碎的知識點

1.font-size設定的是高！！不然同一行的字有高有低多醜。font-style可以去掉斜體。

2.px是相對單位，em是相對單位（根據不同設定的屬性，相對對應的屬性）

div{
  text-indent:2em;//2個文字的高度（font-size的兩倍）
   line-height:1.2em;//(height的1.2倍)
}

span{
     text-decoration：line-through;//字的中劃線

   text-decoration：overline;//字的上劃線
   text-decoration：underline;//字的下劃線
}

3.行級元素和塊元素

行元素：內容決定元素所佔位置，不可通過改變寬高，只能包含行元素（a不能包含a）

span strong em a del  

塊元素：獨佔一行，可以通過css改變寬高，塊元素可以包含任何元素（p元素不能包含塊元素）

div p ul li form address

行級塊元素：內容決定大小，可以通過css改寬高，行級塊元素裡面有文字時，後面的文字會和裡面的文字底部對齊，否則會和行級塊元素底部對齊。vertical-align可以通過設定畫素值微調到需要的對齊地方。

img

凡是帶inline的元素（inline inline-block）都有文字特性，標籤空格或者換行會和文字一樣會有間隔（4px）

例如：許多img在一起會有空白間隔就是因為Img是inline-block。解決方法：不要換行，專案上線肯定會壓縮，其他處理方式多半會有問題，遲早壓縮，直接就別換行。

4.層模型：

position:absolute---相對於最近的有定位的父級，沒有的話，相對文件定位。脫離原來位置進行定位（到新的一層）

position:relative---相對於自己定位，保留原來位置（其他元素到不了該位置，始終佔據原先位置）到新層

z-index只在position的時候有效，另外到新的層是每個元素都會有新的層，float是所有元素到同一層。

5.元素居中方式：

div{
   position:absolute;
   top:50%;
   left:50%;
   height:100px;
   width:100px;
   margin-left:-50px;
   margin-right:-50px;
}

6.兩欄佈局---只知道一欄的width

注意:html中要先寫right，因為left一旦出現，會佔據整行，再調整定位，不設定top的情況下只會在當前出生行右側定位。

*{ margin: 0; padding: 0; } div.left { height: 50px; margin-right: 100px; background: red; } div.right { position: absolute; right: 0; width: 100px; height: 50px; background: green; }

7.margin塌陷

父子元素同時設定同方向上的margin只會採用大的並且只在父級上有效。

解決方法：父級觸發bfc---會改變盒子解析的一些規則，子元素會停止塌陷

bfc的觸發方式任選其一，根據業務邏輯需要：

position：absolute; 

display:inline-block;

float:left/right; 

overflow:hidden;

8.浮動元素產生浮動流，所有產生浮動流的元素，塊元素看不到，產生bfc的元素和文字類元素以及文字都能看到浮動元素

解決浮動流問題（父級塊元素包含子浮動元素，沒高度）---因為塊元素看不到浮動元素

解決方式：

方法1：在父級元素內的最後一個浮動子元素後加p----p設定為clear:both;不建議使用這種方式

方法2：用偽元素（父級::after{content:'';clear:both;display:block}）---偽元素是天生的行元素，clear:both只對塊元素生效。

9.報紙樣式----img{float:left;} 給圖片加浮動，後面的文字會圍繞它

10.文字溢位打點

  1.單行文字：{white-space:nowrap; overflow:hidden;text-overflow:ellipsis}

  2.多行文字：不做打點，做截斷 ---單行文字（line-height）*行數=height（容器高）加overlow:hidden;

11.背景處理

當網站採取預設載入模式（就是網速不好，只加載html的時候）要保證使用者也可以操作；

<a href="http://www.taobao.com">淘寶網</a>

給這個a設定背景圖，當背景圖失效的時候（就是css載入不出來的時候），要可以看到字並且可以點選，當背景圖存在的時候，字應該看不到。

解決方式：

 1.縮排容器的寬，讓文字溢位，不允許換行，再溢位隱藏----text-indent:200px;white-space:nowrap;overflow:hidden;

 2.高設為0，padding-top:圖的高，文字會溢位在下方，溢位隱藏。