响应式网站设计（4）-小插曲（零碎知识点）

知识点1：class与id属性的选择标准

一般选用class定义样式，id一般用于js快速的区别和获取元素；class一般使用中横杠连接，id一般使用驼峰命名法。

知识点2：背景图片与img标签的选择

必不可少的图片使用img引入，可有可无的装饰性可以用标签的style引入

知识点3：Normalize.css 与传统的 CSS Reset的区别？

Normalize.css注重通用的样式，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。Reset.css不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。Normalize.css 给我的感觉就是不讲求样式一致，而讲求通用性和可维护性。这点可以从详细的注释和模块化的结构体现出来。

知识点4：页面常用的字体颜色值是？

    color: #222;

知识点5：H5中的尺寸单位对比

（1）px 1个px就相当于1个像素

（2）em 相对的长度长度单位

A、相对的参照物为父元素font-size，如果父元素没有font-size，会一直向上找，直到html，如果html没有font-size，将会以浏览默认的font-size计算。

B、em具有继承的特点

C、缺点：容易混乱

（3）rem 相对参照物为根元素html，相对参照物不变，计算比较方便。当没有设置font-size，浏览器会有默认的rem设置：1rem = 16px

备注：在浏览器的尺寸默认值为16px的时候，通常使用以下设置便于计算(1rem = 10px)，另外，ie8不支持rem。

html{
    font-size:  62.5%;
}

知识点6：如何在css文件总添加编码格式

在css文件中添加编码格式的方法，就是在css文件最顶端中添加一下代码即可。效果：该css文件中的注释不会乱码，而是正常的中文显示。

@charset="utf-8"

知识点7：相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。应用场景：ul下li标签的边框问题，如下图：

/*表示选择除第一个li之外的所有li标签*/
/*相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。*/
header .top ul li + li {
    border-left: 1px solid #999;
    margin-left: -3px;
}

知识点8：雪碧图的使用

在css中，我们通常把很多小图片整合到一张图上面，结合background来使用。具体方法：

<footer>
    <ul>
        <li><span class="icon icon-zfywxk">支付业务许可证</span></li>
        <li><span class="icon icon-pcirk">PCI认证</span></li>
        <li><span class="icon icon-visayz">Visa 验证</span></li>
        <li><span class="icon icon-vsjmfw">VerSign加密服务</span></li>
        <li><span class="icon icon-wlgs">网络工商</span></li>
        <li><span class="icon icon-rzcx">电子商务协会认证诚信网</span></li>
        <li><span class="icon icon-gs">北京工商</span></li>
    </ul>
    <p>北京问心互联网金融公司 版权所有 ® 2015-2016</p>
</footer>

（1）对多个标签设置两个class属性，公共属性a与私有属性b，公共属性设置整合的大图作为背景图片，并使用overflow：hidden；

（2）对私有属性设置标签的大小（每个标签不同），采用background-position进行定位

footer ul li .icon {
    display: inline-block;
    text-indent: -999rem;
    margin-right: 1.5rem;
    /*整合的大图*/
    background: url(https://i.alipayobjects.com/e/201307/jebmKcbrh.png) no-repeat;
    background-size: 466px 447px;
    /*用不到的地方隐藏*/
    overflow: hidden;
}

footer ul li .icon-zfywxk {
    width: 38px;
    height: 27px;
    /*定位*/
    background-position: -369px -45px;
}

优点：（1）减少网络请求的次数，减轻服务器压力。（2）放置图片出现混乱加载。

知识点9：Webstorm结构菜单的使用

优点：使用结构菜单，可以快速定位到css文件中某一个标签的样式，便于修改。

知识点10：清除浮动

清除浮动，这个是我们经常用到的样式处理，但是怎么才能重复使用，并且使用起来简便呢？
方法：我们可以把这种样式处理专门书写出来，使用的时候只需要给对应的标签添加上对应的class属性clearfix即可。

.clearfix:before, .clearfix:after{
    content: '';
    display: table;
}
.clearfix:after{
    clear: both;
}

知识点11：样式自动添加前缀

在很多css样式中，都需要添加前缀，但是记住这些前缀很麻烦，我们可以采用以下网站，给css样式代码自动添加前缀。

网址：http://autoprefixer.github.io/ Autoprefixer是一个PostCSS插件，可解析您的CSS并添加供应商前缀

具体步骤：直接将css代码复制进去即可。

知识点12：用户代理字符串

打开控制台，选择设备类型，在控制台输入navigator.userAgent，此时便可显示用户代理字符串。

所以，我们可以根据用户代理字符串来判断设备类型，根据设备的不同提供不同的功能。

然后，用户代理字符串可以伪造，因此在涉及安全的时候，我们需要结合其他因素来判断设备类型。

知识点13：Webstorm中同一文件分开对比编写

方法：在打开的文件名上面，右键点击Split Vertically（Split Horizontally），左右（上下）显示同一文件，对比编写，可以避免重复。

知识点14：图片的压缩

在通过PS导出的图片，我们还可以进行压缩。

svg格式图片压缩网址：http://iconizr.com；jpg / png格式图片压缩网址：http://tinypng.com

知识点15：favicon.ico的使用

favicon.ico作为网站的头像，很多时候都是需要的。在使用的时候，通常有以下两种方式：

（1）把favicon.ico文件与html文件放置在根目录下，同一级别。

（2）在html文件中引入即可。

<link rel="icon" href="favicon.ico" type="image/x-icon">

知识点16：Webstorm定位到指定行

使用快捷键 Ctrl + G ，输入行数即可。

响应式网站设计（4）-小插曲（零碎知识点）

猜你喜欢