18 个 CSS 技巧：从重置到灵活使用根类型

1。使用 CSS Reset

CSS 重置库已经存在多年，可以塑造您的网站。它们提供了更清晰的标准，以确保跨浏览器的一致性。大多数项目不需要这些库中包含的所有规则，并且可以使用适用于布局中所有元素的简单规则进行更改，删除所有盒子模型margin，padding .

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

box-sizing 声明的使用是可选的，如果您使用下面继承的盒模型形式，则可以跳过。

2。继承盒模型，让盒模型继承html：

html {    
    box-sizing: border-box;  
}    
*, *:before, *:after {    
    box-sizing: inherit;  
}

3。使用flexbox布局避免边框问题（摆脱Flexbox边框宽度）

你尝试过多少次设计网格如果你使用像作品集或图片库这样的浮动布局，你需要清除浮动并重置边框以将它们分成所需的行数。为了避免 nth-、first-、lastchild 出现问题，您可以使用 flexbox 属性值之间的空格 。

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

4。使用：not()解决列表边框问题

在网页设计中我们通常使用：last-childnth-child选择器来覆盖父级上的原始样式选择器。例如，导航菜单使用 border 为每个 Link 链接创建分隔符，然后添加一条规则以从最后一个 link 中删除 border

.nav li {    
    border-right: 1px solid #666;  
}
.nav li:last-child {    
    border-right: none;  
}

，这是一个非常令人困惑的方式不仅强制浏览器单向渲染，而且然后通过特定的选择器覆盖它。像这样的主导风格是无法避免的。最重要的是，我们可以只对要声明的元素应用一种样式： notpseudo-class (pseudo-class):

.nav li:not(:last-child) {    
    border-right: 1px solid #666;  
}

top 也就是说，除了最后li，所有.nav li都添加了样式border。是不是很简单啊！
当然也可以用.nav li+li或.nav li:first child ~li，但是: not更语义化和可以理解。

5。将行高样式

添加到正文中导致样式表效率低下的一件事是不断重复声明。最好做好项目规划和组合规则，让CSS运行得更顺畅。为了实现这一点，我们需要了解级联以及如何在其他地方继承用通用选择器编写的样式。您可以使用 line-height (line-height) 作为项目范围的属性集。它不仅可以减少代码量，还可以让你的网站看起来很标准

body {
    line-height: ;
}

注意，这里的声明没有单位，我们只是告诉浏览器将渲染线的高度乘以渲染字体的大小

6。垂直居中任何元素

（垂直居中任何元素）当您不准备使用 CSSGrid 布局时，为垂直居中布局设置全局规则是为优雅地布局内容奠定基础的好方法

html, body {
    height: 100%;    
    margin: 0;  
}    
body {    
    -webkit-align-items: center;    
    -ms-flex-align: center;    
    align-items: center;    
    display: -webkit-flex;    
    display: flex;  
}

7。使用 SVG 图标

SVG 适用于所有分辨率类别和所有浏览器。全部都支持。因此，您可以丢弃 .png.jpg.gif 等文件和其他文件。 FontAwsome5 还提供 SVG 图标字体。 SVG 格式设置与其他图像类型相同：

.logo {    
    background: url("");  
}

温馨提示：如果在按钮等交互元素上使用 SVG，SVG 会导致加载问题。您可以使用以下规则来确保 SVG 可访问（确保在 HTML 中设置了适当的 aria 属性）

.no-svg .icon-only:after {    
    content: attr(aria-label);  
}

8。使用“OWL选择器”

使用通用选择器（万能选择器）*及其相邻的姐妹选择器+可以提供强大的CSS功能，为所有元素设置统一的规则跟随其他元素的文档流

* + * {    
    margin-top: rem;  
}

这是一项很好的技术，可以帮助您创建更均匀的类型和间距。在上例中，其他元素后面的元素（例如 H3 后面的 H4 或段落后面的元素）必须至少间隔 rems（大约 30px）
9. 一致垂直节奏一致的垂直节奏提供了视觉美感，使内容更具可读性。如果猫头鹰选择器太通用，请在元素内部使用通用选择器 (*) 为布局的特定部分创建一致的垂直节奏：

.intro > * {   
   margin-bottom: 1.25rem;  
}

10. 使用盒子获得更好的换行文本 -break

假设您希望对跨多行的长行文本使用统一的间距、边距、突出显示或背景颜色，但您不希望整个段落或标题看起来像一大块。框装饰中断属性允许您仅将样式应用于文本，同时保持填充和边距不变。如果您想在悬停时使用标记或在滑块中设计子文本以实现粗体外观，则此功能特别有用：

.p {
  display: inline-block;
  box-decoration-break: clone;
  -o-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

内联块声明允许您添加颜色、背景、边框和填充 用于每行文本，而不是与整个元素相比，声明克隆可确保这些样式统一应用于每一行。

11。等宽表格

单元格表格可能很难使用，因此请尝试使用table-layout:fixed来保持单元格等宽：

.calendar {    
    table-layout: fixed;  
}

12。强制使用属性选择器 显示空链接

这对于通过 CMS 插入的链接特别有用，这些链接通常没有类属性，可以帮助您专门设置它们的样式，而不会影响级联。例如，元素没有文本值，但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.灵活使用根类型

响应式布局中的字体大小应该能够自动调整到视口，从而节省编写媒体查询来处理字体大小的工作。您可以使用 :not 和视口单位：

:root {    
    font-size: calc(1vw + 1vh + .5vmin);  
}

根据视口高度和宽度计算字体大小：

:root {    
    font-size: calc(1vw + 1vh + .5vmin);  
}

现在您可以使用基于 :not:

body {    
    font: 1rem/ sans-serif;  
}

的 em 根单位与上面的 rem 结合使用 /em 技巧更好的控制。