前言

CSS（Cascading Style Sheets）是一种用于描述网页样式的语言。它可以控制网页的布局、颜色、字体、大小、背景等各种样式，使网页更加美观、易读、易用。本文将介绍CSS的基本语法、选择器、盒模型、布局、动画等方面的知识。

1.基本语法

CSS的基本语法由选择器、属性和属性值组成。选择器用于选中HTML元素，属性用于描述元素的样式，属性值则是属性的具体取值。下面是一个简单的CSS样式规则：

h1 {
    color: red;
    font-size: 24px;
}

其中，h1是选择器，表示选中所有<h1>元素；color和font-size是属性，分别表示文字颜色和字体大小；red和24px是属性值，分别表示红色和24像素大小。

2.选择器

CSS的选择器用于选中HTML元素，可以根据元素的标签名、类名、ID、属性等进行选择。下面是一些常见的选择器：

2.1 标签选择器

标签选择器用于选中所有指定标签的元素，例如：

p {
    color: blue;
}

表示选中所有<p>元素，并将它们的文字颜色设置为蓝色。

2.2 类选择器

类选择器用于选中所有指定类名的元素，类名以.开头，例如：

.highlight {
    background-color: yellow;
}

表示选中所有class属性为highlight的元素，并将它们的背景颜色设置为黄色。

2.3 ID选择器

ID选择器用于选中指定ID的元素，ID以#开头，例如：

#logo {
    width: 100px;
    height: 50px;
}

表示选中id属性为logo的元素，并将它们的宽度设置为100像素，高度设置为50像素。

2.4 属性选择器

属性选择器用于选中所有具有指定属性的元素，例如：

a[target="_blank"] {
    color: red;
}

表示选中所有<a>元素中target属性值为_blank的元素，并将它们的文字颜色设置为红色。

3.盒模型

CSS中的每个元素都被看作一个矩形盒子，包括内容区、内边距、边框和外边距四个部分。这个模型被称为盒模型。下面是一个示意图：

其中，content表示内容区，padding表示内边距，border表示边框，margin表示外边距。CSS中可以通过box-sizing属性来控制盒模型的大小计算方式，有两种取值：

content-box：默认值，表示盒模型的大小只包括内容区，不包括内边距、边框和外边距。
border-box：表示盒模型的大小包括内容区、内边距和边框，但不包括外边距。

4.布局

CSS可以控制网页的布局，包括块级元素和行内元素的排列方式、浮动、定位等。下面是一些常见的布局技巧：

4.1 块级元素和行内元素

块级元素和行内元素是CSS中的两种基本元素类型。块级元素通常用于表示页面的结构，例如<div>、<p>、<h1>等，它们会独占一行，并且可以设置宽度、高度、内边距、外边距等属性。行内元素通常用于表示页面的文本内容，例如<span>、<a>、<em>等，它们不会独占一行，并且不能设置宽度、高度等属性。

4.2 浮动

浮动可以让元素脱离文档流，向左或向右移动，直到碰到另一个元素或容器边缘为止。浮动通常用于实现多列布局、图文混排等效果。下面是一个示例：

.left {
    float: left;
    width: 200px;
    height: 200px;
    background-color: red;
}

.right {
    float: right;
    width: 200px;
    height: 200px;
    background-color: blue;
}

表示将两个<div>元素向左和向右浮动，宽度和高度都为200像素，背景颜色分别为红色和蓝色。

4.3 定位

定位可以让元素相对于父元素或文档进行定位，有三种取值：

static：默认值，表示元素按照正常文档流进行排列。
relative：表示元素相对于自身的位置进行定位，可以通过top、bottom、left、right属性进行微调。
absolute：表示元素相对于最近的非static定位的祖先元素进行定位，如果没有则相对于文档进行定位。

5.动画

CSS可以实现各种动画效果，例如渐变、旋转、

CSS理解 ｜ 青训营笔记

前言