文章目录
- CSS 日常开发常用属性总结
- 一、 常用 CSS 属性
- 1、布局相关
- （1）display：
- （2）position：
- （3）float：
- （4）clear：
- 2、尺寸与溢出
- （1）width 和 height：
- （2）max-width 和 max-height：
- （3）overflow：
- 3、文本样式
- （1）color：
- （2）font-size：
- （3）font-weight：
- （4）text-align：
- （5）text-decoration：
- 4、背景与边框
- （1）background-color：
- （2）background-image：
- （3）background-repeat：
- （4）background-position：
- （5）background：
- （6）border：
- （7）border-radius：
- 5、盒模型
- （1）padding：
- （2）margin：
- （3）box-sizing：
- 6、图像处理
- （1）object-fit：
- （2）object-position：
- 7、动画与过渡
- （1）transition：
- （2）animation：
- （3）keyframes：
- 二、常用 CSS 技巧
- 1、响应式设计
- （1）@media 媒体查询：
- （2）视口单位：
- （3）Flexbox 和 Grid：
- 2、居中布局
- （1） 水平居中：
- （2）垂直居中：
- 3、Hover 效果
- （1）hover 状态：
- （2）::after 和 ::beforeseudo-elements：
- 4、视觉优化
- （1）阴影效果：
- （2）圆角边框：
- （3）文字阴影：
- 5、CSS 预处理器
- （1）Sass/SCSS 和 Less：
- （2）PostCSS：
CSS 日常开发常用属性总结
一、 常用 CSS 属性
1、布局相关
（1）display：
- block：元素占据一行，左右排列。
- inline：元素在一行内排列，不能设置宽高。
- inline-block：结合了 block 和 inline 的特性。
- flex：弹性盒子布局，适合响应式设计。
- grid：网格布局，适合复杂的二维 layouts。
- none：隐藏元素，但空间保留。
（2）position：
- static：默认值，元素在正常文档流中。
- relative：相对定位，参照自身位置。
- absolute：绝对定位，参照最近的绝对定位祖先。
- fixed：固定定位，相对于视口。
- sticky：粘性定位，结合了 relative 和 fixed。
（3）float：
- left 或 right：元素漂浮到指定方向。
- none：取消浮动。
（4）clear：
- both：清除两边的浮动影响。
- left 或 right：分别清除浮动。
2、尺寸与溢出
（1）width 和 height：
- 设置元素的宽度和高度。
- 可以使用百分数（%）、像素（px）或视口单位（vw、vh）。
（2）max-width 和 max-height：
设置元素的最大宽度和高度。
（3）overflow：
- hidden：隐藏溢出内容。
- scroll：显示滚动条。
- auto：自动显示滚动条。
- 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：
- repeat：平铺。
- no-repeat：不平铺。
- repeat-x：只横向平铺。
- 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：
- content-box：默认，尺寸不包含 padding 和 border。
- border-box：尺寸包含 padding 和 border。
6、图像处理
（1）object-fit：
- fill：填充整个容器，可能变形。
- contain：保持比例，适应容器。
- 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）视口单位：
- vw：视口宽度的百分比。
- vh：视口高度的百分比。
- 示例：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：
通过插件提供更多功能，如自动补充浏览器前缀。
