CSS3

Css3

 Css3在css2上增加了哪些？（增加了28个模板）

选择器（增加了10几种）：

 E:first-child  找第一个子元素，并且在父级的子元素集合中第一个的位置上是E  ；

 E:first-of-type  找子元素，父级的子元素集合中的第一个E

盒模型

背景和边框 eg:透明度

圆角：border-radius      边框阴影：box-shadow    边框图片：border-image

颜色 eg:rgba

字体 @font-face 不再限制使用系统自带字体   、字体图标

文字特效

2D/3D转换  translate  rotate

动画   @keyframes规则

多列布局

用户界面 自适应布局 outline-offset   box-sizing

媒体查询 media

浏览器专有属性  -webkit-     火狐：-moz-    IE：-ms-

 

 

7/19：

一 、边框border:

  阴影：box-shadow     <shadow>=inset?&&[<length>{2,4}&&<color>?]   默认黑色

      参数：水平偏移值(大于0向右)，垂直偏移值(大于0向下)，模糊值，延长度，模糊颜色

      inser:设置对象阴影类型为内阴影，值为空时为外阴影

  圆角：border-radius   可以有4个参数，数字或百分比(最大50%)  

  图片：border-image  一般使用.png格式，因为它的背景可以透明

       （边框线条和边框图片只能使用一个，如果都要使用，后面设置的会覆盖前面设置的。）

       图片来源：border-image-url   

       图片宽度：border-image-width

       分割方式：border-image-slice (自动赋予单位) 参数可以是数字也可以是百分比

       扩展边框内部大小：border-image-outset (对其他元素位置不影响)  

       填充方式：border-image-repeat :repeat /stretch(默认)/ round/ space  (0-2个参数)

