css总结

一、CSS 基础语法

1. 引入方式

CSS 有 3 种引入方式，根据场景选择使用：

引入方式	语法示例	特点
内联样式	<div style="color: red;">内容</div>	优先级最高，仅作用于单个元素，耦合度高
内部样式	<style> div { color: red; } </style>	作用于当前页面，集中管理样式
外部样式	<link rel="stylesheet" href="style.css">	单独文件，多页面复用，便于维护

2. 基本语法规则

CSS 由「选择器」和「声明块」组成：

css

/* 选择器：指定要样式化的元素 */
选择器 {
  /* 声明块：由多个键值对组成 */
  属性名1: 属性值1;  /* 声明1：设置文本颜色 */
  属性名2: 属性值2;  /* 声明2：设置字体大小 */
}

/* 示例：将所有 p 标签设置为红色、16px 字体 */
p {
  color: red;
  font-size: 16px;
}

二、选择器（Selector）

选择器用于定位 HTML 元素，是 CSS 的核心功能之一。

1. 基础选择器

选择器类型	语法	说明	示例
元素选择器	标签名	匹配所有该标签元素	div { ... } 匹配所有 div
类选择器	. 类名	匹配所有含该类的元素	.active { ... } 匹配类为 active 的元素
ID 选择器	#ID 名	匹配唯一 ID 元素（ID 不可重复）	#header { ... } 匹配 ID 为 header 的元素
通配符选择器	*	匹配所有元素	* { margin: 0; } 清除所有元素默认外边距

2. 复合选择器

选择器类型	语法	说明	示例
后代选择器	父选择器 子选择器	匹配父元素内的所有后代子元素	ul li { ... } 匹配 ul 内所有 li
子选择器	父选择器 > 子选择器	仅匹配父元素的直接子元素	ul > li { ... } 匹配 ul 的直接子元素 li
相邻兄弟选择器	元素 + 兄弟元素	匹配元素后的第一个相邻兄弟元素	h1 + p { ... } 匹配 h1 后的第一个 p
并集选择器	选择器 1, 选择器 2	同时匹配多个选择器	div, p { ... } 匹配所有 div 和 p
属性选择器	[属性 = 值]	匹配含指定属性及值的元素	input[type="text"] { ... } 匹配文本输入框

3. 伪类选择器（常用）

伪类用于描述元素的「状态」或「位置」：

伪类	说明	示例
:hover	鼠标悬停时的元素	button:hover { background: blue; }
:active	元素被点击时的状态	a:active { color: red; }
:focus	元素获取焦点时（如输入框）	input:focus { border: 2px solid green; }
:nth-child(n)	匹配父元素的第 n 个子元素（n 从 1 开始）	ul li:nth-child(2) { ... } 匹配 ul 的第 2 个 li
:first-child	匹配父元素的第一个子元素	li:first-child { ... }

三、CSS 盒模型（Box Model）

所有 HTML 元素都被视为一个「盒子」，盒模型决定元素的尺寸计算方式。

• content（内容区） ：元素的文本或图像区域，由 width 和 height 定义。
• padding（内边距）：内容区与边框的距离，不允许负值。
• border（边框） ：围绕内容区和内边距的线条，由 border-width、border-style、border-color 定义。
• margin（外边距）：元素与其他元素的距离，允许负值（用于重叠元素）。

2. 盒模型计算方式

• 标准盒模型 （默认）：元素总宽度 = width + padding-left + padding-right + border-left + border-right
• 怪异盒模型 （IE 盒模型）：元素总宽度 = width（包含 padding 和 border）

通过 box-sizing 切换：

css

/* 标准盒模型（默认） */
.box { box-sizing: content-box; }

/* 怪异盒模型（推荐用于布局，避免计算麻烦） */
.box { box-sizing: border-box; }

四、布局方式

1. 流式布局（Float）

早期常用的布局方式，通过 float 使元素脱离文档流并排显示：

css

.left {
  float: left;  /* 向左浮动 */
  width: 200px;
}
.right {
  float: right; /* 向右浮动 */
  width: 300px;
}

