（1）font: 12px/22px;相当于font-size:12px; line-height:22px
（2）规则 .ul.item 匹配 class 属性同时含有 ul 和 item 的元素；<div class="ul item"></div>
（3）保持图片宽高比：（a）padding-top （b）svg
（a）padding-top
如果div3不绝对定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>宽高比为1</title> <style> #div1{ width: 200px; } #div2{ /* width和padding-top的比例是相对于父级的，此处是相对于div1 ，这样div2的宽高就都是200px了*/ width: 100%; padding-top: 100%; background: red; position: relative; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3">sss</div> </div> </div> </body> </html>
div3绝对定位：（注意div3里面内容的显示）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>宽高比为1</title> <style> #div1{ width: 200px; } #div2{ /* width和padding-top的比例是相对于父级的，此处是相对于div1 ，这样div2的宽高就都是200px了，但是div2的content区高度为0*/ /* background会覆盖padding */ width: 100%; padding-top: 100%; background: red; position: relative; } #div3{ /* 这里绝对定位并且设置left、bottom、right、top，这样该元素的高度就被撑开和父元素div2一样大了 */ /* 这样div3里面的内容看上去就在div2里面，如果不绝对定位，则div3显示的内容被拉下来了 */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3">sss</div> </div> </div> </body> </html>
ATTENTION：对一个div设置背景会覆盖padding
（b）svg
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>宽高比为1</title> <style> #div1{ width: 200px; } #div2{ /* width和padding-top的比例是相对于父级的，此处是相对于div1 ，这样div2的宽高就都是200px了，但是div2的content区高度为0*/ /* background会覆盖padding */ width: 100%; background: red; position: relative; } #div3{ /* 这里绝对定位并且设置left、bottom、right、top，这样该元素的高度就被撑开和父元素div2一样大了 */ /* 这样div3里面的内容看上去就在div2里面，如果不绝对定位，则div3显示的内容被拉下来了 */ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } svg{ /* svg本来将width和height设置为1，即为1X1 */ /* 现在width 100%，即width和div2同宽，为200px；而height为auto即为自适应，所以为了保持原来对1:1，height就为200px了， 这样就实现了200X200*/ /* 所以说这里的svg是为了撑开div2，使之变成200X200 */ width: 100%; height: auto; } </style> </head> <body> <div id="div1"> <div id="div2"> <svg width="1" height="1" xmlns="http://www.w3.org/2000/svg" > <div id="div3">sss</div> </svg> </div> </div> </body> </html>
（4）SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
css可以使用SVG
.logo { background: url(icon.svg); }
SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页
<img src="data:image/svg+xml;base64,[data]">