css字体大小_6个高级的CSS技巧提升你的CSS技能

添加line-height到body

导致效率低下的样式表的一件事是一遍又一遍地重复声明。规划项目和组合规则越好，CSS就越流畅。一种方法是理解级联，以及如何为一般选择器编写的样式可以在其他地方继承。行高是您可以为整个项目设置的一个属性，不仅可以最小化代码行，还可以对站点的排版强制执行标准外观。

而不是添加line-height到每个

，等，将其添加到body：

body {  line-height: 1.5; }
           

注意我们不在这里声明一个单元 - 我们只是告诉它使行高比渲染文本的字体大小多一倍半。

使用Flexbox来摆脱margin的各种hacks

有多少次你试过设计一个网格，比如投资组合或图片库，你在那里使用了浮点数，然后不得不清除它们或重置margins以使列分成你想要的行数？通过使用flexbox中的属性值space-between来摆脱第n个，第一个和最后一个child的hacks用法：

.flex-container {  display: flex;  justify-content: space-between; } .flex-container .item {  flex-basis: 23%; }
           

现在，item总是呈现均匀间隔。

使用CSS重置

像normalize.css这样的CSS重置库已存在多年，为您网站的样式提供了一个简洁的平台，有助于确保跨浏览器更好的一致性。大多数项目并不真正需要这些库包含的所有规则，并且可以通过一个简单的规则来删除浏览器默认框模型中应用于布局中大多数元素的所有边距和填充：

* {  box-sizing: border-box;  margin: 0;  padding: 0; }
           

等宽表格单元格

使用表格可能会很麻烦，因此请尝试使用table-layout: fixed以保持单元格宽度相等：

.calendar {  table-layout: fixed; }
           

使用rem进行全局尺寸调整; 使用em进行本地大小调整

例如html{font-size: 15px;}，在根目录中设置基本字体大小后，您可以将font-size包含元素设置为rem：

article {  font-size: 1.25rem; } aside {  font-size: .9rem; }
           

然后将文本元素的字体大小设置为em：

h2 {  font-size：2em; } p {  font-size：1em; }
           

现在每个包含元素都变得分割，更容易定型，更易于维护和灵活。

使用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);}
           

喜欢的话可以多多关注我哦。