当前位置：首页 > news >正文

前端之CSS

news 2025/7/19 8:16:51

前端三大件核心概念 (HTML, CSS, JavaScript)

HTML (HyperText Markup Language)：定义页面框架结构与内容语义
CSS (Cascading Style Sheets)：负责样式修饰与视觉呈现
JavaScript：实现行为交互、动态效果与逻辑处理

CSS：层叠样式表 (Cascading Style Sheet)

一、引入方式

行内样式 (Inline Styles)
- 语法：在 HTML 标签内使用 style 属性
- 示例：<p style="color: red; font-size: 16px;">文本</p>
- 特点：仅作用于当前标签；样式之间无顺序要求
- 缺点：难以维护，代码冗余，不利于复用
页内样式 (Internal Styles / Embedded Styles)
- 语法：在 HTML 文件 <head> 中使用 <style> 标签定义 CSS 规则
- 示例：
```
<head><style>p {color: blue;text-align: center;}</style>
</head>
```
- 特点：作用于当前页面所有匹配元素
- 缺点：无法跨页面复用
外部样式表 (External Stylesheet)
- 语法：使用 <link> 标签引入独立的 .css 文件
- 示例：<link rel="stylesheet" href="styles.css">
- 特点：最佳实践！实现样式与结构分离，高度可维护和复用

引入方式	作用范围	维护性	复用性	推荐度
行内样式	单个标签	差	无	⭐
页内样式	当前页面	中	页面内	⭐⭐
外部样式表	所有引入页面	高	高	⭐⭐⭐

二、选择器 (Selectors)

用于指定 CSS 规则应用的目标元素

基础选择器

元素选择器 (Tag Selector)：p { ... } (选择所有 <p> 标签)
ID 选择器 (ID Selector)：#header { ... } (选择 id="header" 的元素)
类选择器 (Class Selector)：.highlight { ... } (选择 class="highlight" 的元素) - 最常用
通配符选择器 (Universal Selector)：* { ... } (选择所有元素) - 慎用

复合选择器

子代选择器 (Child Selector)：ul > li { ... } (仅选择 ul 的直接子元素 li)
后代选择器 (Descendant Selector)：div p { ... } (选择 div 内部所有层级的 p)
相邻兄弟选择器 (Adjacent Sibling Selector)：h1 + p { ... } (选择紧跟在 h1 后的第一个 p)
通用兄弟选择器 (General Sibling Selector)：h1 ~ p { ... } (选择 h1 后面所有的 p)
交集选择器 (Compound Selector)：p.special { ... } (选择同时具有 p 标签和 .special 类的元素)
并集选择器 (Grouping Selector)：h1, h2, .title { ... } (同时选择 h1, h2 和 .title)

伪类选择器 (Pseudo-classes)

基于元素状态或位置

链接伪类：
- :link - 未访问链接
- :visited - 已访问链接
- :hover - 鼠标悬停 (适用于所有元素)
- :active - 激活状态 (如点击瞬间)
- 顺序口诀：:link -> :visited -> :hover -> :active (LoVe HAte)
子元素伪类：
- :first-child - 父元素的首个子元素
- :last-child - 父元素的最后一个子元素
- :nth-child(n) - 父元素的第 n 个子元素 (n 可填数字、even, odd, 公式如 2n+1)

伪元素选择器 (Pseudo-elements)

创建虚拟元素用于修饰
- ::before - 在元素内容前插入
- ::after - 在元素内容后插入
注意：规范要求使用双冒号 :: (单冒号 : 在 CSS3 前兼容)

三、常用样式属性

属性 (Property)	作用 (Purpose)	常用值 (Common Values)
`color`	文本（前景）颜色	`red`, `#ff0000`, `rgb(255, 0, 0)`
`font-weight`	字体粗细	`normal`, `bold`, `lighter`, `bolder`, `100-900`
`font-size`	字体大小	`12px`, `1em`, `1.5rem`, `100%`
`background-color`	背景颜色	同 `color`
`width` / `height`	内容区域宽度/高度	`200px`, `50%`, `auto`
`font-family`	字体族	`'Arial'`, `'Microsoft YaHei'`, `sans-serif`
`text-decoration`	文本装饰	`none`, `underline`, `line-through`
`text-align`	文本水平对齐	`left`, `center`, `right`, `justify`
`border-radius`	边框圆角	`5px`, `50%`
`list-style`	列表项标记样式	`none`, `disc`, `circle`, `decimal`
`border`	边框（简写）	`1px solid #ccc`

单位与颜色表示法

长度单位 (Length Units)：
- px (像素)：最常用基础单位
  - 物理像素 (Physical Pixel)：设备屏幕的实际发光点 (如 2560x1440)
  - 逻辑像素 / CSS 像素 (Logical Pixel / CSS Pixel)：CSS 中使用的抽象单位 (如 800x600)
