CSS技巧 | 前端开发需要知道的 10 个 CSS 技巧

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"个人觉得 CSS 是每个前端开发人员都必须掌握的基础，以完成相应的交互和终端设备的响应。在项目开发中，有些容易被忽略的小问题带来项目后期的胶水代码。本文总结一些项目开发中CSS的10个小技巧。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"1.使用相对单位","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通常我们在项目开发中，使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"px","attrs":{}}],"attrs":{}},{"type":"text","text":"作为尺寸的单位，而不是使用相对单位，如：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"rem","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"em","attrs":{}}],"attrs":{}},{"type":"text","text":"等。在万物互联的时代，最好的方式是相对单位","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"rem","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vh","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vw","attrs":{}}],"attrs":{}},{"type":"text","text":"等现代 CSS 布局（如 flexbox 和 grid）方式，最大限度的支持各种终端设备。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"绝对单位","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"px","attrs":{}}],"attrs":{}},{"type":"text","text":" ：是一个绝对单位，主要是因为它是固定的，不会根据任何其他元素的测量而改变。","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"相对单位","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"vw（viewpoint width）","attrs":{}}],"attrs":{}},{"type":"text","text":"：相对于视口的宽度","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"vh（viewpoint height）","attrs":{}}],"attrs":{}},{"type":"text","text":"：相对于视口的高度","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"rem（font size of the root element）","attrs":{}}],"attrs":{}},{"type":"text","text":"：相对于根 ( ) 元素 (默认字体大小通常为 16px )","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"em（font size of the element）","attrs":{}}],"attrs":{}},{"type":"text","text":"：相对于父元素","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"%","attrs":{}}],"attrs":{}},{"type":"text","text":" ：相对于父元素","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* 不提倡 */\n.wrap {\n font-size: 14px;\n margin: 10px;\n line-height: 24px;\n}\n/* 建议 */\n.wrap {\n font-size: 1.2rem;\n margin: 0.5rem;\n line-height: 1.6em;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2. 代码复用","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很多开发人员在谈到CSS时都觉得代码重复性很高，在项目开发中这不是一个好的做法。好在现在有CSS预处理器（sass/scss、less、stylus、Turbine），能够让我们可以更好的规划CSS代码，提高其复用性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然需要提高代码复用，还是需要一定的CSS的基础，来设计好代码结构，如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* 不提倡 */\n.container {\n background-color: #efefef;\n border-radius: 0.5rem;\n}\n\n.sidebar {\n background-color: #efefef;\n border-radius: 0.5rem;\n}\n\n/* 建议 */\n.container,\n.sidebar {\n background-color: #efefef;\n border-radius: 0.5rem;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.CSS重置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每个浏览器都有自己的默认样式，因此，当网页不包含CSS时，浏览器会为文本添加一些基本的默认样式、填充、边距等。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可以通过使用通用选择器 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"*","attrs":{}}],"attrs":{}},{"type":"text","text":" 重置 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"box-sizing","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"font-family","attrs":{}}],"attrs":{}},{"type":"text","text":" 来实现这一点。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"像这样：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"* {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n font-family: Arial, Helvetica, sans-serif;\n}\nul,\nli {\n list-style: none;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不过这些问题现在基本都被框架解决了，对于初学者建议可以模仿但不建议一开始就上框架。","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.不使用颜色名称","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不要使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"red","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"blue","attrs":{}}],"attrs":{}},{"type":"text","text":"等颜色名称，相反，建议使用颜色的十六进制值。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"为什么呢？因为当使用像 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"red","attrs":{}}],"attrs":{}},{"type":"text","text":" 这样的颜色名称时，在不同的浏览器或者设备中显示会有所不同。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* 不提倡 */\n.container {\n background-color: red;\n}\n\n/* 建议 */\n.container {\n background-color: #ff0000;\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"5.使用简写属性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在CSS中，多用简写属性，少用单独属性，具体哪些是简写属性，哪些是单独属性，下面列举一下常见的一些属性，是以通常项目为原则。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"简写属性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"background","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"font","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"transition","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"transform","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"list-style","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-radius","attrs":{}}],"attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"单独属性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"rotate","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"scale","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"background-color","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"background-image","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"background-position","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding-left","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding-right","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding-top","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"padding-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-left","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-top","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-right","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"margin-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-top","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-right","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-bottom","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":" border-left","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-width","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-color","attrs":{}}],"attrs":{}},{"type":"text","text":"、 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"border-style","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"/* 不提倡 */\n.container {\n background-image: url(bg.png);\n background-repeat: no-repeat;\n background-position: center;\n}\n\n/* 建议 */\n.container {\n background: url(bg.png) no-repeat center;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"6.文本截取","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在项目开发中，有些列表只需要显示一行文字，有些列表需要显示固定函数的文字，过去通过字符截取的方式来实现，但存在截取不统一（文本内容不同英文、中文、标点符号等），再加上现在各种终端的适配，不足就被放大了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"现在最佳的方式是通过CSS来实现，在文本最后增加省略号（","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"…","attrs":{}}],"attrs":{}},{"type":"text","text":"）。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"单行截取","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"元素必须是 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"block","attrs":{}}],"attrs":{}},{"type":"text","text":" 或 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-block","attrs":{}}],"attrs":{}},{"type":"text","text":"，如果溢出被隐藏，则文本溢出不起作用，并且元素必须具有定义的宽度或最大宽度集。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"p {\n display: inline-block;\n max-width: 300px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"多行截取","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"p {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3; /* 需要显示的行数 */\n overflow: hidden;\n}","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"7.垂直居中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"垂直居中是一个很常见的需求，有很多实现方式，在伸缩容器内的任何东西垂直居中：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".flex-vertically-center {\n display: flex;\n align-items: center;\n}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"inline","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"inline-block","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"table-cell","attrs":{}}],"attrs":{}},{"type":"text","text":" 块垂直对齐：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"img {\n /* 只对block有效 */\n display: inline-block;\n vertical-align: middle;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相对容器中垂直居中的绝对元素，下面代码是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".sub-container","attrs":{}}],"attrs":{}},{"type":"text","text":"在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".container","attrs":{}}],"attrs":{}},{"type":"text","text":"垂直居中：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".container {\n position: relative;\n}\n.sub-container {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"8.水平居中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"与垂直对齐类似，不过水平居中更容易一点。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"块居中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".block-element {\n display: block;\n margin: 0 auto;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"内联或内联块文本居中","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".container {\n text-align: center;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在相对容器内水平居中绝对元素：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".container {\n position: relative;\n}\n.sub-container {\n position: absolute;\n top: 50%;\n transform: translateX(-50%);\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"flex 容器内的任何内容水平居中：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".flex-vertically-center {\n display: flex;\n justify-content: center;\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"9.设置下一个或上一个兄弟元素样式","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对元素前面和后面的元素进行样式设置，在项目开发中很有用。例如10个按钮，当前按钮下一个及下一个的兄弟元素设置不同的颜色。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"html代码如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"

\n \n \n \n \n \n \n \n \n \n \n

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"css代码：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".current ~ button {\n background-color: #000;\n color: #ffffff;\n}\n.current {\n background-color: #ff0000;\n}\n.current + button {\n background-color: #333;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f3/f35f49d22dc7cd1d74320d54976679e6.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来设置当前按钮前面样式，css代码如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"button {\n padding: 10px 15px;\n border: 1px solid #444444;\n font-size: 12px;\n background-color: #ff0000;\n color: #000;\n}\n.current {\n background-color: #000;\n color: #fff;\n}\n.current ~ button {\n background: initial;\n}\n.container {\n width: 1000px;\n margin: 50px auto;\n text-align: center;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/00/00193da9d71566f3114978502735acf1.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"10.宽高比","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果想让盒子容器有一定的宽高比，如视频播放器尺寸，可以用几种方法来实现，其中有一种方法最直观。可以使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"calc","attrs":{}}],"attrs":{}},{"type":"text","text":" 函数设置顶部填充 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":" (height * width) / 100%","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如下，创建一个 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"720px","attrs":{}}],"attrs":{}},{"type":"text","text":" 宽的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"16 x 9","attrs":{}}],"attrs":{}},{"type":"text","text":" 矩形：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"html代码：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"

\n

\n

\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"css代码：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".container {\n width: 720px;\n}\n.box {\n padding-top: calc((9 / 16) * 100%);\n background: #efefef;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果如下","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ac/acbefa11b96405125cb81d0c0bb7fc6a.jpeg","alt":null,"title":"","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"还可以使用 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"after","attrs":{}}],"attrs":{}},{"type":"text","text":" 伪元素来创建比例大小。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".box::after {\n content: \"\";\n display: block;\n padding-top: calc((9 / 16) * 100%);\n background: #eee;\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的方案会导致里面所有的元素都必须向上移动或需要使用绝对定位。不过好消息是，CSS增加了","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"aspect-ratio","attrs":{}}],"attrs":{}},{"type":"text","text":"属性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio","title":"","type":null},"content":[{"type":"text","text":"aspect-ratio","attrs":{}}]},{"type":"text","text":" 为box容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"总结","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"CSS 既有趣又强大，而且还在不断地成长和改进。","attrs":{}}]}]}