/* 清除浮动（避免父元素高度塌陷） */
.parent::after {
  content: "";
  display: block;
  clear: both;
}

2. Flex 布局（弹性布局）

现代布局首选方案，通过设置父元素为 display: flex，控制子元素的排列方式：

父元素属性（容器属性）：

css

.container {
  display: flex;        /* 启用 Flex 布局 */
  flex-direction: row;  /* 子元素排列方向：row（默认，水平）/ column（垂直） */
  justify-content: center; /* 水平对齐：center（居中）/ flex-start（左对齐）/ space-between（两端对齐） */
  align-items: center;  /* 垂直对齐：center（居中）/ flex-start（上对齐）/ stretch（拉伸填满） */
  flex-wrap: wrap;      /* 子元素换行：nowrap（默认，不换行）/ wrap（换行） */
}

子元素属性（项目属性）：

css

.item {
  flex: 1;              /* 占比：子元素等分父容器宽度 */
  margin: 0 10px;
}

3. Grid 布局（网格布局）

二维布局系统，适合复杂网格结构（如仪表盘、画廊）：

css

.container {
  display: grid;               /* 启用 Grid 布局 */
  grid-template-columns: 1fr 1fr 1fr; /* 列定义：3 列，每列占比 1:1:1 */
  grid-template-rows: 100px 200px;   /* 行定义：2 行，高度分别为 100px、200px */
  gap: 10px;                   /* 行列间距 */
}

五、定位（Position）

控制元素在页面中的位置，常用属性 position：

值	说明	示例场景
static	默认值，正常文档流，不脱离布局	普通元素
relative	相对定位，相对于自身原位置偏移，不脱离文档流	微调元素位置
absolute	绝对定位，相对于最近的非 static 父元素偏移，脱离文档流	弹窗、悬浮菜单
fixed	固定定位，相对于浏览器窗口偏移，脱离文档流，不随滚动条滚动	顶部导航栏、回到顶部按钮
sticky	粘性定位，滚动到指定位置后固定（结合 top/left 等使用）	列表标题栏

示例：固定在屏幕右上角的按钮

css

.btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
}

六、动画与过渡

1. 过渡（Transition）

实现元素状态变化时的平滑过渡（如 hover 效果）：

css

.box {
  width: 100px;
  height: 100px;
  background: red;
  /* 过渡配置：属性 时长 动画曲线 延迟 */
  transition: width 0.3s ease 0.1s, background 0.3s;
}

.box:hover {
  width: 200px;       /* 宽度变化会触发过渡 */
  background: blue;   /* 背景色变化会触发过渡 */
}

2. 动画（Animation）

更复杂的自定义动画，需定义 @keyframes 关键帧：

css

/* 定义动画关键帧 */
@keyframes fade {
  0% { opacity: 0; transform: scale(0.8); } /* 开始状态 */
  50% { opacity: 1; transform: scale(1.2); } /* 中间状态 */
  100% { opacity: 0; transform: scale(0.8); } /* 结束状态 */
}

/* 应用动画 */
.popup {
  animation: fade 2s infinite; /* 动画名称 时长 重复次数（infinite 无限） */
}

七、响应式布局

使页面在不同设备（手机、平板、PC）上自适应显示，核心是 @media 媒体查询：

css

/* 默认样式（PC 端） */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* 平板设备（屏幕宽度 < 992px） */
@media (max-width: 992px) {
  .container {
    width: 90%;
  }
}

/* 手机设备（屏幕宽度 < 768px） */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

八、常见问题与解决方案

1. 清除默认样式：浏览器会为元素添加默认 margin/padding，需重置：

   css

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box; /* 统一盒模型 */
   }

2. 垂直居中：

   • Flex 布局：parent { display: flex; align-items: center; justify-content: center; }
   • 定位：child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

3. 文字溢出省略：

   css

   /* 单行文本 */
   .single-line {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   
   /* 多行文本（最多 3 行） */
   .multi-line {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }