通过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浏览器认为它是有效的,而不会使选择器列表无效。
元素的宽高比描述了其宽度与高度之间的比例关系。两种常见的视频宽高比是4:3(20世纪的通用视频格式)和16:9(高清电视和欧洲数字电视的通用)。
通过设置display属性none、block显示与隐藏,是没有任何动画效果的。还有就是能过height:0+overflow:hidden到height实现固定高度动画。实现任意高度元素的动画不妨试试max-height
background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框下面。如果没有设置背景图片或背景颜色,那么这个属性只有在边框透明或半透明时才能看到视觉效果,否则,本属性产生的样式变化会被边框覆盖。