CSS3

1、CSS样式由一条条规则组成，每一条规则由选择器+声明块组成，声明块由一个个声明+{}组成，声明由CSS属性+CSS属性值构成的键值对组成
2、现有一条选择器： div li #box1,浏览器解析该选择器的顺序为从右往左，这样可以加快渲染时间，提高页面访问速度
3、学习CSS样式，要注意其默认值以及是否可继承
4、li中不能再嵌套li
5、让已经设置好宽高的div的子元素span变得和div一样大的方法：div设为相对定位，span设为绝对定位+left:0;right:0;top:0;bottom:0;

声明的优先级
选择器的特殊性：
选择器的特殊性由选择器本身组件决定，特殊性值表述为4个部分，如 0，0，0，0
一个选择器的具体特殊性如下确定：
内联声明  1，0，0，0
id选择器   0，1，0，0
类选择器，属性选择器，伪类  0，0，1，0
元素选择器，伪元素  0，0，0，1
通配符选择器 0，0，0，0
结合符(逗号)对选择器特殊性没有一点贡献
继承没有特殊性，甚至连0特殊性都没有(0特殊性比没有特殊性强)
特殊性1，0，0，0大于所有以0开头的特殊性(不进位)
若多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

重要声明：
有时某个声明比较重要，超过了所有其他声明，CSS2.1就称其为特殊声明，并允许在这些声明的结束分号前插入!important来标识（必须要准确放置!important，否则声明无效）
!important总是要放在声明的最后，即分号的前面
标识为!important的声明并没有特殊的特殊性，不过要与非重要声明分开考虑
实际上所有的重要声明会被浏览器分为一组，非重要声明被分为另一组，重要声明之间及非重要声明之间的冲突现各自在其内部解决，如果一个重要声明与非重要声明发生冲突，胜出的总是重要声明

来源
CSS样式来源大致由三种：创作人员(程序员)、读者(用户)、用户代理(浏览器)
权重：
读者的重要声明、创作人员的重要声明、创作人员的正常声明、读者的正常声明、用户代理的声明
读者的声明，火狐/chrome没有把这个接口暴露给我们，只能在IE浏览器中找到(设置->Internet选项->辅助功能->使用样式表编排文档格式)

层叠
1、找出所有相关的规则，这些规则都包含一个选择器
2、计算声明的优先级：先按来源排序、(若来源相同)再按选择器的特殊性、(若特殊性一样)最后按顺序
 

自定义字体：
windows->fonts中某些字体有的浏览器并不支持，我们可以将字体放到服务器上，在用户计算机加载页面时从服务器上下载即可，消除用户对电脑字体的依赖。
自定义字体规则：@font-face{font-family:"xx";src:url(相对路径)}     (xx为程序员为自定义字体所设的名字)
字体图标：不失帧，降低网络的负担，易于操作

1、opacity属性也不会被继承，但是其会影响后代元素
2、背景透明文字不透明：用background-color:rgba(0,0,0,.5);  color:red;
3、text-shadow用来为文字添加阴影，可以添加多层，阴影值之间用逗号隔开(多个阴影时，第一个阴影在最上边)，该样式不能被继承，值：color <offset-x> <offset-y> <blur-radius>，color........  （颜色，x,y偏移量，阴影程度）
4、使用过滤器filter:blur()；让整个元素模糊
5、文字描边 -webkit-text-stroke:4px pink;
6、文字排版：
direction控制文字方向(默认：ltr)，要配合unicode-bidi:bidi-override;来使用 
文字溢出用省略号显示（盒子不能被内容撑开）：文字一般满一行就自动换行，white-space:nowrap;可以不让文字换行；然后：overflow:hidden;截掉溢出内容，最后text-overflow:ellipsis;
7、overflow默认值为visible，设置为auto后，若元素超出指定区域则出现滚动条

盒模型新增样式：
1、盒模型阴影：box-shadow用来为盒子添加阴影，可以添加多层，阴影值之间用逗号隔开(多个阴影时，第一个阴影在最上边)，该样式不能被继承，值：color  (inset) <offset-x> <offset-y> <blur-radius> <spread-radius>,.......
（颜色，阴影在边框内(默认在边框外)，x,y偏移量，阴影程度，阴影扩大/收缩(默认为0)）
2、倒影：-webkit-box-reflect:above <gap>; （倒影方式，倒影与原图间隙(默认为0)）(只有支持webkit内核引擎的浏览器才生效)
3、box-sizing:border-box; 本来width,height设置的是盒子内容区的大小，加padding，整个盒子变大，内容区不变；而设置为该属性后，加padding整个盒子大小不变，内容区变小
4、圆角：border-radius也可以分为上下左右，移动端开发值最好不要用百分比

1、PC端IE6固定定位会失效，移动端大部分情况也有问题
      方法：绝对定位模拟固定定位
      初始化块：视窗大小的矩形
      系统默认滑动块在文档(窗口)上
      绝对定位的元素的父元素如果都没有开启相对定位，则该元素相对于初始化块进行定位
 

<div id="wrap">  //以该元素代替初始化块
    <div id="box1">

    </div>
    <div style="height: 2000px">

    </div>
</div>

    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        html
        {
            height: 100%;
            overflow: hidden;  /*禁止系统默认滑动块*/
        }
        body
        {
            height: 100%;
            overflow: hidden;  /*禁止系统默认滑动块*/
        }
        #wrap
        {
            height: 100%;
            overflow: auto;   /*将滑动块设置为该元素*/
            border: 2px solid black;
        }
        #box1
        {
            width: 200px;
            height: 200px;
            background-color: deeppink;
            position:absolute;
            left: 0;
            top: 0;
        }
    </style>

2、关于背景
CSS2：
2.1background-img与background-color都设置时，会在上方绘制background-img，color只是被img覆盖了，若盒子大小>img，且图像不平铺，则可以看到设置的color
     background-img可以为元素设置一个或多个背景图片(每个ul之间逗号隔开)，绘制图像时，先指定的图像会在后指定图像上方显示
2.2 我们通过右键点击图片所看的尺寸都是位图像素(jpeg,png)，在页面渲染时会将图片全部渲染出来，如果盒子大小<图片，就会把溢出部分截掉；如果盒子大小>图片，那么默认图片会水平，垂直平铺，但可以设置平铺方式：
     background-repeate:no-repeate; //两个方向都不平铺
     background-repeate:repeate-x;//只有水平方向平铺
     background-repeate:repeate-y;//只有垂直方向平铺
2.3 我们还可以通过background-position来指定背景图在盒子中的位置，值：<水平位移> <垂直位移>；
     这两个值可以是像素，也可以是百分比；
     百分比计算：（图像所在区域大小-图像本身大小）*百分比
     比如盒子width:100px;图像width:50px;水平位移为10%，则相当于(100px-50px)*10%=5px

CSS3:
 2.4 默认情况下background-img从padding-box开始绘制，从border-box开始剪裁(超出border的地方都裁掉)；
       利用background-origin可以设置背景图像渲染的起始位置，值：padding-box，border-box，content-box
       利用background-clip可以设置背景图像剪裁的起始位置，值：padding-box，border-box，content-box
       利用-webkit-background-clip:text;可以将背景图像设置为文字的背景图片(沿文字剪裁)[需要对文字设置透明度]
 2.5 back-ground-size 设置背景图片的大小，值：默认为auto auto
       值可以为百分比，该百分比是相对于背景区(由background-origin设置)，默认为盒子的内边距+内容区
       若只设置一个值，另一个值为auto（自适应）
       若设置两个值，则可能发生变形