前端css制作
CSS 基础语法与结构
CSS（层叠样式表）通过选择器、属性和值定义样式。基本语法为：
选择器 {
属性: 值;
}例如：
h1 {
color: blue;
font-size: 24px;
}选择器类型
- 元素选择器：直接匹配HTML标签（如
p、div） - 类选择器：以
.开头（如.container） - ID选择器：以
#开头（如#header） - 属性选择器：匹配特定属性（如
[type="text"]） - 伪类选择器：定义特殊状态（如
:hover、:focus）
盒模型
CSS盒模型由四部分组成：
- 内容区（content）：元素的实际内容
- 内边距（padding）：内容与边框之间的空间
- 边框（border）：围绕内容和内边距的线
- 外边距（margin）：元素与其他元素之间的空白
可通过 box-sizing 控制计算方式：
* {
box-sizing: border-box; /* 宽度包含padding和border */
}布局技术
Flexbox布局
适合一维布局（行或列），常用属性：
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}
.item {
flex: 1; /* 弹性比例 */
}Grid布局
适合二维布局，示例：
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 列宽比例 */
gap: 10px; /* 间距 */
}
.item {
grid-column: span 2; /* 跨列 */
}响应式设计
使用媒体查询适配不同设备：
@media (max-width: 768px) {
.menu {
display: none; /* 小屏幕隐藏菜单 */
}
}动画与过渡
过渡（transition）：平滑变化属性值
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
}关键帧动画（animation）：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}预处理器（如Sass）
增强CSS功能，支持变量、嵌套等：
$primary-color: #333;
.header {
background: $primary-color;
.logo {
width: 100px;
}
}实用工具与框架
- Tailwind CSS：原子化CSS工具，通过类名组合样式
<div class="p-4 bg-blue-500 text-white"></div> - Bootstrap：提供预制组件（如导航栏、卡片）
<button class="btn btn-primary">提交</button>
性能优化建议
- 减少冗余代码，使用CSS压缩工具（如PurgeCSS）
- 避免过度嵌套（Sass/Less中）
- 使用
will-change属性优化动画性能 - 优先使用CSS原生变量（自定义属性）：
:root { --main-color: #06c; } a { color: var(--main-color); }
