根据网页无障碍阅读指南(WCAG)准则WCAG 2.1，触摸或鼠标的最小目标尺寸应为44×44像素。大小不是固定的，可能会根据使用情况而改变。但是，44×44像素是一个很好的起点。UX设计中要遵循的重要定律。简单地说，触摸或点击目标越大，越接近，用户与其进行交互的时间越短。仅通过更改元素的宽度和高度或使用填充，并不一定总是可以增大可点击区域。好吧，不妨使用伪元素增加可点击区域。因此当我们创建具有特定宽度和高度的伪元素时，它将充当其父元素的单击/触摸/悬停区域。
在本文中，我们将使用CSS创建两个元素重叠并交织在一起的视觉效果。
css不能根据包含的内容来选择内容，但是它可以根据属性和这些属性的值进行选择。
通过letter-spacing设置负值字体间距将文本倒序
很奇怪，CSS样式在IE7下都是正常的，就IE8下有问题，排查后发现是::伪元素的问题。
由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如outline, visibility, color、background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。回流必定会发生重绘，重绘不一定会引发回流。
margin: auto能在块级元素设定宽高之后自动填充剩余宽高。除了水平方向，垂直方向的margin也能实现垂直居中，但是需要元素在垂直方向具有自动填充特性，而这个特性可以利用position实现：
在css中，!important的权重相当的高，但是由于宽高会被max-width/min-width覆盖，所以!important会失效。
Firefox（从68版开始）支持-webkit-line-clamp实现多行文本显示省略号，-webkit-line-clamp浏览器兼容性https://caniuse.com/#search=-webkit-line-clamp方面支持的还不错。不过还有另一种CSS方法实现多行文本显示省略号，所以称之为真正的CSS技巧。
如果选择器链或组中有无效的伪元素或伪类，则整个选择器列表无效。如果伪元素（但不是伪类）具有-webkit-前缀，那么对于Firefox 63，Blink、Webkit和Gecko浏览器认为它是有效的，而不会使选择器列表无效。
