css图片等比例缩放_CSS总结篇帮你巩固知识点 （六）

茫茫人海中与你相遇

相信未来的你不会很差

作者：hh_phoebe

来源：https://juejin.im/post/5ee0cf335188254ec9505381

一. ?浏览器如何判断元素是否匹配某个CSS选择器？

---

浏览器先产生一个集合，这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到这个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

二. 描述css reset的作用和用途？

---

Reset 重置浏览器的 CSS 默认属性，浏览器的品种不同，样式不同时，将他们重置，让他们统一。

三. css sprites是什么？如何使用？

---

css 精灵图，把一堆小的图片整合到一张大的图片(png)上，利用 CSS 的 “background-image” ， “background- repeat”``，“background-position” 的组合进行背景定位 background-position 可以用数字能精确的定位出背景图片的位置，减轻服务器对图片的请求数量。

四. css sprites的优缺点？

---

优点：

• 利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这也是CSS Sprites最大的优点；

• CSS Sprites能减少图片的字节，曾经多次比较过，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

缺点：

• 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
• CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
• 维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能(最好)往下加图片，这样图片的字节就增加了，还要改动CSS。

拓展： 目前网站开发所用的精灵图(如字体库)一般都是直接用云端，而不是采用这种本地的了，如阿里图标库等。 五. 绝对定位和浮动的区别和应用？

---

绝对定位： 绝对定位脱离标准文档流，它的参考点是文档的左上角或者是右上角。如果有任何父元素有定位属性，此时就可以参考“子绝父相”定律来设置自己的定位参考元素。在网页制作过程中很灵活。制作覆盖效果的时候，会大量使用绝对定位。 浮动： 浮动脱离标准文档流，通常用于制作并排显示的元素，通常用于大的布局，或者无序列表比如图片的并排。可以使用 clear:both 属性让标准流中的其他元素在此之后依次排列。

六. 当float和margin同时使用时，如何解决IE6的双倍边距？

---

当浮动的方向和margin是同方向的时候，此时IE6会在这个方向的第一个元素身上产生双倍margin。

解决办法：(1)、改变margin的方向，float:left; margin-right:20px;  浮动向左，margin向右； (2)、给第一个元素单独写一个类叫做.content, 此时.content{_margin-left:一半的margin;}； (3)、用display:inline;不用浮动了(哈哈哈哈)。

七. 简述什么是内容与表现分离？

---

首先对于html，css以及javascript，可以这样理解：

把网站理解成一个人，html就是构成人体的‘骨架’，css就是人体的‘装饰’，比如衣服，饰品等；而javascript就相当于人做出的‘动作’，这样就通俗易懂了。

对于内容和表现分离，小编的理解是：尽量不要再html中插入行内样式，尽量将css抽成一个独立的模块，实现html‘骨架’和样式的分离，利于搜索引擎的同时，也便于后期维护。

八. CSS怎样判断不同分辨率显示不同宽度布局，从而实现自适应宽度？

---

• 使用百分比布局，用百分比来写宽度、marign、padding；
• 使用rem做单位，适当的写js``让html根元素的字号随着浏览器宽度的变化而等比例变化；
• 使用媒体查询让不同宽度的浏览器使用不同的样式表。

九. rem为什么可以缩放，以什么为基准？其优缺点有哪些？

---

rem``以html的字号为基准，比如2rem，而html的字号时16px，此时rem就是32px。可以写一段js让html根元素的字号随着浏览器宽度的变化而等比例变化，此时造成页面等比例缩放的现象。

优点： 相对于 em 的好处来说，不会发生逐渐增大或者减小字体尺寸的情况，因为始终集成根元素的字体大小； rem 单位不仅仅是可应用于字体大小，还可以用于设定高度等其它大小，使页面可以适配不同屏幕尺寸。 ?注意： rem 一般只用于移动端。

十. 5条常见的Firefox和IE的脚本兼容的问题。

---

• 绑定监听： IE是attatchEvent()  、 firefox是addEventListener();
• 计算样式：IE是currentStyle、 firefox是getComputedSyle;
• 滚动事件：IE是MouseWheel、 firefox是onmousewheel；
• 表单元素：IE是 document.forms(”formname”) ， firefox是document.forms["formname"]；
• 事件对象： IE是window.event属性， firefox必须给事件处理函数注入实参event；

我们在虚拟的空间与你相遇，期待可以碰撞出不一样的火花

公众号ID：前端大联盟扫码关注最新动态