二 、背景background-image:

   （背景图片和背景颜色同时使用时，背景是.png格式则两个会同时出现，不是.png格式时，只出现图片。）

   设置大小：background-size:cover(等比例缩放，有可能超出容器)  

             background-size:contain(等比例缩放，绝不超出容器)

             Background-size: 数字或百分比

   定位：background-position (1-2个参数)

               center(默认)/ right / left / top / buttom /数字/百分比

   从什么位置开始显示：background-origin：padding-box(默认) / border-box / content-box

   裁剪：background-clip:border-box(默认) / padding-box / content-box

   多重背景：background-image:url(img/ab.png),url(img/ac.png);

   背景线性渐变：linear-gradient

     Eg:      /*谷歌浏览器*/

            background: -webkit-gradient(linear,0 0,0 100%,from(red),to(blue));

            background: -webkit-gradient(linear,50 50,0 50%,from(red),to(blue));   /*有角度 的线性渐变 */

            /*火狐浏览器*/

            background: -moz-linear-gradient(top ,red,blue);

            background: -moz-linear-gradient(40 ,red,blue); /*有角度的线性渐变 */

            /*IE浏览器*/

            background: -ms-linear-gradient(top ,red blue);

            background: -ms-linear-gradient(30 ,red blue); /*有角度的线性渐变 */

 

   背景径向渐变：radial-gradient

     参数：圆心位置、渐变形态(圆circle/椭圆ellipse)、半径长度样式，颜色(>2)

    Eg:      /*谷歌浏览器*/

            background:-webkit-radial-gradient(center center,circle,#f00,#ff0,#080);

            /*火狐浏览器*/

            background:-moz-radial-gradient(center center,circle,#f00,#ff0,#080);

            /*IE浏览器*/

            background:-ms-radial-gradient(center center,circle,#f00,#ff0,#080);

  

7/20

 三、文本效果 text

   阴影：text-shadow  参数：水平位置、垂直位置、模糊值、颜色        

   溢出：text-overflow:clip (有溢出部分不显示,且被剪切。默认)

          text-overflow:  ellipsis(有溢出部分显示...)

      结合这两个属性才可以使用

       overflow:hidden 超出部分不显示  white-space:nowrap超出部分不换行

   外轮廓：outline  参数：宽度、样式、颜色  

        和边框同时存在，在边框外面，不占据元素的位置

        如果绘制椭圆，它的外轮廓线也是矩形。

四、2D/3D的转换

    2D转换 transform:

      transform-origin: 设置变化开始的坐标点  (0 0)

      transform:translate() 移动指定对象产生2D平移。参数{1，2}：X轴 Y轴

          eg  transform:translate(2px ,2px);

      transform:rotate() 旋转  默认依据当前元素的中心点旋转  参数{1，2}

      transform:scale() 缩放  元素尺寸的增或减，根据给定的X Y   参数{1，2}

           一个参数代表两个方向幅度一致，不会占据页面或改变布局

      transform:skew() 翻转 斜切扭曲。参数{1，2}  一个参数代表两个方向幅度一样

           大多时候设置一个方向 90deg之前是正面，90deg之后是反面

     transform:matrix() 组合操作    旋转 缩放 移动（默认单位px，不写单位）倾斜

           6个参数：X轴缩放，X轴扭曲度，Y轴扭曲度，Y轴缩放，X轴移动，Y轴移动

     3D转换 transform:

         transform-rotateX()  transform-rotateY()

        Eg:transform:translate(20px) rotate(45deg);

 

7/21

五、过渡和动画

    过渡：transition : 4个属性

       过渡必须要有一个行为来进行触发，默认情况下一般使用:hover选择器来适配。过渡时间默认0s。

       参与过渡属性 transition-property :all(所有过度的css属性) none(不指定过渡的css属性)  <ptoperty>(指定过渡的css属性)

       过渡的持续时间 transition-duration

       过渡的动画类 transition-timing-function:ease(默认)linear ease-in ease-out ease-in-out

       延迟过渡的时间 transition-delay

     动画：@keyframes animation

        由于浏览器兼容性所以要注意写多个兼容

        @keyframes

    animation  7个属性 提供多个属性值时以逗号隔开

       名称 animation-name ;

       持续时间 animation-duration ;

        过渡类型animation-timing-function:ease (默认)、linear、ease-in、ease-out  ease-in-out ;

       延迟时间 animation-delay ;

       循环次数 animation-iteration-count : infinite(无限循环)  数字次数;

       是否反响运动 animation-direction：normal(正常、默认)  alternote(正反交替) ;

       动画状态 animation-play-state：running(运动、默认)  paused(暂停) ;

        运动之外的状态 animation-fill-mode：none(不设置、默认)

 

六、字体 font-face  自定义字体  

    系统中.ttf结尾的 

 Eg: @font-face {

            font-family: myfont;

            src: url(font/简娃娃篆.ttf);

        }

 #div1{

            font-family: myfont;

        }

    字体图标 font Awesome

        好处：提高网页性能  无限放大不失真  为响应式布局通过优秀图片解决方案

        坏处：只能处理单种颜色   创作字体图标花费时间长

 

七、CSS媒体查询

    关键字：media queries  

        什么是媒体查询：css中可以使用media属性使特定的style在指定媒体设备中显示，  --css2规范中已经引用。

    媒体查询方式：

        ①通过Html style做查询；<link rel=”stylesheet” href=”” media=””/>

        ②通过css代码： Print:打印设备  screen:屏幕设备

                       @media print{ 样式 }     @media screen{ 样式 }  

                      @media print,screen{ 样式 }

       ③通过css @import语句查询（不般不推荐，效率低）

    媒体属性：颜色--color      设备宽度--device-width     宽度--width

          黑白--monochrome     网格--grid      方向--orientation

          分辨率--resolution

    媒体查询操作符：

        and（同时支持2种）  

        not(除了后面写的之外都支持)  

         only （只支持后面写出来的）

        逗号分隔的列表（ ）

    媒体查询冲突：按css默认优先级规则后者覆盖前者

 

八、BFC规范

     BFC是css2.1的一个概念，它本身不是一个标准的元素，而是元素带有的一些属性。具有某些特殊属性的元素属性。

     BFC是block formatting contexts的缩写，也就是“块级格式化上下文”。

     BFC元素特性表现原则：内部子元素不会影响外部元素。

    产生BFC：

        float的值不为none。

        overflow的值为auto(有超出就有滚动条),scroll(出现滚动条)，hidden，即除了visitable。

        display的值为table-cell(表格的格子), table-caption(表格的标题), inline-block之一。

        position的值是absolute和fixed。

 

    BFC的作用：

        块级格式化上下文

        可以组织元素被浮动元素覆盖

        可以阻止父子元素的margin的折叠  

 

    BFC有一下特性：

      ①内部的Box会在垂直方向，从顶部开始一个接一个地放置。

      ②Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

       ③BFC的区域不会与float box叠加。

       ④BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

      ⑤计算BFC的高度时，浮动元素也参与计算。

九、响应式布局

   页面布局

     静态布局static Layout

     自适应布局 Adaptive Layout：分别为不同的屏幕分辨率定义布局。

     流式布局 Liquid Layout(也叫Fluid)：页面元素的宽度按照屏幕进行适配调整。

     响应式布局 Responsive Layout ：自适应布局和流式布局的理念融合。

 

   响应式布局是Ethan Marcotte在2010年5月提出的一个概念，指的是一个网站能够兼容多个终端。这个概念是为解决移动互联网浏览而诞生的。

   响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

   优点：面对不同分辨率设备灵活性强；

            能够快捷解决多设备显示适应问题。

   缺点：兼容各种设备工作量大，效率低下；

           代码累赘，会出现隐藏无用的元素，加载时间加长；

           其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果；

          一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。