css速查手册：CSS速查手册，前端必备的CSS语法与属性大全

CSS选择器

1. 元素选择器

   p { color: red; }

   选择所有 <p> 元素。

2. 类选择器

   .header { background: #333; }

   选择所有具有 class="header" 的元素。

3. ID选择器

   #header { font-size: 24px; }

   选择具有 id="header" 的元素。

4. 属性选择器

   [type="text"] { border: 1px solid #000; }

   选择所有 type 属性为 text 的元素。

5. 伪类选择器

   

   a:hover { color: blue; }

   选择鼠标悬停的链接。

常用CSS属性与值

1. 颜色

   • 十六进制：color: #ff0000;
   • RGB：color: rgb(255, 0, 0);
   • RGBA：color: rgba(255, 0, 0, 0.5);
   • HSL：color: hsl(0, 100%, 50%);

2. 字体

   font-family: 'Arial', sans-serif;
   font-size: 16px;
   font-weight: bold;
   text-align: center;

3. 盒模型

   box-sizing: border-box; /* 设置盒模型为border-box */
   padding: 10px; /* 内边距 */
   margin: 20px; /* 外边距 */
   border: 1px solid #ccc; /* 边框 */

4. 布局与定位

   

   • Flexbox：

     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */

   • Grid：

     display: grid;
     grid-template-columns: 1fr 1fr; /* 两列等宽 */

   • 定位：

     position: absolute; /* 绝对定位 */
     top: 0; left: 0;
     z-index: 100; /* 层级 */

5. 过渡与动画

   transition: all 0.3s ease; /* 过渡效果 */
   animation: fadeIn 2s; /* 动画 */
   @keyframes fadeIn { /* 定义动画 */
     from { opacity: 0; }
     to { opacity: 1; }
   }

单位与换算

• 像素（px）：绝对单位，适合精确控制。
• 百分比（%）：相对单位，适合响应式设计。
• em/rem：相对单位，基于父元素或根元素的字体大小。
• 视口单位（vw/vh）：基于视口大小，适合全屏布局。

响应式设计

使用媒体查询实现响应式布局：

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
  }
}

CSS优先级规则

CSS优先级由高到低：

1. 内联样式（style 属性）
2. ID选择器
3. 类选择器、属性选择器、伪类
4. 元素选择器、伪元素
5. 通配符选择器

CSS Reset与Normalize

• CSS Reset：重置浏览器默认样式，如 box-sizing: border-box;
• Normalize.css：保留有用的默认样式，同时统一浏览器差异。

现代CSS特性

1. CSS变量

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

2. CSS Grid

   .grid-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }

3. CSS Houdini
   实验性特性，用于更底层的样式控制。