1、什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言

2、CSS基本语法

选择器（Selector）

类型选择器,通配选择器,类选择器,ID选择器,标签属性选择器,伪类选择器,伪元素选择器,后代选择器,子代选择器,相邻兄弟选择器,通用兄弟选择器

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）

一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）

改变 HTML 元素样式的途径。（本例中 color 就是

元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）

3、CSS究竟是怎么工作的？

1. 载入HTML文

2. 将HTML文件转化成一个DOM（Document Object Model）

3. 浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式

4. 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）

5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局

4、CSS三大特性

1. 层叠性

根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。

2. 继承性

子标签会继承父标签的样式：text-，font-，line-这些元素开头的可以继承，以及color属性

3. 优先级

权重比较

权重叠加

5、盒子模型(Box Model)

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。
• 
  

  6、Float(浮动)

  会使元素向左或向右移动，其周围的元素也会重新排列

  清除浮动 - 给父元素使用 clear

  .text_line
  {
  clear:both;
  }

  
  
  

  7、CSS Position(定位)

1. 静态定位

8、网页布局

9、元素的显示与隐藏

10、块级格式化上下文 BFC