复习CSS

互联网前端分为三层：结构，样式，行为

HTML 超文本标记语言 从语义的角度上描述页面的结构
CSS 层叠样式表 从审美的角度负责页面的样式
JS JavaScript 从交互的角度描述页面的行为

1、CSS整体感知

CSS 层叠样式表，“层叠式”
目前最新的，CSS3，目前我们用的是CSS2.1，相互不冲突。
<style type="text/css">
</style>
Type表示类型，text表示他是纯文本。
CSS对换行不敏感，对空格，也不敏感，但是他有他的标准，冒号，分号，都不能少。

2. CSS选择器

2.1标签选择器

就是用标签名来当做选择器：
1） 所有标签都可以当做选择器
2） 不管这个标签藏的多深，都能被选择
3） 选择所有的，而不是某一个，所以是共性的，而不是特性。
一般用途在于CSS样式初始化。

2.2 ID选择器

表示选择ID

#div{
    color: red;
}

1） 所有标签都可以有ID，ID的命名，要以字母开头，可以有数字，下划线。大小写严格区分，也就是说aa,和AA是两个不同的ID
2） 同一个页面中，也就是同一个HTML文件中，不能出现两个重复的ID，也是独特的

2.3 类选择器

就是类选择器，英文叫做class。
所谓的类，他是class属性，和ID相似，任何表情都可以带有类，并且是可以重复的
一个元素可以有多个类
正确的一个思路：就是多用所谓的“公共类”，就是我们的类可以提供公共服务。
也就是说：
1） 不要试图用一个类名把某个标签元素的所有样式写完，这个标签可以多携带几个类，一起完成这个标签的样式。
2） 每个类尽可能的小，有一个公共的概念，能够让跟多的标签去使用它。
Class控制样式，ID控制行为
在我们的CSS里面，尽可能的用class去改变样式，除非极特殊的情况可以用ID，ID一般给JS使用。

一个标签，可以同时被多种选择器选择，标签选择器，ID选择器，类选择器，这些选择器都可以选择上同一个标签，从而影响样式，CSS层叠式的第一层含义。

3. 高级选择器

3.1 后代选择器

后代选择器不等于子代选择器，空格代表后代
只要是选择标签的后代，不管隔了多少代，都能被选中。

3.2并集选择器

可以同时选择多个类名，用,隔开

3.3交集选择器

p.fg{color: blue;}

必须同时满足两个条件，同时是P标签并且CLSS为fg

3.4 通配符选择器

*{margin:0;padding:0;}

但是，通配符选择器效率不高，页面上标签越多的时候，效率越低。
在项目开发中，需要改变全局，尽量用公共类

3.5 儿子选择器

IE7开始兼容，IE6不好使
只能选择儿子，孙子一下选不中。

4. CSS的继承性和层叠性。

有些属性，当给自己设置的时候，自己的后代，也会被继承上，这就是继承性。

4.1 那些属性可以被继承：

Color,text-开头的，line-开头的，font-开头的
当标签被设置这些属性的时候，他的后代都会被继承上这个属性，一层层继承下去，知道最小的一代
上面的文字样式都可以被继承；所有关于盒子的，定位的，布局的属性都不能被继承。

4.2 层叠性

什么是层叠性？相当于权重；
层叠性：处理CSS冲突的能力，所以要对权重进行计算，所有的计算，没有任何兼容问题。
当选择器，选中某一个元素的时候，就要进行权重计算，
ID的数量，类的数量，标签的数量
一个ID=100的权重
一个class=10的权重
一个标签=1的权重。
并且，没有进制，比如十个标签，不等于一个class，还是比一个class小。
1,3,20
1,2,7 当权重相同的时候，选择最近的哪个，继承的权重为0.

权重问题：

1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计算权重，谁大听谁的，如果都一样，听后面写的。
2）如果没有被选中，那么权重都是0，那么就近，如果权重相同，就近原则。
2）
color: blue!important;
表示绝对选中；不用计算任何权重问题；
！important无法提升继承的权重，该是0还是0
！important不影响就近原则。

5. 盒模型

一个盒子主要属性就5个：width,height,padding,border,margin.
合起来就是一个盒模型。
盒模型主要分:W3C盒模型和IE盒模型（CSS3里面重点详解）

5.1 padding

Padding 内边距，padding的区域是有背景色的，在CSS2.1的前提下，并且背景色和内容区域相同
也就是说：background-color将填充border以内的所有区域
Padding是四个方向，所以我们可以分别描述四个方向；
Padding：20px 30px 50px;
Padding四个方向分别为：上，右，下，左；
Padding是可以用一个值包含四个方向；
小属性：Padding-left:20px;
大属性：padding:20px;
小属性一定不能写在大属性上面，但是小属性可以写在大属性下面

5.2 border

边框：边框三要素：线型、粗细、颜色；
颜色如果不写，默认黑色，其他不写，没有边框。
一般在公司开发中，如果需要用到边框样式，则选择图片边框。一般不需要用到那些奇怪的属性。
Borde:1px solid red;
同样，可以拆分为三个小属性来写
Border-width,border-style,border-color。
小属性如果设置多个值，那么就是上右下左的顺序执行，并且用空格隔开。
小属性还可以往下拆一层
Border-top-width;
平时在工作中，尽量用大属性写。

