css3新特性总结

·  阅读 119

选择器

  1. element1~element2:选择前面有element1元素的每个element2元素。

    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    	div~p{
    		color:red
    	}
    </style>
    </head>
    <body>
    	<p>选择器测试1</p>
    	<div>我是element1</div>
    	<p>我是element2</p>
    	<p>我是element2</p>
    </body>
    </html>
    复制代码
  2. [attribute^=value]:选择某元素attribute属性是以value开头的。

    <!DOCTYPE HTML>
    <html>
    	<head>
          <style type="text/css">
            [type^='tex']{
              color:red;
            }
          </style>
      </head>
      <body>
        <input value="我是文本" type="text" />
        <input value="我是按钮" type="button" />
      </body>
    </html>
    复制代码
  3. [attribute$=value]:选择某元素attribute属性是以value结尾的。

    <!DOCTYPE HTML>
    <html>
    	<head>
          <style type="text/css">
            [type$='xt']{
              color:red;
            }
          </style>
      </head>
      <body>
        <input value="我是文本" type="text" />
        <input value="我是按钮" type="button" />
      </body>
    </html>
    复制代码
  4. [attribute*=value]:选择某元素attribute属性包含value字符串。

    <!DOCTYPE HTML>
    <html>
    	<head>
          <style type="text/css">
            [type*='ex']{
              color:red;
            }
          </style>
      </head>
      <body>
        <input value="我是文本" type="text" />
        <input value="我是按钮" type="button" />
      </body>
    </html>
    复制代码
  5. E:first-of-type:选择属于其父元素的首个E元素的每个元素。

    <!DOCTYPE HTML>
    <html>
    	<head>
          <style type="text/css">
            p:first-of-type{
              color:red;
            }
          </style>
      </head>
      <body>
        <p>我是第一行</p>
        <p>我是第二行</p>
        <p>我是第三行</p>
        <p>我是第四行</p>
      </body>
    </html>
    复制代码
  6. E:last-of-type:选择属于其父元素的最后个E元素的每个元素。

    <!DOCTYPE HTML>
    <html>
    	<head>
          <style type="text/css">
            p:last-of-type{
              color:red;
            }
          </style>
      </head>
      <body>
        <p>我是第一行</p>
        <p>我是第二行</p>
        <p>我是第三行</p>
        <p>我是第四行</p>
      </body>
    </html>
    复制代码
  7. E:only-of-type:选择属于其父元素的唯一子元素的每个E元素。

    <!DOCTYPE HTML>
    <html>
    	<head>
          <style type="text/css">
            p:only-of-type{
              color:red;
            }
          </style>
      </head>
      <body>
      	<div>
      		<p>我是第一行</p>
      	</div>
        <div>
            <p>我是第二行</p>
        	<p>我是第三行</p>
        	<p>我是第四行</p>
        </div>
      </body>
    </html>
    复制代码
  8. E:only-child:选择属于其父元素的唯一子元素的每个E元素。

    <!DOCTYPE HTML>
    <html>
    	<head>
          <style type="text/css">
            p:only-child{
              color:red;
            }
          </style>
      </head>
      <body>
      	<div>
      		<p>我是第一行</p>
      	</div>
        <div>
            <p>我是第二行</p>
        	<p>我是第三行</p>
        	<p>我是第四行</p>
        </div>
      </body>
    </html>
    复制代码
  9. E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。

  10. E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个E元素。

  11. E:nth-of-type(n): 选择属于其父元素第n个E元素的每个E元素。

  12. E:nth-last-of-type(n): 选择属于其父元素倒数第n个E元素的每个E元素。

  13. E:last-child: 选择属于其父元素最后一个子元素每个E元素。

  14. :root: 选择文档的根元素。

  15. E:empty: 选择没有子元素的每个E元素(包括文本节点)。

  16. E:target: 选择当前活动的E元素。

  17. E:enabled: 选择每个启用的E元素。

  18. E:disabled: 选择每个禁用的E元素。

  19. E:checked: 选择每个被选中的E元素。

  20. E:not(selector): 选择非selector元素的每个元素。

  21. E::selection: 选择被用户选取的元素部分。

