20个必须知道的CSS技巧指南

无论你是设计一个简单的网站还是从事一个复杂的Web开发项目，这些CSS提示将作为你的指南，以使您能够创建更高效、更有响应性和更有视觉吸引力的Web设计。

1、使用CSS重置

css重置有助于减少浏览器的不一致性，通过提供一个干净的板为样式元素。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

2、使用缩写属性

将多个CSS属性缩写为一个属性，可以帮助您编写更清洁的代码和节省时间。

margin: 10px 20px;

3、使用CSS变量

css变量，也称为自定义属性，允许您存储特定的值，以便在整个CSS中重复使用。

:root {
    --main-color: #c06c84;
}
 
body {
    background-color: var(--main-color);
}

4、使用弹性盒和网格布局

在CSS中弹性盒和网格是强大的布局系统。它们可以使创建复杂的布局更容易。例如，要创建一个简单的弹性容器：

.container {
    display: flex;
}

5、使用媒体查询进行响应设计

媒体查询是CSS3中的新特性，它可以根据媒体类型和特定条件来应用不同的CSS样式。媒体类型可以是screen（屏幕）、print（打印）、all（所有媒体）等。特定条件可以是设备宽度、高度、分辨率等。

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

6、灵活运用级联样式

css代表级联样式表，了解级联如何工作可以帮助您编写更有效的代码。例如，您可以设置全局样式，然后为特定元素或组件覆盖它们。

7、理解特异性

在CSS中，特异性是基于文档中CSS选择器的类型和顺序的相关性度量。如果一个HTML元素或一组元素被多个CSS选择器作为目标，CSS特异性规则会告诉 Web 浏览器应该应用哪些CSS声明。

css特异性决定了浏览器应用的CSS规则是什么。它是根据ID ,class 以及type 。例如，ID 选择器高于class 和type 。

8、使用伪类和伪元素

伪类和伪元素允许您对元素的特定部分进行样式化。例如，你可以设计按钮的悬停状态：

button:hover {
    background-color: blue;
}

9、使用CSS函数功能

css函数可以用来使您的代码更加动态。例如，calc() 函数可用于计算值:

.element {
    width: calc(100% - 80px);
}

10、使用CSS注释

CSS注释是一种提高代码可读性和可维护性的实用技术。注释应该文档化代码、小心使用、在代码开头注释以及更新注释。使用这些最佳实践，可以使您的代码更容易理解、维护和调整。

/* This is a comment */
body {
    background-color: white;
}

11、使用盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。CSS框模型是CSS布局设计的基础。

.box {
    width: 300px;
    border: 15px solid green;
    padding: 50px;
    margin: 20px;
}

12、定位

CSS 中 position 属性用于指定元素的定位方法的类型（static、relative、absolute、fixed、sticky）

静态定位 position: static —— 此属性未 HTML 元素默认定位，一个元素没有以任何特殊的方式定位，它总是按照页面的正常流程定位。在此属性下，属性值 top、left、right、bottom 和 z-index 对HTML元素没有影响。

相对定位 position: relative —— 此属性相对于其正常位置的，在不改变布局的情况下根据元素的当前位置定位元素。position: relative 相对于它的当前位置放置一个元素而不改变它周围的布局。在此属性下，设置相对定位元素的 top、right、bottom 和 left 属性会导致它被调整到远离其正常位置。

绝对定位 position: absolute —— 此属性是相对于最近父级元素的位置，如果绝对定位元素没有定位的父级元素，它将使用文档 body 并随着页面滚动而移动。position: absolute 相对于其父元素的位置放置一个元素并改变它周围的布局。

固定定位 position: fixed —— 相对于视窗定位，即使页面滚动，也始终停留在同一位置上。固定定位元素不会在其所在的页面中留下间隙，其他元素会填补缺失的地方。

粘性定位 position: sticky —— 基于用户的滚动位置定位，根据滚动位置在 relative 和 fixed 之间切换。相对定位，直到在视窗中遇到给定的偏移位置，然后它固定到位， 就像 position: fixed 一样。

.element {
    position: relative;
    top: 20px;
    left: 30px;
}

13、 em 和 rem 单位

em表示相对于父元素的字体大小，em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。rem是相对单位，是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

.element {
    font-size: 2em;
}

14、 :before 和:after 伪元素

before和after会创建一个元素，但是创建出来的元素是属于行内元素，同时必须有content 属性，before 在父元素内容前面创建元素，after 在元素内容的后面插入元素。

.element:before {
    content: "Before";
}
 
.element:after {
    content: "After";
}

15、使用浏览器前缀跨浏览器兼容性

不同浏览器对CSS属性支持的前缀不一样，比如-webkit-、-moz-、-ms-等，可以在属性前加上这些前缀来实现浏览器兼容性。

.element {
     -webkit-transition: all 1s; /* Safari 和 Chrome */
    -moz-transition: all 1s; /* Firefox */
    -o-transition: all 1s; /* Opera */
    transition: all 1s; /* 所有浏览器 */
}

16、transition 过度效果

通过使用 transition 可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画，但无需借助 flash 或 JavaScript。

.element {
    transition: background-color 0.5s ease;
}
 
.element:hover {
    background-color: red;
}

17、 rgba 透明度

rgba是一种CSS颜色值表示方法，其中r、g、b代表红、绿、蓝三原色的取值范围是0~255，a代表透明度，取值范围是0~1。使用rgba可以轻松实现元素的透明效果，例如：

.element {
    background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
}

18、transform 实现元素的2D或3D转换

在CSS中，transform的意思为改变、变形，主要用于设置元素的形状改变，实现元素的2D或3D转换；该属性可以配合属性值（转换函数）来对将元素进行旋转rotate、扭曲skew、缩放scale、移动translate以及矩阵变形matrix。

.element {
    transform: rotate(30deg);
}

19、@import 规则允许导入外部CSS文件

@import导入命令是CSS提供的一个实用命令，主要功能是根据路径导入一个样式表文件，并且能够指定样式表所服务的设备类型。也就是说，我们可以将别的样式表导入当前样式表中，使样式表文件不必写在同一个文件之中。使用方法如下：

@import url("styles.css");

20、!important语法

!important 为开发者提供了一个增加样式权重的方法。应当注意的是 !important 是对整条样式的声明，包括这个样式的属性和属性值，它的规则会覆盖其他声明，但是它会使调试变得困难，因为它破坏了样式表中的自然级联。尽量少用，必要时才使用。

.element {
    color: red !important;
}