前端css制作
CSS基础语法与结构
CSS（层叠样式表）通过选择器和声明块控制HTML元素样式。基本语法结构为：
选择器 {
属性: 值;
属性: 值;
}例如设置段落文字颜色和字号：
p {
color: #333;
font-size: 16px;
}常用选择器类型
- 元素选择器：
div { } - 类选择器：
.className { } - ID选择器：
#idName { } - 属性选择器：
[type="text"] { } - 伪类选择器：
:hover { }
组合选择器示例：
/* 后代选择器 */
nav a { }
/* 子元素选择器 */
ul > li { }
/* 相邻兄弟选择器 */
h1 + p { }盒模型控制
CSS盒模型包含content、padding、border、margin四部分：
.box {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
margin: 10px;
box-sizing: border-box; /* 切换盒模型计算方式 */
}布局技术实现
Flex布局：
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
flex: 1;
}Grid布局：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
grid-column: span 2;
}响应式设计方法
使用媒体查询适配不同设备：
@media (max-width: 768px) {
.sidebar {
display: none;
}
.content {
width: 100%;
}
}视口单位实现弹性尺寸：
.header {
height: 10vh; /* 视口高度的10% */
font-size: calc(16px + 1vw);
}动画与过渡效果
CSS过渡：
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.1);
}关键帧动画：
@keyframes slidein {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-element {
animation: slidein 1s forwards;
}现代CSS特性
CSS变量使用示例：
:root {
--primary-color: #4285f4;
}
.element {
color: var(--primary-color);
}混合模式与滤镜：
.overlay {
background-blend-mode: multiply;
}
.image {
filter: blur(2px) brightness(0.8);
}性能优化建议
- 避免过度嵌套选择器
- 使用transform代替top/left动画
- 压缩CSS文件大小
- 使用will-change属性提示浏览器优化
- 减少重排触发属性修改
