第二周学习笔记（css基础总结）
CSS 概述
CSS 是一种样式表语言，用于描述 HTML 或 XML 文档的呈现方式，包括布局、颜色、字体等。它的核心目标是将文档的内容与它的视觉表现分离，使得网页更容易维护和设计。
一、 引入 CSS 的方式
内联样式：直接在 HTML 元素的
style属性中编写 CSS。这种方式优先级最高，但不利于维护，且混合了结构与样式，不推荐大量使用。内部样式表：在 HTML 文档的
<head>部分使用<style>标签包裹 CSS 代码。适用于单个页面独有的样式。外部样式表：将 CSS 代码保存在一个独立的
.css文件中，然后在 HTML 的<head>部分使用<link>标签将其引入。这是最常用和推荐的方式，因为它可以实现样式在多页面间的复用，并便于缓存和管理。
二、 CSS 核心语法结构
一条 CSS 规则由两个主要部分构成：
选择器：用于指定要应用样式的 HTML 元素。
声明块：包含在一对大括号
{}中，由一个或多个声明组成。声明：是一个键值对，由属性和值组成，中间用冒号
:分隔，每条声明以分号;结尾。属性：是你希望改变的样式特征（如
color,font-size）。值：指定了你希望为该属性设置的具体参数（如
red,16px）。
三、 主要选择器类型
选择器是 CSS 的基石，用于精准地选中目标元素。
基础选择器：
元素选择器：直接使用 HTML 标签名（如
p,div,h1）。类选择器：以点号
.开头，后跟类名，用于选择具有特定class属性的元素。一个元素可以有多个类，一个类也可用于多个元素。ID 选择器：以井号
#开头，后跟 ID 名，用于选择具有特定id属性的元素。ID 在页面中应是唯一的。通配符选择器：星号
*，匹配页面中的所有元素。
组合选择器：
后代选择器：用空格分隔（如
A B），选择是 A 元素内部的所有 B 元素（无论嵌套多深）。子元素选择器：用大于号
>分隔（如A > B），仅选择作为 A 元素直接子元素的 B 元素。相邻兄弟选择器：用加号
+分隔（如A + B），选择紧跟在 A 元素之后的第一个 B 元素。通用兄弟选择器：用波浪号
~分隔（如A ~ B），选择在 A 元素之后的所有同层 B 元素。
属性选择器：根据元素的属性及属性值来选择元素（如
[type="text"]）。伪类与伪元素：
伪类：以单冒号
:开头，用于定义元素的特殊状态（如:hover鼠标悬停，:focus获得焦点，:first-child第一个子元素）。伪元素：以双冒号
::开头，用于样式化元素的特定部分（如::before在元素内容前插入，::after在元素内容后插入，::first-line首行文本）。
四、 常用样式属性分类
盒模型：CSS 将每个元素视为一个矩形盒子，它由内到外包括：
内容：
width,height定义其尺寸。内边距：
padding，内容与边框之间的透明区域。边框：
border，围绕内容和内边距的线。外边距：
margin，盒子与其他盒子之间的透明间隔。box-sizing属性可以改变盒模型尺寸的计算方式。
文本与字体：
字体：
font-family（字体族），font-size（大小），font-weight（粗细），font-style（样式，如斜体）。文本：
color（颜色），text-align（水平对齐），line-height（行高），text-decoration（装饰，如下划线）。
背景：
background-color（背景色），background-image（背景图片），background-repeat（重复方式），background-position（位置）。布局相关：
显示类型：
display属性是关键，它决定元素如何生成盒子。常见值有block（块级元素，独占一行）、inline（行内元素，不独占一行）、inline-block（行内块，可设宽高的行内元素）、none（不显示）。定位：
position属性，设置元素的定位方式。static：默认，正常文档流。relative：相对自身原本位置进行偏移。absolute：相对于最近的非static定位的祖先元素进行定位。fixed：相对于浏览器窗口进行定位。sticky：在滚动时在特定阈值内变为固定定位。
浮动：
float属性，最初用于文字环绕图片，后来被用于实现多栏布局，现在已逐渐被 Flexbox 和 Grid 取代。
五、 现代布局技术
Flexbox（弹性盒子布局）：一种一维布局模型，用于在一条直线上排列元素。它非常适合处理元素的分布、对齐和顺序，即使元素尺寸未知或动态变化。通过给父容器设置
display: flex;来启用。CSS Grid（网格布局）：一种二维布局系统，将页面划分为行和列，可以同时处理行和列上的布局。它非常适合构建复杂的整体页面结构。通过给父容器设置
display: grid;来启用。
六、 其他重要概念
层叠与继承：
层叠：当多条规则应用于同一元素时，CSS 通过一套优先级规则（涉及来源、选择器权重、代码顺序）来决定最终应用哪个样式。
继承：某些样式属性（如字体、颜色）会自动从父元素传递到子元素。
单位：
绝对单位：如
px（像素）。相对单位：如
%（百分比），em（相对于父元素字体大小），rem（相对于根元素字体大小），vw/vh（视窗宽度/高度的百分比）。
响应式设计：使用 媒体查询 技术，根据不同的设备特性（如屏幕宽度）来应用不同的 CSS 规则，使网页能在各种设备上都能良好显示。