transition过渡、animation动画、transform形状转换

  1. transition 过渡,当元素从一种样式变换为另一种样式时为元素添加效果,而不用使用Flash动画或JavaScript。

    1. transition-property: 规定应用过渡的CSS属性的名称。

    2. transition-duration: 规定完成过渡效果需要多长时间。

    3. transition-delay: 规定过渡效果何时开始,默认是0。

    4. transition-timing-function: 规定过渡效果的时间曲线,默认是”ease”,还有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。

    5. transition: 简写属性,用于在一个属性中设置四个过渡属性。

      div {
          transition-property: width;
          transition-duration: 1s;
          transition-timing-function: linear;
          transition-delay: 2s;
          /* Firefox 4 */
          -moz-transition-property:width;
          -moz-transition-duration:1s;
          -moz-transition-timing-function:linear;
          -moz-transition-delay:2s;
          /* Safari 和 Chrome */
          -webkit-transition-property:width;
          -webkit-transition-duration:1s;
          -webkit-transition-timing-function:linear;
          -webkit-transition-delay:2s;
          /* Opera */
          -o-transition-property:width;
          -o-transition-duration:1s;
          -o-transition-timing-function:linear;
          -o-transition-delay:2s;
      }
      
      div {
          transition: width 1s linear 2s;
          /* Firefox 4 */
          -moz-transition:width 1s linear 2s;
          /* Safari and Chrome */
          -webkit-transition:width 1s linear 2s;
          /* Opera */
          -o-transition:width 1s linear 2s;
      }
      复制代码
  2. animation

    animation让CSS拥有了可以制作动画的功能。使用CSS3的Animation制作动画我们可以省去复杂的js代码。

    @-webkit-keyframes anim1 { 
       0% { 
            opacity: 0; 
            font-size: 12px; 
       } 
       100% { 
            opacity: 1; 
            font-size: 24px; 
       } 
    } 
    .anim1Div { 
       -webkit-animation-name: anim1 ; 
       -webkit-animation-duration: 1.5s; 
       -webkit-animation-iteration-count: 4; 
       -webkit-animation-direction: alternate; 
       -webkit-animation-timing-function: ease-in-out; 
    }
    复制代码
  3. transform

    transform用来向元素应用各种2D和3D转换,该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。

    变换类型

    1. none: 定义不进行转换。
    2. matrix(n,n,n,n,n,n): 定义2D转换,使用六个值的矩阵。
    3. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定义3D转换,使用16个值的4x4矩阵。
    4. translate(x,y): 定义2D位移转换。
    5. translate3d(x,y,z): 定义3D位移转换。
    6. translateX(x): 定义位移转换,只是用X轴的值。
    7. translateY(y): 定义位移转换,只是用Y轴的值。
    8. translateZ(z): 定义3D位移转换,只是用Z轴的值。
    9. scale(x,y): 定义2D缩放转换。
    10. scale3d(x,y,z): 定义3D缩放转换。
    11. scaleX(x): 通过设置X轴的值来定义缩放转换。
    12. scaleY(y): 通过设置Y轴的值来定义缩放转换。
    13. scaleZ(z): 通过设置Z轴的值来定义3D缩放转换。
    14. rotate(angle): 定义2D旋转,在参数中规定角度。
    15. rotate3d(x,y,z,angle): 定义3D旋转。
    16. rotateX(angle): 定义沿着X轴的3D旋转。
    17. rotateY(angle): 定义沿着Y轴的3D旋转。
    18. rotateZ(angle): 定义沿着Z轴的3D旋转。
    19. skew(x-angle,y-angle): 定义沿着X和Y轴的2D倾斜转换。
    20. skewX(angle): 定义沿着X轴的2D倾斜转换。
    21. skewY(angle): 定义沿着Y轴的2D倾斜转换。
    22. perspective(n): 为3D转换元素定义透视视图。

    浏览器支持

    Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。 Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。 Opera 只支持 2D 转换。

