CSS3学习笔记

1、CSS是什么？
Cascading Style Sheet  层叠样式表，
目的是对Html中元素的字体、颜色、边距、高度、宽度、背景图片、网页定位等设定，以达到美化网页的目的

2、CSS3是是前一直仍然在完善的CSS最新标准和规范。新加入了很多CSS样式属性，但是因为规范让然未最终形成。
   所以浏览器支持力度仍然存在不同，很多时候需要去完成CSS的兼容处理。
   CSS3新加入的特性主要如下方面：
   1）新加入一些选择器
   2）对font字体、渐变效果的支持
   3）盒子模型（圆角、阴影、边框背景）
   4）文字特效（文字阴影）
   5）2D/3D转换（平移、缩放、旋转、矩阵变换）
   6）动画过渡特效
   7）多列布局及弹性盒子、响应式媒介查询

3、CSS的兼容处理常见前缀如下：
   火狐浏览器（-moz-）
   Chrome、Safri、最新版Opera（-webkit-）
   老版IE浏览器（-ms-）
   老版（版本号15以前）Opera浏览器（-o-）

   所以经常会出现如下兼容写法：
   #example{
      -webkit-box-shadow：0 3px 5px#FFF;
      -moz-box-shadow：0 3px 5px#FFF;
      -o-box-shadow：0 3px 5px#FFF;
      box-shadow：0 3px 5px#FFF;/*无前缀的样式*/
    }

4、CSS3盒子样式
    border:1px solid red;/*分别是边框宽度、线条格式实线、颜色三个的缩写*/
    border-radius:15px 50px 30px 5px;   定义盒子圆角，左上、右上、右下、左下
    box-shadow:10px 10px 5px #888888;   定义盒子阴影，x轴偏移、y轴偏移、发散宽度、阴影颜色
   
   边框图片
   border: 15px solid transparent;
   border-image: url(img/border.png) 30 round;  /*round可以为stretch拉升*/
   -webkit-border-image:url(img/border.png) 30 round; /* Safari 5 and older */
   (30代表截取图片上、右、下、左边框的大小作为显示区)
   
   练习1：设置一个div宽度400px，高度400px。变成圆形border-radius:50%。
          增加盒子阴影效果。
          
    练习2：使用提供的border图片，设置一个div的边框图片效果
   
5、背景样式
    background-image：背景图片，多个以，号分隔
    background-repeat:背景平铺
    background-size：背景图片大小
    background-origin：设置背景的开始位置（左上角）
    Background-position：背景定位（定位的时候注意是图片动，图片默认左上角开始显示）
    
    练习3：使用多背景实线课堂上的日记本样式效果
    
6、自定义字体设置
   @font-face {
                font-family:'hehe';
                src: url('font/webfont.woff');
            }
    使用的时候如下：
    .testbox{
        font-family:'hehe'
    }

7、渐变效果：
   1）线性渐变（兼容不同浏览器）：
      background:linear-gradient(right,red,blue);
    background:-webkit-linear-gradient(right,red,blue);
    background:-o-linear-gradient(right,red,blue);
    background:-moz-linear-gradient(right,red,blue);
    
    说明：right代表从有向左渐变，可改为left,top,bottom
    
    2）圆心四周渐变：
     background: -webkit-radial-gradient(red, green, blue);
     background: -o-radial-gradient(red, green, blue);   
     background: -moz-radial-gradient(red, green, blue);
     background: radial-gradient(red, green, blue); /* 标准的语法 */

     说明：上面例子采用了3种颜色的渐变，可在最后加入 circle（圆形）  或者 ellipse（椭圆）
    
     练习3：使用定位+背景+边框，阴影等实现绝对求生的圆形图片效果。
     效果图课件PDF文档。
    
    
    
    
8、弹性盒子是 CSS3 的一种新的布局模式，
   当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
   其目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

   （注：这里只介绍常用的基础操作，细节需要网上查询调整）
    
    1）弹性布局的父容器需要加入：display:flex;则默认是按照水平左右排列的方式布局。
    
    2）flex-direction属性指定了弹性子元素在父容器中的位置
        row：横向从左到右排列（左对齐），默认的排列方式。
        row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
        column：纵向排列。
        column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
    3）内容水平对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
        flex-start：弹性项目向行头紧挨着填充。这个是默认值。
        flex-end：弹性项目向行尾紧挨着填充。
        center：弹性项目居中紧挨着填充。
        space-between：弹性项目平均分布在该行上。
        space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。
    4）align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
        flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
        flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
        center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
        （垂直方式另外还有2种，这里只涉及了简单的3个方式好理解一些）