颜色表示法 (Color Representations)：
1. 颜色关键词：red, blue, transparent
2. RGB 函数：rgb(255, 0, 0) (红绿蓝分量，各值 0-255)
3. 十六进制：#ff0000 (Red: ff/255, Green: 00/0, Blue: 00/0)
4. 简写十六进制：当每两位相同时可简写为一位，如 #f00 等价于 #ff0000

核心概念：盒模型 (Box Model)

CSS 将每个元素视为一个矩形盒子 (Box)

组成部分：
- 内容区 (Content)：元素的实际内容（宽/高 width/height）
- 内边距 (Padding)：内容区与边框之间的透明区域 (padding-top, padding-right, padding-bottom, padding-left)
- 边框 (Border)：围绕内边距和内容的线条 (border-width, border-style, border-color)
- 外边距 (Margin)：盒子与其他盒子之间的透明区域 (margin-top, margin-right, margin-bottom, margin-left)
尺寸计算：
- 总宽度 = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right
- 总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom

简写属性：

/* 4值: 上 右 下 左 */
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;/* 3值: 上 左右 下 */
margin: 10px 20px 30px;/* 2值: 上下 左右 */
margin: 10px 20px;/* 1值: 上下左右 */
margin: 10px;

文档流 (Normal Flow) 与布局控制

文档流默认规则

块级元素 (Block Elements)：从上到下垂直排列，独占一行 (如 <div>, <p>, <h1>-<h6>)。可设置宽高。
行内元素 (Inline Elements)：从左到右水平排列，不独占一行 (如 <span>, <a>, <strong>)。宽高由内容决定，设置宽高无效。

浮动 (Float)

作用：使元素脱离标准流，向左或向右移动，直到碰到包含框或另一个浮动元素。常用于实现文字环绕或早期布局。
值：float: left; / float: right; / float: none;

清除浮动 (Clear)

解决父元素高度塌陷（因浮动元素脱离文档流导致父元素高度计算为0）问题

原则：
1. 必须作用于块级元素 (block 或 inline-block)。
2. 必须位于所有浮动元素之后。
3. 必须是浮动元素的兄弟元素。
值：clear: left; / clear: right; / clear: both; (最常用)
常用方法：在浮动元素末尾添加一个空元素并设置 clear: both;，或使用伪元素 ::after 清除。

显示模式 (Display)

作用：控制元素的显示类型及其子元素的布局方式。
常用值：
- display: block; - 块级元素
- display: inline; - 行内元素
- display: inline-block; - 行内块元素 (具有行内元素的排列特性，同时可设置宽高)
- display: none; - 隐藏元素，不占据空间
- display: flex; - 弹性盒子布局 (现代布局核心)
- display: grid; - 网格布局 (现代布局核心)

定位 (Positioning)

精确控制元素在页面中的位置，打破文档流规则

属性：position
常用值：
1. static (默认)：静态定位，元素遵循标准流。
2. relative：相对定位。
  - 参照物：元素在标准流中的原始位置。
  - 使用 top, right, bottom, left 进行偏移。
  - 占据原始空间（偏移后原位置保留空白）。
3. absolute：绝对定位。
  - 参照物：最近的非 static 定位祖先元素。若无，则相对于初始包含块 (通常是 <html> 或 <body>）。
  - 完全脱离文档流，不占据空间。
  - 使用 top, right, bottom, left 进行定位。
4. fixed：固定定位。
  - 参照物：浏览器视口 (Viewport)。
  - 完全脱离文档流，不随页面滚动而移动。
  - 使用 top, right, bottom, left 进行定位。
5. sticky (补充)：粘性定位。
  - 特性：在特定阈值内表现为 relative，超出后变为 fixed。
  - 参照物：最近的滚动祖先或视口。
  - 需配合 top, right, bottom, left 设置阈值。

CSS 布局 (Layout)

HTML 页面设计与实现的过程，本质就是布局的过程

核心目标：在页面上合理、灵活地排列和组织元素。
经典布局模式：
- 圣杯布局 (Holy Grail Layout)：
  - 三栏布局（左右固定宽度，中间自适应）。
  - 中间内容在 HTML 结构中优先出现 (利于 SEO)。
  - 实现技术：浮动 + 负外边距 + 相对定位。
- 等分布局 (Equal Column Layout)：
  - 多列宽度相等且自适应容器宽度。
  - 实现技术：浮动、Flexbox (flex: 1;)、Grid (grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));) 均可实现。
现代布局技术：
- Flexbox (弹性盒子)：适合一维布局（行或列）。
- Grid (网格)：适合二维布局（行列同时控制）。
- Responsive Design (响应式设计)：使用媒体查询 (@media)、Flexbox、Grid 等技术使页面适应不同屏幕尺寸。