页面重构总结

这次页面重构反应出来一个问题，那就是实际练得太少， 哎。。。

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

目前能想到的就是这么多了，感受收获仍是不少的。