6. 标准文档流

宏观上来讲，我们的web页面，是一个流，必须从上往下一步步执行，就像织毛衣一样
微观来讲：
1） 空白折叠现象：
比如，我们想让IMG标签之间没有空隙，则必须紧密相连。
2） 高矮不齐，底边对齐
3） 自动换行，一行写不满，换行写

7. 块级元素和行内元素

在标准文档流中，标签严格分为两个等级：
1） 块级元素
霸占一行，不能与其他任何元素并列，
能接受宽高的设置
如果不设置宽度，那么宽度默认为父级元素的100%
2） 行内元素
与其他元素并排，不能设置宽度和高度，默认的宽度就是内容的宽度。
在之前的HMTL里面，我们标签分为：文本级、容器级
文本级：p,span,a,b,I,u,em
容器级：div,h,li,dt,dd
CSS的分类，和上面很想，只有P不同
所有文本级标签，都是行内元素，P是块级元素
所有容器级标签都是块级元素。

7.1块级元素和行内元素的互相转换

Display:inline
Display是显示模式的意思，inline就是行内
Display:block
转为块级元素
Display:none 隐藏元素，并且元素不占位置。
Visbility 元素不可见，但是会占用位置
标准流里面限制很多，标签的性质很恶心，比如要并排，就是设置宽高，所以，我们要做一个操作，脱离标准文档流：
CSS一共有是那种脱离标准文档流的手段：
1） 浮动
2） 绝对定位
3） 固定定位

8. 浮动

浮动是CSS布局里面用的最多的一个属性。
浮动的三个性质：

8.1 浮动的元素脱标

浮动的元素脱离了标准文档流，不再和其他元素同处一个水平面上。

8.2 浮动的元素互相贴靠

如果有足够空间，那么就会互相铁卡，实在靠不住，就自己靠墙

8.3 浮动的元素有 “子围”

9. 清除浮动

9.1 清除浮动1：给浮动的元素的祖先元素添加高度。

如果一个元素要浮动，那么他的祖先元素，一定要有高度，因为有高度的盒子，才能关注的浮动。

9.2 clear:both

经常用这个清除浮动，但是这个方法有个问题，会导致margin失效

9.3 隔墙法

在隔墙法的办法上，还有一个方法，内墙法。

9.4 overflow:hidden;

overflow:溢出，hidden：隐藏
一个付清不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow：hidden，那么，父亲就能被儿子撑出高度。

9.5 浏览器的兼容问题。

第一：IE6，不支持小于12PX的盒子，任何小于12PX的盒子，在IE6里面看起来都大了一些。

.box2{width: 5px;height: 5px;background: red;_font-size: 0px;}

解决方法：将盒子的字号设置小于盒子的高度。
浏览器hack，hack就是我们平时说的黑客，指浏览器提供的后门，专门针对某一个浏览器做兼容，IE6留了一个后门，只要给CSS属性前面加上_，那么这个属性就会变成IE6认识的专有属性。

第二：IE6不支持用overflow：hidden来清除浮动
那么，就给IE6单独加上一条属性：_zoom:1;
这个属性可以出发浏览器的hasLayout机制，这个机制只有IE6才有，所以不用管是干嘛的。

10. Margin

Margin外边距

10.1 margin 的坍塌现象。

在标准文档流中，竖直、垂直方向的margin不叠加，以较大的那个为准。

如果不在标准流，那么是不会出现坍塌现象。比如都浮动起来。

10.2 盒子的居中。

Margin：0 auto;
Margin的值为auto,表示自动。当left、right两个方向，都是auto，则表示自动相同，就居中了
1） 使用这个方法的时候，盒子必须有width,并且是明确的宽度。
2） 只有标准流的盒子，才能用这个方法。
3） 这个方法是居中盒子，不是居中盒子的内容。
4） 居中内容：text-align:conter;

10.3 平时开发善于用父亲的padding，而不是儿子的margin、

如果父亲没有border，那么儿子的margin实际上是给文档流踹了一脚，所以，他的父亲也跟着掉下来了
Margin这个属性，本质上是用来描述兄弟和兄弟之间的距离，最好不要用margin来表达父子之间的距离
所以，我们开发中，善于用父亲的padding，而不是儿子的margin.

10.4 关于margin的IE6兼容问题。

IE6的双倍margin BUG。
当出现连续浮动的元素，携带和浮动方向相同的margin，队首元素，会双倍margin
解决方法：使浮动方向和margin方向相反，比如
Float:left;margin-right:20px;
在IE6里面，会出现3PX的BUG。
解决方法：不用去管，出现这个情况，就是代码不标准，标准不允许子元素对父元素设置margin

11. 行高

CSS中，所有的行，都有行高，盒模型的padding，绝对不是直接作用在文字上的，而是作用在行上的。必须行高来设置文字居中。
一般，为了严格保证文字在行里面居中，我们有个默认的规定：行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能被2整除。

11.2 font属性。

