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

左手的ㄟ右手 2021-09-16 04:20 335阅读 0赞

**知识点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;
    }

![70][]

**知识点8：雪碧图的使用**

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

<footer>
 <ul>
 <li>支付业务许可证</li>
 <li>PCI认证</li>
 <li>Visa 验证</li>
 <li>VerSign加密服务</li>
 <li>网络工商</li>
 <li>电子商务协会认证诚信网</li>
 <li>北京工商</li>
 </ul>
 北京问心互联网金融公司 版权所有 ® 2015-2016
 </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）放置图片出现混乱加载 。**

![70 1][]

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

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

![70 2][]

**知识点10：清除浮动**

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

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

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

> 在很多css样式中，都需要添加前缀，但是记住这些前缀很麻烦，我们可以采用以下网站，给css样式代码自动添加前缀。
> 
> 网址：[http://autoprefixer.github.io/][http_autoprefixer.github.io]  Autoprefixer是一个PostCSS插件，可解析您的CSS并添加供应商前缀
> 
> 具体步骤：直接将css代码复制进去即可。

![70 3][]

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

> 打开控制台，选择设备类型，在控制台输入navigator.userAgent，此时便可显示用户代理字符串。
> 
> 所以，我们可以根据用户代理字符串来判断设备类型，根据设备的不同提供不同的功能。
> 
> 然后，用户代理字符串可以伪造，因此在涉及安全的时候，我们需要结合其他因素来判断设备类型。

![70 4][]

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

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

![70 5][]

**知识点14：图片的压缩**

> 在通过PS导出的图片，我们还可以进行压缩。
> 
> svg格式图片压缩网址：[http://iconizr.com][http_iconizr.com]；jpg / png格式图片压缩网址：[http://tinypng.com][http_tinypng.com]

**知识点15：favicon.ico的使用 **

> favicon.ico作为网站的头像，很多时候都是需要的。在使用的时候，通常有以下两种方式：
> 
> （1）把favicon.ico文件与html文件放置在根目录下，同一级别。
> 
> （2）在html文件中引入即可。

![70 6][]

![70 7][]

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

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

![70 8][]

[70]: /images/20210802/7ab6d8f914504cbb8607f002d6bd9c59.png
[70 1]: /images/20210802/54d8317de8b042e6a951b386ad391bf5.png
[70 2]: /images/20210802/83dd0481d8b44b2493c4439a4866b0db.png
[http_autoprefixer.github.io]: http://autoprefixer.github.io/
[70 3]: /images/20210802/751990f6d3ef49b595bf949d00d29677.png
[70 4]: /images/20210802/064fae958f35428a84270eedeaa52379.png
[70 5]: /images/20210802/a37dda44498f44dea17f5a205607e0af.png
[http_iconizr.com]: http://iconizr.com
[http_tinypng.com]: http://tinypng.com
[70 6]: /images/20210802/bb8fb033af7345999302116fc1ae05c9.png
[70 7]: /images/20210802/8a72b4efa1d94a4b88bb9e63fa13adeb.png
[70 8]: /images/20210802/276b2f3566cd46d3b539799c2a8510dd.png