引入方式

• 行内样式

• 内部样式

• 外部样式

CSS选择器

• id

• class

• 属性选择器

• 伪类选择器

• 标签，伪类

• 通配符

• 父子选择器

• 派生选择器

• 直接子元素选择器

CSS权重

！important——infinity

行间样式——1000

id—–100

css|伪类|属性—–10

标签|伪元素—–1

通配符—-0

显示模式

行内元素（没有宽度和高度，一行可以放多个）

块级元素（有宽度和高度，一行只能放一个）

行内块元素（有宽度和高度，一行可以放多个）

行内元素不能嵌套块级元素,只能嵌套行内元素

块级元素可以嵌套任何元素

字体样式

font-weight

font-family

font-style（normal,italic）

font-size

文本样式

color

text-align

line-height

text-indent

text-decoration

盒子模型

border

border-radius

margin

padding

总共大小

box-sizing （content/border）

利用border做一个小demo（画三角形）

文档流

（页面的布局和显示，从上到下，从做到右的显示）

float（可以说脱离了文档流，但是仍然会占据位置，文字可以看到浮动的元素，浮动的元素也可以相互看得见，只有块级元素看不见。浮动不仅影响自己也要影响周围的元素）

浮动带来的影响（高度塌陷）

脱离文档流的影响、后面的同级元素会顶上来，父级检测不到脱离文档流的元素，导致内容无法撑开

解决方案

+ 给父级盒子宽度（每次都要修改很麻烦）

+ 设置p标签（毫无意义，我们的结构是不能随意的修改）

+ 利用伪元素清除浮动（哎，这个好! ::after，::before）

定位

• 相对定位

• 不脱离文档流、针对自身定位（元素左上角、无法触发bfc）

• 绝对定位

• 脱离文档流

• 针对父级盒子定位（会触发bfc）

• 如果固定定位的子级有浮动

• 可以省略清浮动的操作

• 固定定位

• 脱离文档流

• 基于视口的定位

• 子绝父相的应用

• margin塌陷问题（如果大于他，当然带着它一起走）

• 或者给它父亲填上（border: 1px solid #000）这种方法当然不行。当然还有更加高级的方法

何为bfc？

每一个盒子的内部都会有一套渲染的规则，盒子都要遵循这些规则，当然有一些不听话的可以改变这里面的规则。

如何解决一个margin塌陷问题，触发这个盒子bfc

如何触发一个盒子的bfc

• absolute

• float

• overflow: hidden

• display: inline-block

CSS3

新增的trantions过渡动画，如果谁要设置就给谁添加。并且必须要指定宽高，不然会失效。