使用font属性，能够将字号、行高、字体，都一起设置。
font: 14px/250px"微软雅黑";
等价于：
Font-size:14px;
Line-height:250px;
Font-family:’微软雅黑’；
网页上设置字体，必须是用户电脑已经安装的字体；
在页面中，一般我们只用：微软雅黑，宋体，黑体，如果需要用到其他字体，一般选择切图。
有的时候，为了防止用户电脑没有微软雅黑，那么就用英文状态下的逗号隔开，然后选择备选字体。
font-family: "微软雅黑","宋体";
备选字体可以有无数个，都用逗号隔开。
我们在设置备选字体的时候，要把英文字体放在前面，这样所有的中文，就不能匹配英语字体，就自动变成后面的中文字体。
所有中文字体，都有一个英文别名
微软雅黑的英语别名是：
Microsoft YaHei
宋体的英语别名是：
SimsSun.
行高可以用百分比设置，表示字号的百分之多少，一般来说，都要大于100%,因为行高一定大于字号。
Font：12px/24px;
等价于：
Font:12px/200%;

12. 超链接的们美化。

超链接就是a标签。

12.1 伪类。

a标签有四种伪类：
a:link{
表示用户没有点击过这个链接的样式。
}
a:visited{
表示用户访问过这个链接的样式
}
a：hover{
表示用户鼠标悬停的样式。
}
a:active{
表示用户点击这个链接，但是没有松开鼠标的时候的样式
}
记住，这四种状态，在CSS中，必须按照顺序写，否则，失效
然后，在他们那些前端前辈的研究中发现，这几个a标签的伪类美化，是可以简写的：
a:link,a:visited是可以省略的，直接写在a标签里面

13. Background

13.1 background-color:red;

背景颜色设置。
有三中表示方法：
单词、rgb、十六进制。

13.2 background-image:

给盒子加上背景图片。
Background-image: url(img/1.png);
用相对路径写。
背景图片默认平铺开来。

13.3 background-repeat

设置背景图是否平铺，重复。
有三个属性：
background-repeat： no-repeat; 不重复
background-repeat: repeat-x; 横向重复
background-repeat： repeat-y; 纵向重复

13.4 background-poisition

背景属性定位。
background-poisition: x轴移动量 y轴移动量；
移动量用像素表达，并且可以为负数。

13.5 CSS精灵：

“CSS精灵”，也叫做“CSS雪碧”技术，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片，然后用，CSS的背景定位来显示我们所需要的图片部分。
优点：减少了HTTP请求，比如说原本有四张图片，那么就需要4个HTTP请求，但是用了CSS精灵，四张合为一张，HTTP请求就只有一个了。、

13.6 background-attachment

背景固定在网页，不会随着滚动条滚动而滚动。

13.7 background是可以写成综合属性

background:red url(img/1.png) no-repeat 100px 100px fixed;

14. 相对定位

定位有三种：相对定位、绝对定位、固定定位。
相对定位：position: relative；
什么是相对定位？
相对定位，就是微调元素的位置，让元素相对自己原来本身的位置，进行位置调整
相对定位不脱标，老家留坑，形影分离。
相对定位不脱离标准文档流，真实位置，实在原来的位置，只不过肉眼看到的影子被定位过去了，到处飘。

14.1 相对定位的用途

相对定位有坑，所以一般不做“压盖效果”，在页面中的效果很小，就两个：
1） 微调元素
2） 做绝对定位的参考，子绝父相。
相对定位有两个值：top,left。

15. 绝对定位

position: absolute;
绝对定位比相对定位更灵活。
并且绝对定位是脱离标准文档流的，所有的标准文档流的性质，在使用了绝对定位后，都不遵守了。
然后，使用了绝对定位后，标签就不区分所谓的行内元素和块元素了，不需要display：block就可以设置宽高了。

15.1 参考点

绝对定位的参考点用TOP描述，如果没有相对定位做参考，则以页面的左上角为参考点，而不是浏览器的左上角。

image.png

Bottom相对于浏览器窗口底部为参考点。

常用的方法，一个绝对定位的元素，如果父辈元素中出现了相对定位，那么就以父元素的左上角为参考点。
然后，是听从最近的有定位的祖先元素，而不一定是父亲

不一定非要相对定位，任何定位都可以做参考点。子绝父绝，子绝父相，子绝父固，都可以给儿子定位，但是，由于其他几个定位方法，没有一个盒子在文档流里面，所以不稳定，一般采取子绝父相，父亲没有脱标，儿子在父亲的范围内移动，是最好的。

当我们使用了绝对定位后，margin失效了，那么，怎么居中？
Left:50%;margin-left:负宽度的一半；

16. 固定定位

基于浏览器窗口的一个定位
页面不管如何滚动，盒子显示的位置不变
Position:fixed;
IE6 不兼容。

17. Z-index

表示层叠关系
Z-index表示谁压着谁，谁大就在上面。
只有定位了的元素才能有z-index值，不管什么定位。
Z-index没有单位，单纯的数字，只比较大小
如果都没有z-index,那么，谁写在HTML后面，谁压住别人。
从父现象，父亲z-index比别人小，自己再大也没用。