边框

border-radius、box-shadow和border-image

背景

background-clip、background-origin、background-size和background-break。

文字效果

word-wrap、text-overflow、text-shadow、text-decoration。

注:CSS3中将 word-wrap改名为 overflow-wrap;由于历史原因,当你使用overflow-wrap 时,最好同时使用word-wrap 作为备选,作向前兼容。

渐变

渐变有线性渐变、径向渐变、圆锥渐变。

@font-face

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9+ */
}
div{
    font-family:myFirstFont;
}
复制代码

用户界面

  1. 盒模型:

    1. 基本概念

      标准模型+IE模型。包括margin、border、padding、content。

    2. 标准模型和IE模型的区别?

      IE模型元素width/height=content+padding+border

      标准模型元素width/height=content

    3. css如何设置获取这两种模型的宽和高?

      通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型(content-box)和IE模型(border-box)。

    4. js如何设置获取盒模型对应的宽和高

      1. dom.style.width/height 只能取到行内样式的宽和高,style标签中和link外链的样式取不到。
      2. dom.currentStyle.width/height 取到的是最终渲染后的宽和高,只有IE支持此属性。
      3. window.getComputedStyle(dom).width/height 同(2)但是多浏览器支持,IE9以上支持。
      4. dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高,大多浏览器支持。IE9以上支持,除此外还可以取到相对于视窗的上下左右的距离
    5. 根据盒模型解释边距重叠

      只有普通文档流中块框的垂直外边距才会发生外边距合并,行内框、浮动框或绝对定位之间的外边距不会合并。

    6. BFC(边距重叠解决方案还有IFC、GFC、FFC)解决边距重叠

      BFC,Block Formatting Context的缩写,块级格式化上下文。

      如何创建BFC?

      1. overflow不为visible
      2. float不为none
      3. position不为static或relative
      4. display为inline-block、table、table-cell、table-caption、flex、inline-flex
  2. resize

  3. outline-offset

反射

-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ],偏移量,遮罩图片
复制代码

颜色

rgba、hsla

混合模式

background-blend-mode和mix-blend-mode

其他

  1. Flex布局

    父元素设置flex布局(块级元素flex,行内元素inline-flex)之后,子元素的float、vertical-align、clear无效。

    flex父元素我们叫作flex容器,子元素叫作flex项目。

    flex容器

    flex容器有6个属性,分别为:

    1. flex-deriction(主轴方向)

      flex-direction: row | row-reverse | column | column-reverse;
      复制代码
    2. flex-wrap(换行)

      flex-wrap: nowrap | wrap | wrap-reverse;
      复制代码
    3. flex-flow(flex-deriction和flex-wrap的简写形式)

      flex-flow: <flex-direction> || <flex-wrap>;
      复制代码
    4. justify-content(主轴对齐方式)

      justify-content: flex-start | flex-end | center | space-between | space-around;
      复制代码
    5. align-items(交叉轴上的对齐方式)

      align-items: flex-start | flex-end | center | baseline | stretch;
      复制代码
    6. align-content(多根轴线对齐方式)

      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
      复制代码
    flex项目
    1. order(项目的排列顺序)

        order: <integer>;
      复制代码
    2. flex-grow(项目的放大比例)

        flex-grow: <number>; /* default 0 */
      复制代码
    3. flex-shrink(项目的缩小比例)

        flex-shrink: <number>; /* default 1 */
      复制代码
    4. flex-basis(在分配多余空间之前,项目占据的主轴空间)

        flex-basis: <length> | auto; /* default auto */
      复制代码
    5. flex(flex-grow、flex-shrink和flex-basis的简写)

        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
      复制代码
    6. align-self(允许单个项目与其他项目有不一样的对齐方式)

        align-self: auto | flex-start | flex-end | center | baseline | stretch;
      复制代码
  2. 多列布局

  3. Grid布局

  4. 媒体查询

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改