CSS 日常开发常用属性总结

CSS 日常开发常用属性总结

一、 常用 CSS 属性

1、布局相关

（1）display：

1. block：元素占据一行，左右排列。
2. inline：元素在一行内排列，不能设置宽高。
3. inline-block：结合了 block 和 inline 的特性。
4. flex：弹性盒子布局，适合响应式设计。
5. grid：网格布局，适合复杂的二维 layouts。
6. none：隐藏元素，但空间保留。

（2）position：

1. static：默认值，元素在正常文档流中。
2. relative：相对定位，参照自身位置。
3. absolute：绝对定位，参照最近的绝对定位祖先。
4. fixed：固定定位，相对于视口。
5. sticky：粘性定位，结合了 relative 和 fixed。

（3）float：

1. left 或 right：元素漂浮到指定方向。
2. none：取消浮动。

（4）clear：

1. both：清除两边的浮动影响。
2. left 或 right：分别清除浮动。

2、尺寸与溢出

（1）width 和 height：

• 设置元素的宽度和高度。
• 可以使用百分数（%）、像素（px）或视口单位（vw、vh）。

（2）max-width 和 max-height：

设置元素的最大宽度和高度。

（3）overflow：

1. hidden：隐藏溢出内容。
2. scroll：显示滚动条。
3. auto：自动显示滚动条。
4. visible：显示溢出内容。

3、文本样式

（1）color：

• 设置文本颜色。
• 可以使用颜色名称、十六进制（#RRGGBB）或 RGB 值。

（2）font-size：

• 设置字体大小。
• 常用单位：px、em、rem。

（3）font-weight：

• 设置字体粗细。
• 常见值：400、700、bold（700）。

（4）text-align：

• 文本对齐方式：left、right、center、justify。

（5）text-decoration：

• 添加装饰效果：如 underline（下划线）、none（消除链接的默认下划线）。

4、背景与边框

（1）background-color：

• 设置背景颜色。
• 可以是颜色名称、十六进制或 RGB 值。

（2）background-image：

• 设置背景图片。
• 可以多个图片叠加，使用逗号分隔。

（3）background-repeat：

1. repeat：平铺。
2. no-repeat：不平铺。
3. repeat-x：只横向平铺。
4. repeat-y：只纵向平铺。

（4）background-position：

• 设置背景图片的位置。
• 可以是像素值或百分比。

（5）background：

• 简写属性，综合以上多个背景相关属性。

（6）border：

• 简写属性，用于设置边框的宽度、样式和颜色。
• 示例：border: 1px solid #333;

（7）border-radius：

• 设置边框圆角。
• 示例：border-radius: 5px; 或 50%（圆形）。

5、盒模型

（1）padding：

• 设置内边距。
• 简写或分开设置：padding-top、padding-right 等。

（2）margin：

• 设置外边距。
• 简写或分开设置：margin-top、margin-right 等。

（3）box-sizing：

1. content-box：默认，尺寸不包含 padding 和 border。
2. border-box：尺寸包含 padding 和 border。

6、图像处理

（1）object-fit：

1. fill：填充整个容器，可能变形。
2. contain：保持比例，适应容器。
3. cover：填充容器，保持比例，不显示完整图像。

（2）object-position：

• 设置图像在容器中的位置。

7、动画与过渡

（1）transition：

• 简写属性，用于设置过渡效果。
• 示例：transition: all 0.3s ease;

（2）animation：

• 简写属性，用于设置动画。
• 示例：animation: slide 3s infinitealternate;

（3）keyframes：

定义动画的具体步骤：

@keyframes slide {from { transform: translateX(0); }to { transform: translateX(100px); }
}

二、常用 CSS 技巧

1、响应式设计

（1）@media 媒体查询：

根据不同设备或屏幕尺寸应用不同的样式。

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

（2）视口单位：

1. vw：视口宽度的百分比。
2. vh：视口高度的百分比。
3. 示例：width: 50vw;

（3）Flexbox 和 Grid：

• 弹性盒子和网格布局，适合响应式设计。

2、居中布局

（1） 水平居中：

.container {width: 600px;margin: 0 auto;
}

（2）垂直居中：

.container {display: flex;align-items: center;justify-content: center;height: 100vh;
}

3、Hover 效果

（1）hover 状态：

.button:hover {background-color: #333;color: white;
}

（2）::after 和 ::beforeseudo-elements：

.tooltip:hover::after {content: '这是一个提示';position: absolute;top: 100%;left: 50%;transform: translateX(-50%);
}

4、视觉优化

（1）阴影效果：

.card {box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

（2）圆角边框：

.button {border-radius: 5px;
}

（3）文字阴影：

.title {text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

5、CSS 预处理器

（1）Sass/SCSS 和 Less：

支持变量、嵌套、模块化等功能，提高代码可维护性。
示例：Sass 变量。

$primary-color: #333;
.button {background-color: $primary-color;
}

（2）PostCSS：

通过插件提供更多功能，如自动补充浏览器前缀。