CSS学习笔记

一、CSS概述

1. 基本概念

• CSS（层叠样式表）：控制网页外观和格式，实现结构与样式分离。

• 核心优势：提高可维护性、可扩展性，支持响应式设计。

2. CSS作用

• 视觉样式：字体、颜色、间距等。

• 布局控制：排版、定位。

• 交互增强 ：动画、过渡效果（如:hover）。

3. 引入方式

方式	语法示例	优先级	适用场景
内联样式	<p style="color:red;">	最高	临时调试，不推荐大量使用
内部样式表	<style> p { color:blue; } </style>	中	单页面样式
外部样式表	<link rel="stylesheet" href="styles.css">	最低	多页面复用，推荐方式

---

二、CSS选择器

1. 基本选择器

选择器类型	语法示例	特点
标签	p { ... }	选择所有指定标签
类	.class { ... }	可复用，多个元素共用
ID	#id { ... }	唯一性，优先级高于类
通用	* { ... }	选择所有元素（慎用）

2. 组合选择器

组合方式	语法示例	作用
后代选择器	div p	选择div内所有层级的p
子代选择器	div > p	仅选择直接子元素p
相邻兄弟	h1 + p	选择紧接h1后的第一个p
通用兄弟	h1 ~ p	选择h1后所有同级的p

3. 伪类选择器

• 链接状态：

  a:hover { color: orange; }   /* 悬停 */
  a:visited { color: purple; } /* 已访问 */

• 结构伪类：

  li:nth-child(2) { ... }      /* 选择第2个子元素 */
  p:first-child { ... }        /* 第一个子元素 */

• 状态伪类：

  input:focus { border-color: blue; }  /* 输入框聚焦时 */
  button:disabled { opacity: 0.5; }    /* 禁用按钮 */

---

三、CSS盒子模型

1. 盒子组成

• 四层结构（由内到外）：

  1. Content （内容区）：width/height控制大小。

  2. Padding （内边距）：padding设置，背景色会影响。

  3. Border （边框）：border定义样式、颜色、宽度。

  4. Margin （外边距）：margin控制与其他元素间距，透明。

2. 盒模型类型

类型	box-sizing属性值	特点
标准盒模型	content-box	width/height仅含内容区（默认）
IE盒模型	border-box	width/height包含内容区+padding+border

/* 切换为IE盒模型（推荐布局使用） */
* {
  box-sizing: border-box;
}

3. 盒子尺寸计算

• 总宽度 = width + 左右padding + 左右border + 左右margin

• 总高度 = height + 上下padding + 上下border + 上下margin

---

四、CSS布局

1. 元素类型

类型	特点	示例标签	能否设置宽高？
块级元素	独占一行，默认宽度100%	div, p, h1	是
行内元素	同行排列，宽高由内容决定	span, a	否
行内块元素	同行排列，可设置宽高	img, button	是

/* 转换元素类型 */
.inline-block {
  display: inline-block;
}

2. 布局技术

(1) 浮动布局

.left {
  float: left;   /* 左浮动 */
}
.right {
  float: right;  /* 右浮动 */
}

• 问题：父元素高度塌陷。

• 解决 ：通过clearfix清除浮动：

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

(2) Flex弹性布局

.container {
  display: flex;
  justify-content: center;   /* 主轴对齐方式 */
  align-items: center;       /* 交叉轴对齐方式 */
  gap: 20px;                 /* 子元素间距 */
}

(3) Grid网格布局

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 三列，比例1:2:1 */
  grid-template-rows: 100px auto;      /* 两行，第二行自适应 */
  grid-gap: 10px;
}

---

五、总结

1. 核心概念：理解选择器优先级、盒模型计算和布局方式是关键。

2. 最佳实践：

   • 优先使用外部样式表，保持结构清晰。

   • 布局时使用box-sizing: border-box避免尺寸计算问题。

   • 现代布局推荐Flex 和Grid，减少浮动使用。

3. 学习建议：多实践布局案例（如导航栏、卡片布局），善用浏览器开发者工具调试样式。