css制作大全
CSS 基础语法与选择器
CSS 通过选择器匹配 HTML 元素，并定义样式规则。基本语法为：
选择器 {
属性: 值;
属性: 值;
}常见选择器类型：
- 元素选择器：
p { color: red; } - 类选择器：
.classname { font-size: 16px; } - ID选择器：
#idname { background: #fff; } - 属性选择器：
[type="text"] { border: 1px solid; }
盒模型与布局
CSS 盒模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}布局方式：
- Flexbox：
.container { display: flex; justify-content: center; align-items: center; } - Grid：
.grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
响应式设计
通过媒体查询适配不同设备：
@media (max-width: 768px) {
body {
font-size: 14px;
}
}视口单位：
vw（视口宽度百分比）vh（视口高度百分比）
动画与过渡
过渡效果：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: blue;
}关键帧动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}常见样式技巧
- 居中元素：
.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 自定义滚动条：
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #888; }
预处理器（Sass/Less）
Sass 示例：
$primary-color: #333;
.button {
background: $primary-color;
&:hover {
opacity: 0.8;
}
}性能优化
- 减少不必要的重绘和回流。
- 使用
will-change属性提示浏览器优化：.element { will-change: transform; }
通过系统学习以上内容，可掌握 CSS 的核心功能与高级技巧。
