頁面重構總結

這次頁面重構反應出來一個問題，那就是實際練得太少， 哎。。。

1  命名問題   以前面命沒有什麼規律吧，並且名字巨長。參考連接

2 選擇器嵌套問題   此次因爲使用了sass，用了它的嵌套功能，因而亂用嵌套，致使最後成了這樣。.class1 .class2 .class3 .class4。因爲以前不知道瀏覽器是如何讀取選擇器的，覺得和人同樣從左到右讀。並且還有一個弊端那就是嵌套太深，權重過重，之後想覆蓋各樣式，那就難了。

3 兼容問題    （線性漸變ie9都還不支持，一些語義化化標籤，ie9如下的瀏覽器是不能識別的，）

　　1  就是線性漸變等等連ie9都還不支持，因此要用filter來作。參考連接

　　2 display:inline-block  在ie67之下是表現不正常的，仍是會保留換行的特性啊  

　　

display:inline-block;
*displlay:inline;
*zoom:1

   3  h5的語義化標籤  ie78依然不支持，要麼不用，要麼html5shiv

　4 rbga  也是新出爐的  

　　opacity ie8及如下瀏覽器都是不支持的，通常採用filter來作  http://www.w3cplus.com/content/css3-rgba 

   5  rem  ie9如下也是不行的  用postcss的pxrem來作

   6 在ie78下 input框中的文字不是垂直居中，因此要使用line-height 加入hack手段。

  

4  終於知道了爲何會有下面這個奇怪現象

 

看張大神的博客。

5  單行文字溢出 顯示省略號

* 單行文字溢出以省略號代替後面的內容

```css
    text-overflow: ellipsis;
    white-space:nowrap; 
    overflow: hidden;
```

多行的話，用clamp.js吧。關於其餘的方式看這篇文章 

6  此次問了一個比較傻逼的問題，爲何我把li設置成display:inline-block後，前面的小圓點不見了。傻逼你改變了別人的默認display:list-item。

裏面還有一個list-style-position這個屬性。比較重要，大體區別就像上面這樣。

7  而後就是bfc，之前一直聽別人提及，此次終於看了看

   1 裏面的塊級元素重上到下挨個排列，每一個子元素獨佔一行，之間的垂直距離決定於margin，同一個bfc下的margin會發生重合

  2 產生bfc環境的塊級元素不會和浮動元素重合

  3 子元素的左外邊緣和父容器的左內邊緣重合（固然也能夠是子容器的右外邊緣和父容器的右內邊緣重合）

  4 產生bfc環境的容器進行高度計算時，內部浮動的子元素的高度也會被計算。

而bfc的特色就是相對獨立，裏面的元素在佈局上不會影響到外面一樣外面也不能影響到裏面。因此bfc裏面的子div該怎麼佈局就怎麼佈局
。只有位於同一bfc環境下margin纔有可能重疊，而如今父容器位於根元素的bfc環境下，而子容器位於父容器產生的bfc環境之下，不會受影響。

 

根據上面的特性

<div style="width: 100px;height: 100px;background: lightcoral;float:left"></div>
<div style="width: 100px;height: 100px;background: lightgreen;overflow:hidden"></div>

 

咱們能夠看到這兩個div並無由於浮動而重疊在一塊兒，這就是上面的第二點，由於overflow不爲visible的元素就會產生bfc的環境。

那麼有哪些條件是會產生bfc環境呢

根元素

float屬性不爲none

position爲absolute或fixed

display爲inline-block, table-cell, table-caption, flex, inline-flex

overflow不爲visible

因此咱們在清除浮動的時候，經常看見給浮動元素的父元素添加一個overflow:hidden；其實是讓父元素產生了bfc環境，而後根據bfc特性第四點
那麼父元素的高度就不會塌陷。

bfc確實解決了我不少疑惑，原來就只知道css要這麼寫，會達到這樣一個效果，至於爲何不清楚

.clearfix {
zoom:1; /* IE < 8 */
}

好比上面爲何要寫zoom:1並且註釋IE<8，那是由於ie8之前沒有bfc，只有與此相似的haslayout，其中一個觸發的方法就是zoom:1。

 

8

在判斷是否爲ie瀏覽器過程當中，因爲ie11趨向標準，不少屬性判斷方法都失效，例如window.attachEvent方法、Navigator.appName方法

在ie11以前Navigator.appName返回的都是Microsoft Internet Explorer ie11和其餘瀏覽器同樣返回的都是Netscape。
最後經過navigator.userAgent 返回的字符串中是否包含Trident來作。

 

9  在使用clean-css 這個插件時，默認配置會把hack幹掉 因此要加上下面的配置，詳情參考：gulp-minify-css

{
"compatibility": "ie7"
}

10  就是gulp 下的任務串行。咱們在使用gulp進行文件監聽的時候，監聽到了變化執行任務[task1,task2]，啓動任務是串行的，可是執行倒是並行的，若是task1和task2有依賴關係就不要這麼寫。這是個坑

串行任務的解決辦法

 11  靜態文件服務器  anywhere  在使用gulp的livereload插件，來達到自動刷新瀏覽器時，咱們必需要一個本地的靜態服務器。用這個anywhere

目前能想到的就是這麼多了，感受收穫仍是不少的。