CSS（层叠样式表）是用于描述网页文档外观和格式的一种标记语言，它可以用来设置文本、图片、表格等元素的样式，使网页更加美观、易读，本文将介绍CSS的一些精华内容，包括选择器、盒模型、浮动、定位、弹性布局等。
1、选择器
选择器是CSS的核心，它用于选取HTML文档中的元素，并为这些元素设置样式，常见的选择器有以下几种：
- 标签选择器：通过HTML标签来选取元素，如p {...}表示选取所有的<p>标签。
- 类选择器：通过类名来选取元素，如.class {...}表示选取所有具有class类名的元素。
- ID选择器：通过ID来选取元素，如#id {...}表示选取具有id属性值为id的元素。
- 后代选择器：通过空格分隔多个选择器，选取某个元素的所有后代元素，如div p {...}表示选取所有<div>标签内的<p>标签。
- 子元素选择器：通过>符号选取某个元素的直接子元素，如ul > li {...}表示选取所有<ul>标签的直接子元素<li>。
- 相邻兄弟选择器：通过+符号选取紧邻的兄弟元素，如h1 + p {...}表示选取紧跟在<h1>标签后面的<p>标签。
- 通用兄弟选择器：通过~符号选取所有同级的兄弟元素，如h1 ~ p {...}表示选取所有与<h1>标签同级的<p>标签。
2、盒模型
盒模型是CSS中一个重要的概念，它描述了HTML元素的布局和尺寸，一个元素的内容、内边距（padding）、边框（border）和外边距（margin）共同组成了一个盒子，盒模型有以下几个属性：
- width和height：设置元素的宽度和高度。
- padding：设置元素的内边距，即内容与边框之间的距离。
- border：设置元素的边框，可以分别设置上、右、下、左四个方向的边框样式和宽度。
- margin：设置元素的外边距，即元素与其他元素之间的距离。
3、浮动
浮动是CSS中一个重要的布局技巧，它可以使元素脱离正常的文档流，并允许其他元素环绕在它们周围，浮动有以下几个属性：
- float：设置元素的浮动方式，可选值有left、right和none。
- clear：清除浮动，防止其他元素被浮动元素覆盖，可选值有left、right、both和none。
4、定位
定位是CSS中另一个重要的布局技巧，它可以使元素相对于其正常位置或最近的已定位祖先元素进行定位，定位有以下几个属性：
- position：设置元素的定位方式，可选值有static、relative、absolute、fixed和sticky。
- top、right、bottom和left：设置元素距离其定位参考点的偏移量。
- z-index：设置元素的堆叠顺序，数值越大，元素越靠上层显示。
5、弹性布局
弹性布局（Flexbox）是一种现代的布局方式，它可以使元素在不同屏幕尺寸和设备上自适应地排列，弹性布局有以下几个属性：
- display：设置元素的显示类型为弹性容器或弹性项目。
- flex-direction：设置弹性容器中项目的排列方向，可选值有row（默认）、row-reverse、column和column-reverse。
- justify-content：设置项目在主轴上的对齐方式，可选值有flex-start（默认）、flex-end、center、space-between和space-around。
- align-items：设置项目在交叉轴上的对齐方式，可选值有stretch（默认）、flex-start、flex-end、center和baseline。
- flex-wrap：设置项目是否换行显示，可选值有nowrap（默认）、wrap和wrap-reverse。