前端编程基础常识1

一、PC端响应式

结构上无非就是DIV+CSS。

主要的页面布局是非常经典的双飞翼布局，主要通过三个样式实现：浮动float、负边距negative margin、相对定位relative；这种布局产生的低版本浏览器bug非常少。

响应式对应的宽度有三种。然后根据产品需求来进行不同区块的隐藏和显现。比如：一整行结构，没有需求显示固定区块，body内定义的响应式变小时，直接把溢出的部分overflow:hidden。一整行结构，最后一个区块固定显示，其他根据响应式进行隐藏。一行两列式，1380时是4+3 1180时是3+3 980时是3+2。一行三列式怎样怎样的等等。主要看产品需求，不过实现起来都主要靠那三个样式。

二、怎么好好写样式

1）为了更好的使样式得到更好的复用，我们都会以语义化的碎片形式来拼凑，每个页面里独有的样式单独写在这个页面定义的独有碎片样式中。

公共的碎片除了base级的文件，还主要有三种不同的导航头、分类页签、不同的轮播图：5个轮播 7个轮播等；分类标签：20%+40%+40%；33%+33%+33%；20%+30%+50%等等；图文结构中不同尺寸的图片对应的样式；图文结构中文字对应的样式：只有一行title溢出截断、两行title、title+slogan等；总之，样式碎片非常多，根据UI和自己设定的碎片，保证页面显示正确的同时，使样式得到最大的复用性，保证不冗余，同时也可以在项目交接的时候让别人根据命名就直接了解到内里样式实现的功能。最大的优点是，当所有页面都进行大改版时，只需要改一个碎片，进行上线就可以达到用到这个碎片的所有样式都改版的效果。

2） 那些网上一搜就能搜到的面试题目，工作中确实用到，但都是基本知识，像什么盒子模型啊 浮动啊 选择器啊等是非常重要的内容基础。

三、必要的时候，写出单独的word文件来作为样式的说明

我还记得我入行前端的时候，师父就只说，自己看一下公司主站和对应的代码。也没有人给我讲解，也没有什么其他人总结的说明性文件，这么一看，就看了两周。从主页到最终页，但是效率非常低，对于一个没怎么接触过的新人来讲，又浪费时间又浪费脑力。（当然，可能那些职场老人一眼就能看懂哈）。然而，不做项目，就只看这些线上的页面，看完了就忘。我开始做针对项目的笔记，把看到的结构，从上到下每个区块的展示以及其对应的DOM的SVN地址和CSS地址，依次写在一个word文件里。我认为，比起来只看不写，这样做效率高的很，当然，可能也是我脑子跟不上，只能用手记才能记住吧。接着，我开始接项目了，从此，我也有了做笔记的习惯。

接一个项目的时候，为了和JS同学更好的衔接，方便他们更好调用样式和DOM结构，我都会把浮层类、icon类、不同状态下的不同颜色类、不同状态的按钮等等这些不易察觉但又必须用到的样式名，不仅HTML结构中注释写，也会单独写在一个文件中，文件主要是图文一起用，所有不直观的样式和结构在这里面都有说明。我感觉这样很方便，在以后维护起来，自己看着也比较明了。

四、坑

1）basckground:url(图片地址) no-repeat 注意url和no-repeat之间要有一个空格，不然低版本这样子是不识别的。

2） IE6的PNG24问题：

1、加滤镜

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src='图片地址');
_background: 0;

2、把一些复用性不高的小图片做成带有背景底色的jpg。这个是我偷懒的蠢方法，因为滤镜并不支持background-position啊，我做雪碧图后，还得一个个拆开写滤镜，真是拆的吐血。

3、没有特殊效果的png图，比如：圆角、渐变等，没有这些，那就用png8吧？

3）IE6的z-index失效，解决方法如下：

position:relative改为position:absolute；去除浮动；浮动元素添加position属性（如relative，absolute等）；层级表现不看子标签的z-index，而是比它们的父亲标签的z-index；

4）IE6中图片链接的下方有间隙（尤其是图片挨着图片的时候，特明显）。将img标签定义为display:block 或定义vertical-align或追加font-size:0

5）IE6 inline-block不好使了，解决_display:inline;

6）IE6父元素不定宽，子元素绝对定位有问题。父元素加_zoom:1;

7）IE6双边距_display:inline

8）IE6不支持fixed：辛苦JS同学帮忙解决，滚动计算改变top值，使用相对定位。

9）IE6/7下overflow溢出：父元素position:relative;

10）IE6不支持max-height、min-height。忍着吧只能_height把高定死了

11）IE6下:hover i 这种a:hover时i的样式不生效，把:hover定义一个不影响效果的样式就好了。

12）text-shadowIE9以下不支持，后来和产品沟通IE9以下不用text-shadow。产品需求：IE9以上白色字+橙色描边，IE9以下橙色斜体字；百度后发现hack写法color: #ff722c。可是在IE10下也生效啊！text-shadow在IE10也生效！导致IE10下橙色字橙色描边，特别丑。百度出的很多针对IE10的hack根本不好使，后来找到了个媒体查询@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){}; 只有这个好使！又在这个里面重写了IE10的color:#fff;

附表

color:red;          
color:red!important;        
只针对IE10的hack写法：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
    . hack{color:red;}
}

备注：本篇文章转载于蓝鸥教育闫峻讲师