zoukankan      html  css  js  c++  java
  • 前端知识查漏补缺篇(二)

    (二)CSS3

    1.属性和值选择器

    选择器 描述
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。适用于由空格分隔的属性值
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。

     2.background-origin 属性和background-clip 属性的区别

      详细查看 此篇文章

    3.animation 

      关于CSS3的这个十分好用的动画属性,网上有大神已经总结出了一篇很好的文章,这里有文章“CSS3 Animation”的链接。

    4.多列

    浏览器支持

    属性描述浏览器支持
    column-count 规定元素应该被分隔的列数             
    column-gap 规定列之间的间隔          
    column-rule

    设置列之间的宽度、样式和颜

    色规则如:

    column-rule-width

    column-rule-style

    column-rule-color

             
    column-width

    规定列的宽度

    Internet Explorer 10 和 Opera 支持多列属性。

    Firefox 需要前缀 -moz-。

    Chrome 和 Safari 需要前缀 -webkit-。

    注释:Internet Explorer 9 以及更早的版本不支持多列属性。

    p{
        columns: 30px 3;
        -moz-columns: 30px 3; 
        -ms-columns: 30px 3; 
        -webkit-columns: 30px 3; 
        background: #cfcfcf; 
        border: 1px solid #ccc;
    }

    CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。

  • 相关阅读:
    007 Android 单击事件、toast使用
    AdminService数据访问层
    DBHelper
    兄弟2820技术
    左右两侧采用绝对定位 中间同样采用margin-left margin-right方法:
    三层架构保存,更新,查询等一些列方法
    DropDownList的使用
    兄弟2820
    三层架构
    treevew
  • 原文地址:https://www.cnblogs.com/zhangjiehui/p/4243369.html
Copyright © 2011-2022 走看看