所以对于图片，我们总是建议同时写上高和宽，避免因为图片尺寸错误带来的布局问题：
ul li img { width: 150px; height: 100px; }
同时，给 <img> 标签同时写上高宽，可以在图片未加载之前提前占住位置，避免图片从未加载状态到渲染完成状态高宽变化引起的重排问题。
object-fit
当然，限制高宽也会出现问题，譬如图片被拉伸了，非常的难看：
这个时候，我们可以借助 object-fit，它能够指定可替换元素的内容（也就是图片）该如何适应它的父容器的高宽。
ul li img { width: 150px; height: 100px; object-fit: cover; }
利用 object-fit: cover，使图片内容在保持其宽高比的同时填充元素的整个内容框。
object-fit 还有一个配套属性 object-position，它可以控制图片在其内容框中的位置。（类似于 background-position），m默认是 object-position: 50% 50%，如果你不希望图片居中展示，可以使用它去改变图片实际展示的 position 。
ul li img { width: 150px; height: 100px; object-fit: cover; object-position: 50% 100%; }
像是这样，object-position: 100% 50% 指明从底部开始展示图片。这里有一个很好的 Demo 可以帮助你理解 object-position。
CodePen Demo -- Object position
考虑屏幕 dpr -- 响应式图片
正常情况下，图片的展示应该没有什么问题了。但是对于有图片可展示的情况下，我们还可以做的更好。
在移动端或者一些高清的 PC 屏幕（苹果的 MAC Book），屏幕的 dpr 可能大于 1。这种时候，我们可能还需要考虑利用多倍图去适配不同 dpr 的屏幕。
正好，<img> 标签是有提供相应的属性 srcset 让我们进行操作的。
<img src='photo@1x.png' srcset='photo@1x.png 1x, photo@2x.png 2x, photo@3x.png 3x' />
当然，这是比较旧的写法，srcset 新增了新的 w 宽度描述符，需要配合 sizes 一起使用，所以更好的写法是：
<img src = "photo.png" sizes = “(min-width: 600px) 600px, 300px" srcset = “photo@1x.png 300w, photo@2x.png 600w, photo@3x.png 1200w, >
利用 srcset，我们可以给不同 dpr 的屏幕，提供最适合的图片。
上述出现了一些概念，dpr，srcset 属性，不太了解的可以移步 前端基础知识概述
图片丢失
好了，当图片链接没问题时，已经处理好了。接下来还需要考虑，当图片链接挂了，应该如何处理。
处理的方式有很多种。最好的处理方式，是我最近在张鑫旭老师的这篇文章中 -- 图片加载失败后CSS样式处理最佳实践 看到的。这里简单讲下：
- 利用图片加载失败，触发 <img> 元素的 onerror 事件，给加载失败的 <img> 元素新增一个样式类
- 利用新增的样式类，配合 <img> 元素的伪元素，展示默认兜底图的同时，还能一起展示 <img> 元素的 alt 信息
<img src="test.png" alt="图片描述" onerror="this.classList.add('error');">
img.error { position: relative; display: inline-block; } img.error::before { content: ""; /** 定位代码 **/ background: url(error-default.png); } img.error::after { content: attr(alt); /** 定位代码 **/ }
我们利用伪元素 before ，加载默认错误兜底图，利用伪元素 after，展示图片的 alt 信息：
OK，到此，完整的对图片的处理就算完成了，完整的 Demo 你可以戳这里看看：
交互设计优化
接下来一个大环节是关于一些交互的细节。对于交互设计，一些比较通用的准则：
- Don’t make me think
- 符合用户的习惯与预期
- 操作便利
- 做适当的提醒
- 不强迫用户
过渡与动画
在我们的交互过程中，适当的增加过渡与动画，能够很好的让用户感知到页面的变化。
譬如我们页面上随处可见 loading 效果，其实就是这样一种作用，让用户感知页面正在加载，或者正在处理某些事务。
滚动优化
滚动也是操作网页中非常重要的一环。看看有哪些可以优化的点：
滚动平滑：使用 scroll-behavior: smooth 让滚动丝滑
使用 scroll-behavior: smooth，可以让滚动框实现平稳的滚动，而不是突兀的跳动。看看效果，假设如下结构：
<div class="g-container"> <nav> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> </nav> <div class="scrolling-box"> <section id="1">First section</section> <section id="2">Second section</section> <section id="3">Third section</section> </div> </div>
不使用 scroll-behavior: smooth，是突兀的跳动切换：
给可滚动容器添加 scroll-behavior: smooth，实现平滑滚动：
{ scroll-behavior: smooth; }
使用 scroll-snap-type 优化滚动效果
sroll-snap-type 可能算得上是新的滚动规范里面最核心的一个属性样式。
scroll-snap-type：属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。
光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。让滚动操作结束后，元素停止在适合的位置。
看个简单示例：
当然，scroll-snap-type 用法非常多，可控制优化的点很多，限于篇幅无法一一展开，具体更详细的用法可以看看我的另外一篇文章 -- 使用 sroll-snap-type 优化滚动
控制滚动层级，避免页面大量重排
这个优化可能稍微有一点难理解。需要了解 CSS 渲染优化的相关知识。
先说结论，控制滚动层级的意思是尽量让需要进行 CSS 动画（可以是元素的动画，也可以是容器的滚动）的元素的 z-index 保持在页面最上方，避免浏览器创建不必要的图形层（GraphicsLayer），能够很好的提升渲染性能。
这一点怎么理解呢，一个元素触发创建一个 Graphics Layer 层的其中一个因素是：
- 元素有一个 z-index 较低且包含一个复合层的兄弟元素
根据上述这点，我们对滚动性能进行优化的时候，需要注意两点：
- 通过生成独立的 GraphicsLayer，利用 GPU 加速，提升滚动的性能
- 如果本身滚动没有性能问题，不需要独立的 GraphicsLayer，也要注意滚动容器的层级，避免因为层级过高而被其他创建了 GraphicsLayer 的元素合并，被动的生成一个 Graphics Layer ，影响页面整体的渲染性能
如果你对这点还有点懵，可以看看这篇文章 -- 你所不知道的 CSS 动画技巧与细节
点击交互优化
在用户点击交互方面，也有一些有意思的小细节。
优化手势 -- 不同场景应用不同 cursor
对于不同的内容，最好给与不同的 cursor 样式，CSS 原生提供非常多种常用的手势。
在不同的场景使用不同的鼠标手势，符合用户的习惯与预期，可以很好的提升用户的交互体验。
首先对于按钮，就至少会有 3 种不同的 cursor，分别是可点击，不可点击，等待中：
{ cursor: pointer; // 可点击 cursor: not-allowed; // 不可点击 cursor: wait; // loading }
除此之外，还有一些常见的，对于一些可输入的 Input 框，使用 cursor: text，对于提示 Tips 类使用 cursor: help，放大缩小图片 zoom-in、zoom-out 等等：
一些常用的简单列一列：
- 按钮可点击: cursor: pointer
- 按钮禁止点击：cursor: not-allowed
- 等待 Loading 状态：cursor: wait
- 输入框：cursor: text;
- 图片查看器可放大可缩小：cursor: zoom-in/ zoom-out
- 提示：cursor: help;
当然，实际 cursor 还支持非常多种，可以在 MDN 或者下面这个 CodePen Demo 中查看这里看完整的列表：
点击区域优化 -- 伪元素扩大点击区域
按钮是我们网页设计中十分重要的一环，而按钮的设计也与用户体验息息相关。
考虑这样一个场景，在摇晃的车厢上或者是单手操作着屏幕，有的时候一个按钮，死活也点不到。
让用户更容易的点击到按钮无疑能很好的增加用户体验及可提升页面的访问性，尤其是在移动端，按钮通常都很小，但是受限于设计稿或者整体 UI 风格，我们不能直接去改变按钮元素的高宽。
那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？
这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。借助伪元素可以轻松帮我们实现，我们可以这样写：
.btn::before{ content:""; position:absolute; top:-10px; right:-10px; bottom:-10px; left:-10px; }
当然，在 PC 端下这样子看起来有点奇怪，但是合理的用在点击区域较小的移动端则能取到十分好的效果，效果如下：
在按钮的伪元素没有其它用途的时候，这个方法确实是个很好的提升用户体验的点。
快速选择优化 -- user-select: all
操作系统或者浏览器通常会提供一些快速选取文本的功能，看看下面的示意图：
快速单击两次，可以选中单个单词，快速单击三次，可以选中一整行内容。但是如果有的时候我们的核心内容，被分隔符分割，或者潜藏在一整行中的一部分，这个时候选取起来就比较麻烦。
利用 user-select: all，可以将需要一次选中的内容进行包裹，用户只需要点击一次，就可以选中该段信息：
.g-select-all { user-select: all }
给需要一次选中的信息，加上这个样式后的效果，这个细节作用在一些需要复制粘贴的场景，非常好用：
CodePen -- user-select: all 示例
选中样式优化 -- ::selection
当然，如果你想更进一步，CSS 还有提供一个 ::selection 伪类，可以控制选中的文本的样式（只能控制color, background, text-shadow），进一步加深效果。
CodePen -- user-select: all && ::selection 控制选中样式
添加禁止选择 -- user-select: none
有快速选择，也就会有它的对立面 -- 禁止选择。
对于一些可能频繁操作的按钮，可能出现如下尴尬的场景：
- 文本按钮的快速点击，触发了浏览器的双击快速选择，导致文本被选中：
- 翻页按钮的快速点击，触发了浏览器的双击快速选择：
对于这种场景，我们需要把不可被选中元素设置为不可被选中，利用 CSS 可以快速的实现这一点：
{ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ }
这样，无论点击的频率多快，都不会出现尴尬的内容选中：
