这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一，理解css
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。通过使用 CSS 我们可以大大提升网页开发的工作效率！
CSS是Cascading Style Sheet的简称，中文含义为“层叠样式表”，简称“样式表”，是用来控制如何显示HTML元素的一种样式设计语言，简单的说，就是告诉浏览器如何渲染网页。
CSS是一项出色的技术，它使得网页的表现与内容完全分离，可以称得上WEB 设计领域的一个重大突破。CSS使得网站维护工作变得更容易，不会因为内容的改变而影响表现，也不会因为表现的改变而影响内容。
二，如何使用css
CSS 规则集（rule-set）由选择器和声明块组成 我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
语法
比如说，我们要让p标签内的文本都是红色，字体居中，我们就可以这么来写
p {
color: red;
text-align: center;
}
创建和引用
外部样式表（外联式）
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部样式表-->
<link rel="stylesheet" href="main.css">
</head>
<body>
<p>外部样式</p>
</body>
</html>
index.css
p {
color: red;
text-align: center;
}
定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
CSS 定位机制
CSS 有三种基本的定位机制：普通流（相对定位）、绝对定位和浮动定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
