css 实现app图标样式_CSS总结篇帮你巩固知识点 （完）

茫茫人海中与你相遇

相信未来的你不会很差

作者：hh_phoebe

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

一. ?如何优化图像以及图像格式有什么区别？

---

优化图像：

• 不用图片，尽量使用CSS3代替。对于一些要实现的修饰效果，例如阴影，圆角，半透明等，可以用CSS3完成；

• 尽可能使用矢量图SVG代替位图。对于绝大多数图案和图标等，矢量图更小，而且可以缩放而无需生成多套图。现代的主流浏览器大多数都能稳定的支持SVG。

图像格式区别：

• 矢量图： 图标字体，如font-awesome、svg；

• 位图： GIF、jpg(JPEG)、png；

矢量图和位图的区别：

• PNG：它可以细分为三种格式： PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值；

• JPG: 一种大小与质量相对平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适用于色彩简单(色调少)的图片，比如图标啊，logo等；

• GIF： 一种无损的，8位图片格式。具有支持动画，索引透明，压缩等特性。使用色彩简单的图片。

优点： 能保证在最不失真的情况下尽可能压缩图像文件的大小；

缺点： 对于需要高保真的较为复杂的图像，PNG虽然能无损压缩，但是图片较大，不适合应用在web页面上；

二. position:fixed;在手机端下无效怎么处理？

---

fixed的元素实现相对于整个页面是固定位置的，当在屏幕上滑动时是在滑动整个viewport。原来的网页还在，fixed也没有变过位置，所以说并不是手机端不支持fixed，只是fixed元素不是相对于手机屏幕固定的，因此我们按照以下方式来设计：

三.  css样式引入方式的优缺点对比

---

• 内嵌样式： 优点： 方便书写，权重高；缺点： 没有做到结构和样式分离；

• 内联样式： 优点：结构样式相分离； 缺点：没有彻底分离；

• 外联样式： 优点： 完全实现了结构和样式相分离； 缺点： 需要引入才能使用；

四. border:none;与border:0;有什么区别？

---

首先是性能差异：

• {border：0;}: 把border设置为0像素，虽然在页面上看不到，但是按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用内存值；

• {border：none；}被理解为border-style:none。boder:0;比border:none多渲染了一个border-width:0,也就是为什么border:none的性能要比border:0高；

兼容性差异：

• {border:none;}当border为“none”时似乎对IE6/7无效边框依然存在当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏。

五. position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

---

• display属性规定元素应该生成的框的类型；

• position属性规定元素的定位类型；

• float属性是一种布局方式，定义元素往哪个方向浮动；

叠加结果：有点类似于优先机制。position的值-- absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float或者absolute定位的元素，只鞥是块元素或者表格

六. 什么是critical CSS？

---

Critical CSS是一种提取首屏中 CSS 的技术，以便尽快将内容呈现给用户。这是快速加载网页首屏的好方法。

核心思路：

(1)、抽取出首页的CSS；

(2)、用行内css样式，加载这部分的css(critical CSS);

(3)、等到页面加载完之后，再加载整个css，会有一部分css与critical css重叠；

七. 什么是回流(重排)和重绘以及其区别？

---

• 回流(重排)，reflow:当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变时而需要重新构建；

• 重绘(repaint):当render tree中的一些元素需要更新属性，而这些属性只影响元素的外观，风格，而不会影响布局时，称其为重绘，例如颜色改变等。

?注意：每个页面至少需要引发一次重排+重绘，而且重排(回流)一定会引发重绘。

触发重排(回流)的条件：

• 增加或者删除可见的dom元素；

• 元素的位置发生了改变；

• 元素的尺寸发生了改变，例如边距，宽高等几何属性改变；

• 内容改变，例如图片大小，字体大小改变等；

• 页面渲染初始化；

• 浏览器窗口尺寸改变，例如resize事件发生时等；

八. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

---

• 垂直方向： line-height；

• 水平方向： letter-spacing；

?注意： letter-spacing还可以用来消除inline-block元素间的换行符空格间隙等问题。

九. 对 WEB 标准以及 W3C 有什么理解与认识？

---

• 标签闭合，标签小写，不乱嵌套；
• 提高搜索机器人的搜索几率；
• 使用外链CSS和JS脚本；
• 结构行为标签分离；
• 文件下载和页面速度更快；
• 内容能被更多的用户以及更广泛的设备访问；
• 更少的代码和组件，易于维护，改版方便；
• 不需要动页面内容，同时提供打印版本也不需要复制内容，提高网站的易用性；

十. Happy Ending??

---

到了这儿，小编希望本文能帮助到有需要的童鞋，扎实基础知识(亦或是温习遗忘的知识点)，温故而知新，逐渐提升。

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

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