CSS

选择器：
标签选择器，类选择器，ID选择器，
逗号代表同级选择器，空格代表(div p)在所有的div下的p标签，父子，父孙都可以。
通配符*选择器。
+, 相邻兄弟选择器
（ >选择亲儿子元素
focus伪类选择器一般情况下只有表单元素可以获得焦点。
选择所有带target属性的元素。[target]
[target=_blank] 选择 target="_blank" 的所有元素。
伪类选择器，伪元素选择器。
伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素，如：a:hover
伪元素是具体的元素，比如选择第二个什么什么，用::两个冒号。
before,after在某个元素之前或者之后插入内容

text-indent首行缩进。

块级元素：div h1 p ul ol li都是块级元素
特点：1、自己独占一行。2、宽度高度外边距和内边距都可以被控制
3、宽度默认是容器（父级宽度）的100%。4、内部可以放行内或者块级元素

行内元素：span ，a,strong,em,i,del只要是样式标签都是行内元素
特点：1、不换行
2、高和宽直接设置是无效的
3、默认宽度就是内容的宽度，也就是说行内元素的宽度是由内容撑起来的
4、行内元素只能容纳文本或者其他行内元素

行内块元素：
Input、img等等
特点：
1、不换行，但是之间由空隙，一行可以显示多个
2、默认宽度就是它本身内容的宽度
3、高度宽高外边距都可以被控制，属于块级元素的特点。

背景图片固定在某个位置
background-attachment：scorll / fixed

盒子模型：
组成：margin,border,padding,content。外边距，边框，内边距，实际内容。

如果给一个盒子不指定宽度，那么padding不会撑起来盒子。

外边距的典型应用。
利用margin特性实现水平居中：
两个前提条件：1、盒子必须指定宽度。2、左右的外边距设置为auto。

父子元素嵌套margin-top引起的塌陷问题，解决方法:
1、为父元素定义一个边框
2、为父元素定义上一个内边距
3、为父元素添加一个overflow:hidden。（原理未知）

box-shadow为盒子添加阴影。

传统网页布局的三种方式

1、标准流
2、浮动
3、定位

浮动的特性

1、脱标
脱离普通文档流，浮动的盒子不再占有文档流位置。
2、浮动的元素会在一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

为什么要清除浮动
1、父元素没高度
2、子元素浮动了
3、影响下面的布局

清除浮动的方法

1、额外标签法。缺点是添加了无意义的标签
2、父级元素添加overflow:hidden； 缺点是溢出隐藏
3、父级after伪元素，本质上和额外标签法则一样。缺点是兼容性。
4、父级双伪元素。缺点是兼容性。

定位：粘性定位
相对定位和固定定位的混合。
必须添加一个偏移才可以。

绝对定位和固定定位会完全压住下面的盒子，浮动定位不会。