CSS 学习笔记
1、CSS 基础
定义：CSS (Cascading Style Sheets) 是用于设置HTML元素显示样式的语言。
用途：控制网页的布局、颜色、字体和动画等。
基本语法：
css
Copy code
selector {
property: value;
}
例如：
css
Copy code
p {
color: red;
font-size: 16px;
}
参考文档：
2、选择器
元素选择器：直接指定元素，如 p, div。
类选择器：点.开头，如 .classname。
ID选择器：井号#开头，如 #idname。
属性选择器：根据元素属性选择，如 [type="text"]。
伪类选择器：如 :hover, :focus。
伪元素选择器：如 ::before, ::after。
3、盒模型
组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。
计算总宽度和高度：
总宽度 = 宽度 + 左右内边距 + 左右边框 + 左右外边距
总高度 = 高度 + 上下内边距 + 上下边框 + 上下外边距
4、布局技术
浮动（Float）：常用于文本环绕图片，需要管理清除浮动。
定位（Positioning）：static, relative, absolute, fixed, sticky。
Flexbox：一维布局模型，适用于任何方向的布局。
Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。
5、响应式设计
视口（Viewport）：控制设备屏幕的使用方式。
媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。
css
Copy code
@media (min-width: 600px) {
.classname {
padding: 20px;
}
}
6、动画与转换
转换（Transitions）：在CSS属性之间平滑过渡。
css
Copy code
.transition {
transition: all 0.3s ease;
}
动画（Animations）：使用@keyframes定义动画序列。
css
Copy code
@keyframes example {
from { background-color: red; }
to { background-color: yellow; }
}
.animate {
animation-name: example;
animation-duration: 2s;
}
参考文档：
