css的基本知识

一.CSS 选择器

1. 属性选择器

属性选择器允许根据元素的属性及属性值来选择元素：

2. 伪类选择器进阶

除了常见的:hover、:active，这些伪类也非常实用：

3. 伪元素的妙用

伪元素用于创建不在 DOM 中的虚拟元素，常用的有：

二.盒模型：布局的基础

1. 内容区（content）：实际内容所在区域
2. 内边距（padding）：内容区与边框之间的空间
3. 边框（border）：围绕内边距和内容区的线
4. 外边距（margin）：边框外的空间，用于与其他元素分隔

三.布局

1. Flexbox 布局

Flexbox（弹性盒布局）是一维布局模型，适用于行或列的布局：

2. Grid 布局

Grid（网格布局）是二维布局模型，适用于复杂的行列布局：

3. 响应式设计与媒体查询

媒体查询允许根据设备特性应用不同的样式：

四.常用css属性

1. 文本样式

   • color：文本颜色（#ff0000、rgb(255,0,0)、red）
   • font-size：字体大小（16px、1.2em、120%）
   • font-family：字体（"Microsoft YaHei", sans-serif）
   • text-align：对齐方式（left、center、right）
   • line-height：行高（1.5表示 1.5 倍字体大小）

2. 盒模型属性

   控制元素的布局和间距（核心概念）：

   • width/height：内容区域宽高
   • padding：内边距（内容与边框的距离）
   • margin：外边距（元素与其他元素的距离）
   • border：边框（border: 1px solid #ccc;）

3. 背景属性

   • background-color：背景色
   • background-image：背景图（url("bg.jpg")）
   • background-repeat：背景图重复方式（no-repeat、repeat-x）

4. 布局属性

   • display：元素显示类型（block、inline、flex、grid）
   • position：定位方式（static、relative、absolute、fixed）
   • float：浮动（left、right）