CSS2.1

学而时习之，不亦说乎！

                             --《论语》

CSS:cascading style sheet(层叠样式表)

作用：描述页面的样式。

书写方式：在head标签中添加标签，<style type=”text/css”></style>

注意：css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。

注释：/*注释内容*/

常见属性：

字符颜色：color:red;

字号大小：font-size:40px;

加粗：font-weight:bold;

背景颜色：backgroud-color:red;

下划线：text-decoration:underline;

不斜体：font-style:normal;

斜体：font-style:italic;

不加粗：font-weight:normal;

没有下划线：text-decoration:none;

选择器：

id选择器：#id

类选择器：.class

标签选择器：tagName

后代选择器：两个选择器之间使用空格隔开

交集选择器：两个选择器之间不使用空格隔开

并集选择器：两个选择器之间使用逗号隔开

通配符：*

儿子选择器：两个选择器之间使用>隔开，IE7开始兼容

序选择器：(：first-child),(:last-child)，IE8开始兼容

下一个兄弟选择器：两个选择器之间使用+号隔开，IE7开始兼容

继承性：

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。

层叠性：

多个相同的样式加在同一个标签上时，可以互相重叠。

权重计算：id选择器，class选择器，标签选择器。使用逗号分隔，不能进位（理论上255可以进一位）。

!important：这个加在css属性后面时，可以将该属性的权重提升为无限大，不推荐使用。

盒子模型：

padding：内边距，一共4个小属性，padding-top，padding-right， padding-bottom，padding-left。综合设置时按照上右下左，缺少补对边的规则。

border：边框，有三个要素：粗细、线型、颜色。常用线型：dotted(虚线)，dashed(小正方形)，solid(实线)。其余的可能浏览器有差别，不推荐。

border属性能够被拆开，有两大种拆开的方式：

1） 按3要素:border-width、border-style、border-color

2） 按方向：border-top、border-right、border-bottom、border-left

把每个方向的，每个要素拆开，一共12条语句：

1           border-top-width:10px;

2           border-top-style:solid;

3           border-top-color:red;

4           border-right-width:10px;

5           border-right-style:solid;

6           border-right-color:red;

7           border-bottom-width:10px;

8           border-bottom-style:solid;

9           border-bottom-color:red;

10       border-left-width:10px;

11       border-left-style:solid;

12       border-left-color:red;

实际使用时使用大属性做整体，然后使用小属性层叠。

标准文档流：

微观现象：1.空白折叠；2.高矮不一，底边对齐；3.自动换行。

标准文档流等级森严。标签分为两种等级：

1） 块级元素

● 霸占一行，不能与其他任何元素并列

● 能接受宽、高

● 如果不设置宽度，那么宽度将默认变为父亲的100%。

2） 行内元素

● 与其他行内元素并排

● 不能设置宽、高。默认的宽度，就是文字的宽度。

在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。

文本级：p、span、a、b、i、u、em

容器级：div、h系列、li、dt、dd

CSS的分类和上面的很像，就p不一样：

所有的文本级标签，都是行内元素，除了p，p是个文本级，但是是个块级元素。

所有的容器级标签都是块级元素。

转换：

块级元素可以设置为行内元素：display:inline;

行内元素可以设置为块级元素:display:block;

css中一共有三种手段，使一个元素脱离标准文档流：

1） 浮动

2） 绝对定位

3） 固定定位

浮动：

float:left;或者float：right;

浮动元素脱离标准文档流：1.都可以设置宽高。2.浮动元素互相贴靠。3.字围效果。4.没有设置width，会自动收缩为文字宽度。

清除浮动：

浮动的元素会相互影响，带来混乱。

1.给祖先容器增加height。

2.给祖先容器增加clear:both;属性；缺陷：margin失效。

3.隔墙法：a.外墙法，在两个元素之间增加一个div，div设置clear:both;属性，两个元素就不会被浮动影响。b.内墙法，在第一个元素内部最后增加一个div，div设置clear:both;属性，两个元素就不会被浮动影响。

4.给父容器增加overflow:hidden;属性。

浏览器兼容问题：

第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大

解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。

height: 4px;

_font-size: 0px;

第二，IE6不支持用overflow:hidden;来清除浮动的

overflow: hidden;

_zoom:1;

margin：

margin塌陷现象：标准文档流中，两个盒子竖直方向的margin不会叠加，以大的margin为准。

盒子居中：margin:0 auto;

注意：

1） 使用margin:0 auto; 的盒子，必须有width，有明确的width

2） 只有标准流的盒子，才能使用margin:0 auto; 居中。

也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;

3） margin:0 auto;是在居中盒子，不是居中文本。

文本的居中，要使用 text-align:center;

IE6双倍margin:

在IE6，当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。

解决方案：

1）使浮动的方向和margin的方向，相反。

2）使用hack,给第一个盒子一半margin：_margin-left:20px;

IE6的3pxbug：

出现这个说明代码不标准，不要用儿子的margin，用父亲的padding。

 定位：

相对定位：position:relative;

1.相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。

2.相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。

3.用left、right来描述盒子右、左的移动；用top、bottom来描述盒子的下、上的移动。

position: relative;

top: 10px;

left: 40px;

绝对定位：position:absolute;

1.绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了。

2.绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角。

3.如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角。

4.一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。

5.绝对定位的儿子，无视参考的那个盒子的padding。

6.绝对定位的盒子居中

绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。

width: 600px;

height: 60px;

　　 position: absolute;

left: 50%;

top: 0;

margin-left: -300px;   → 宽度的一半

非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。

固定定位：position:fixed;

1.固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。

2.固定定位脱标！

3.IE6不兼容。

z-index

● z-index值表示谁压着谁。数值大的压盖住数值小的。

● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

● z-index值没有单位，就是一个正整数。默认的z-index值是0。

● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

● 从父现象：父亲怂了，儿子再牛逼也没用。