浏览器兼容问题
第一，IE6，不支持小于 12px 的盒子，任何小于 12px 的盒子，在 IE6 中看都大
解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如 0px。
1
2
| _height: 4px;
_font-size: 0px
|
IE6 留了一个后门，就是只要给 css 属性之前，加上下划线，这个属性就是 IE6 认识的专有属性。
第二，IE6 不支持用 overflow : hidden; 来清除浮动的
解决办法，以毒攻毒。追加一条 zoom : 1;
1
2
| overflow: hidden;
_zoom:1;
|
margin 相关问题
margin 塌陷现象
标准文档流中，竖直方向的 margin 不叠加，以较大的为准。
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。
盒子居中
margin 的值可以为 auto，表示自动。当 left、right 两个方向，都是 auto 的时候，盒子左右居中。
1
2
| margin-left: auto;
margin-right: auto;
|
简写为
- 使用
margin:0 auto; 的盒子，必须有 width，有明确的 width。 - 只有标准流的盒子，才能使用
margin:0 auto; 居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用 margin:0 auto; margin:0 auto; 是在居中盒子，不是居中文本。文本的居中，要使用 text-align:center;
善于使用父亲的 padding，而不是儿子的 margin
如果父亲没有 border，那么儿子的 margin 实际上踹的是 流，踹的是这 行。所以，父亲整体也掉下来了。
margin 这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个 marign 表达父子之间的距离。
margin 的 IE6 兼容问题
IE6 双倍 margin bug
当出现连续浮动的元素，携带和浮动方向相同的 margin 时，队首的元素，会双倍 marign。
解决方法：使浮动的方向和 margin 的方向，相反。
E6 的 3px bug
不要使用 margin, 使用 div 的 padding
行高和字号
文字，是在自己的行里面居中的。比如，现在文字字号 14px，行高是 24px。那么：
为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被 2 整除。
单行文本垂直居中
1
2
3
4
5
6
7
8
9
10
| <style text="text/css">
p{
height:60px;
line-height:60px;
background-color:#FF923D;
color:white;
}
</style>
<p>单行文本垂直居中测试文本</p>
|
单行文本垂直居中测试文本
只适用于单行文本垂直居中！！不适用于多行。如果想让多行文本垂直居中，需要设置盒子的 padding：
font属性
使用 font 属性，能够将字号、行高、字体，能够一起设置。
为了防止用户电脑里面，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体
我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体
1
| font-family: "Times New Roman","微软雅黑","宋体";
|
行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号。
超链接的美化
伪类：同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做 伪类。
a标签有4种伪类:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| a:link{ /*没有点击过*/
color:red;
}
a:visited{ /*曾经点击过*/
color:orange;
}
a:hover{ /*鼠标悬停*/
color:green;
}
a:active{ /*鼠标按下未松开*/
color:black;
}
|
background系列属性
background-color
1
2
| background-color: rgb(0,255,0);
background-color: #ff0000;
|
background-image
1
| background-image:url(images/wuyifan.jpg);
|
background-repeat属性
1
2
3
4
| background-repeat:repeat; /*全部平铺*/
background-repeat:no-repeat; /*显示一张图片，不平铺*/
background-repeat:repeat-x; /*水平平铺*/
background-repeat:repeat-y; /*竖直平铺*/
|
background-position属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <style text="text/css">
.testdivp{
width:200px;
height:200px;
border:1px solid red;
}
div #testdiv1{
background-image:url(image7.png);
background-repeat:no-repeat;
background-position:50px 80px;
}
div #testdiv2{
background-image:url(image7.png);
background-repeat:no-repeat;
background-position:-50px -80px;
}
</style>
<div class="testdivp" id="testdiv1"></div>
<div class="testdivp" id="testdiv2"></div>
|
css 精灵
css精灵，英语 css sprite，所以也叫做 css雪碧 技术。是一种 CSS 图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用 css 的背景定位来显示需要显示的图片部分。css 精灵有什么优点，就是减少了 http 请求。比如 4 张小图片，原本需要 4 个 http 请求。但是用了 css 精灵，小图片变为了一张图，http 请求只有 1 个了。
用单词也可以描述
1
2
3
| background-position: 描述左右的词儿 描述上下的词儿;
描述左右的词儿： left、 center、right
描述上下的词儿： top 、center、bottom
|
background-attachment 属性
1
| background-attachment:fixed;
|
背景就会被固定住，不会被滚动条滚走。
background 综合属性
1
| background:red url(1.jpg) no-repeat 100px 100px fixed;
|
等价于
1
2
3
4
5
| background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
|
相对定位
相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
绝对定位
绝对定位比相对定位更灵活。
1. 绝对定位脱离标准流
绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要 display:block; 就可以设置宽、高了。
2. 绝对定位的参考点，如果用 top 描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角
3. 绝对定位以盒子为参考点
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。
最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷.
1
2
3
4
5
| <div class="box1"> → 相对定位
<div class="box2"> → 没有定位
<p></p> → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
</div>
</div>
|
不一定是相对定位，任何定位，都可以作为参考点
1
2
3
| <div> → 绝对定位
<p></p> → 绝对定位，将以div作为参考点。因为父亲定位了。
</div>
|
绝对定位的儿子，无视参考的那个盒子的 padding。
4. 绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以 margin: auto; 失效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <style text="text/css">
div #testdw1{
position:relative;
width:100%;
height:80px;
background-color:#FFCF00;
}
div #testdw2{
background-color:#31B431;
width: 200px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -20px;
}
</style>
<div id="testdw1">
<div id="testdw2"></div>
</div>
|
固定定位
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
固定定位脱标！
IE6 不兼容。
z-index
只有定位的盒子里面才有 z-index:
- z-index 值表示谁压着谁。数值大的压盖住数值小的。
- 只有定位了的元素，才能有 z-index 值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用 z-index 值。而浮动的东西不能用。
- z-index 值没有单位，就是一个正整数。默认的 z-index 值是 0。
- 如果大家都没有 z-index 值，或者 z-index 值一样，那么谁写在 HTML 后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <style text="text/css">
div #testdw3{
position:relative;
width:100%;
height:200px;
background-color:#FFCF00;
}
div #testdw4{
background-color:#31B431;
width: 100px;
height: 100px;
position: absolute;
z-index:99;
left: 400px;
top: 50px;
}
div #testdw5{
background-color:#F34836;
width: 100px;
height: 100px;
position: absolute;
left: 450px;
top: 70px;
}
</style>
<div id="testdw3">
<div id="testdw4"></div>
<div id="testdw5"></div>
</div>
|
