知识点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计算。
扫描二维码关注公众号,回复: 2896710 查看本文章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 ,输入行数即可。