内联块声明允许将颜色、背景、页边距和填充应用于每行文本，而不是整个元素，克隆声明确保将这些样式均匀地应用于每行。
11、等宽表格单元格表格可能很难处理，所以尝试使用table-layout：fixed来保持单元格相等宽度：
.calendar { table-layout: fixed; }
12、强制使用属性选择器显示空链接这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。例如，<a>元素没有文本值，但href属性有一个链接：
a[href^="http"]:empty::before { content: attr(href); }
13、样式“默认”链接说到链接样式，您可以在几乎每个样式表中找到一个通用的A样式。这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。
尝试这种较少干扰的方式为“默认”链接添加样式
a[href]:not([class]) { color: #999; text-decoration: none; transition: all ease-in-out .3s;}
14、比率框要创建具有固有比率的框，您需要做的就是将顶部或底部填充应用于div
.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
使用20％进行填充使得框的高度等于其宽度的20％。无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％= 5：1）。
15、风格破碎的图像这个技巧不是关于代码缩减，而是关于细化设计细节的。破碎的图像发生的原因有很多，要么不雅观，要么导致混乱（只是一个空元素）。用这个小小的CSS创建更美观的效果：
img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; }img:before { content: "We're sorry, the image below is missing :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; }
16、使用rem进行全局大小调整；使用em进行局部大小调整在设置根目录的基本字体大小后，例如html字体大小：15px；，可以将包含元素的字体大小设置为rem:
article { font-size: 1.25rem; } aside { font-size: .9rem; }
然后将文本元素的字体大小设置为em
h2 { font-size: 2em; } p { font-size: 1em; }
现在，每个包含的元素都变得分区化，更易于样式化、更易于维护和灵活。
17、隐藏未静音的自动播放视频当您处理无法从源代码轻松控制的内容时,这对于自定义用户样式表来说是一个很好的技巧。这个技巧将帮助您避免在加载页面时自动播放视频中的声音干扰访问者，并再次提供了精彩的：not（）伪选择器：
video[autoplay]:not([muted]) { display: none; }
18、灵活运用root类型响应布局中的字体大小应该能够自动调整到视区，从而保存编写媒体查询的工作，以处理字体大小。可以使用:not和视区单位，根据视区高度和宽度计算字体大小：
:root { font-size: calc(1vw + 1vh + .5vmin); }
现在，您可以使用根em单位，该单位基于:not：
body { font: 1rem/1.6 sans-serif; }
结合上面的rem/em技巧以获得更好的控制。
19、在表单元素上设置字体大小，以获得更好的移动体验为了避免移动浏览器（iOS Safari等）在点击<select>下拉列表时放大HTML表单元素，请在添加font-size样式：
input[type="text"], input[type="number"], select, textarea { font-size: 16px; }
20、CSS变量最后，最强大的CSS级别来自于CSS变量，它允许您声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。你可能有一套颜色在整个项目中使用，以保持一致性。
在CSS中反复重复这些颜色值不仅是件烦人的事情，而且还容易出错。如果某个颜色在某个时刻需要改变，你就不得不去寻找和替换，这是不可靠或不快速的，当为最终用户构建产品时，变量使得定制变得容易得多。例如：
:root {--main-color: #06c;--accent-color: #999;}h1, h2, h3 {color: var(--main-color);}a[href]:not([class]) ,p,footer span{color: var(--accent-color);}
以上就是详解CSS开发过程中的20个快速提升技巧的详细内容，更多关于CSS开发过程中的20个快速提升技巧的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: