2025年4月15日学习笔记

一、CSS基础结构解析

1. CSS引入方式对比

方式	语法	适用场景
行内样式	<div style="color:red">	快速测试/少量样式覆盖
内部样式表	<style>...</style>	单页面样式管理（当前代码）
外部样式表	<link rel="stylesheet" href="style.css">	多页面复用样式

二、CSS选择器详解

1. 选择器类型对比表

选择器类型	语法	示例	优先级权重
元素选择器	div	div { ... }	1
类选择器	.class	.box { ... }	10
ID选择器	#id	#div1 { ... }	100
内联样式	style=""	<div style="...">	1000

三、常用CSS属性解析

1. 尺寸与盒模型属性

属性	作用	示例值	注意事项
width	元素宽度	220px / 50%	默认不包含padding
height	元素高度	145px	内容溢出需处理
border	边框样式	1px solid yellow	三属性简写：宽度+样式+颜色

2. 颜色与背景属性

属性	作用	示例值
color	文本颜色	rebeccapurple / #663399
background-color	背景颜色	rgb(249, 206, 169)

四、盒模型核心概念

1. 盒模型结构图解

+-----------------------------+
|          margin             |
|  +-----------------------+  |
|  |        border          |  |
|  |  +-----------------+  |  |
|  |  |    padding       |  |  |
|  |  |  +-----------+  |  |  |
|  |  |  |  content  |  |  |  |
|  |  |  +-----------+  |  |  |
|  |  +-----------------+  |  |
|  +-----------------------+  |
+-----------------------------+

2. 盒模型属性详解

属性	作用	示例值
width	内容区宽度	300px
padding	内边距	padding: 10px;
border	边框	border: 2px solid #000;
margin	外边距	margin: 20px;