css3基础知识

1、css盒模型

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

（1）IE6怪异模式

IE6盒子模型

（2）w3c标准盒子模型

w3c标准盒子模型

2、边框属性

（1）边框宽度：border-weight
（2）边框样式：boeder-style
点状边框：dotted [ˈdɒtɪd]
虚线边框：dashed [dæʃt]
实线边框：solid
点状边框：double [ˈdʌbl]
（3）边框颜色：边框颜色

综合写法：border:1px solid gray;

用边框制作小三角形

3、css兼容性问题

所有浏览器通用：height:100px;
IE6专用：_height:100px;
IE7专用：*+height:100px;
IE6、IE7共用：*height:100px;
IE7、FF共用：height:1000px !important

例如：
#exampole{
    height:100px;     /*FF*/
    *height:300px;     /*IE7*/
    _height:200px;     /*IE6*/
}

需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面

4、字体属性

（1）字体样式：font-style
正常：normal
斜体：italic [ɪˈtælɪk]
倾斜：oblique [əˈbli:k]
（2）字体变化：font-variant [ˈveəriənt]
正常：normal
小体大写字母：small-caps