关于CSS3的一些冷门属性

作者: 高级民工 | 来源:发表于2016-05-04 21:59 被阅读303次

    有的时候是不是想在自己的网页中,用自己设计的字体呢?那么请看下面!

    嵌入web字体

    能够加载服务器的字体文字,让客户端显示客户端没有安装的字体

    语法:
    @font-face{
    • font-family:<你的web字体的名称>;
    src:url(“字体路径”);
    font-weight:bold;
    }
    @font-face{
      /*定义字体*/
      font-family:"我的字体";
      src:url("font/CooperBlackStd.otf");
     }
        div{
            font-family: "我的字体"; 
            /*引用字体*/
        }
        p{
         font-family: "CooperBlackStd";
    }
    

    你还在为特殊的边框效果而苦恼吗?

    box-sizing:border-box;怪异盒模型(为元素指定任何内边距和边框都将在已设定的宽度和高度进行绘制)
    
    outline外轮廓效果 跟border呈现效果极其相似,但不占网页布局空间。它在元素取得焦点或者被激活时呈现,下面的例子你可以试试.
    div{
          width: 100px;
          height: 100px;
          background-color: red;
          border: 10px dashed black;
        }
        p{ 
         width: 100px;
         height: 100px;
         background-color: red;
         outline: 10px dashed black;
         /*box-sizing:border-box 怪异盒模式
          outline  外轮廓效果 修饰样式 不占文本空间*/
    }
    

    还记当年的报纸排版吗?当你的网页样式也有此样式需求时,看看下面吧!

    分栏布局

    /分栏属性/
    column-count:number;栏的数量控制
    column-gap:长度单位;栏之间的距离
    column-rule:宽度,颜色;栏栏之间的见隔线,类似border
    div{
    /栏(列)的属性 分成几栏/
    -webkit-column-count:3;
    -moz-column-count:3;
    -o-column-count:3;
    column-count:3;

    下面的是代码实例,去试试吧!

     /*栏之间的宽度*/
     -webkit-column-gap:100px; 
     -moz-column-gap:100px; 
     -o-column-gap:100px; 
     column-gap:100px;
        
        /*栏之间的分隔线 宽度 颜色*/
        -webkit-column-rule:5px dashed red;
        column-rule:5px dashed red;
    

    }

    flex-box:弹性布局

    优点:

    1适应性强,在做不同屏幕分辨率的界面式都非常实用
    2.可以随意按照宽度。比例划分元素宽高
    3,可以轻松改变元素的顺序
    4.自适应布局实现快捷,易维护

    弹性盒模型

    display:box;将一个元素的子元素以弹性布局进行布局
    -webkit-box-orient:vertical;子元素的排列顺序(横向或竖向)horizontal
    box-diraction:normal|reverse(倒序)子元素的排列顺序
    -webkit-box-flex:1;子元素如何分配剩余空间
    box-align:start|end|center 子元素垂直对齐方式
    box-pack:start|end|center 子元素的水平对齐方式
    flexbox是布局模块,它包含父元素和子元素的属性
    flexbox布局的主题思想是元素改变大小适应可用空间,当空间变大时,flex元素将伸展大小以填充可用空间,当flex元素超出可用空间时将自动缩小,总之,flex元素是可以让你的布局根据浏览器的大小变化自动进行伸缩的
    弹性布局flex-box

    注意:优先以横向布局
    代码实例!!!!!!(如有不懂自行理解)
     *{
         margin: 0;
         padding: 0;
        }
        html,body{
         height: 100%;
        }
        .wrap{
            height: 100%;
            /*在父级声明弹性盒模型*/
            display: -webkit-box;
            /*弹性盒模型默认是水平布局 可以设置为垂直布局*/
            /*-webkit-box-orient:vertical;*/
        }
        .wrap div{
         /*width: 200px;*/
         /*height: 100px;*/
        }
        .con1{
         background-color:red;
         -webkit-box-flex:2;
        }
        .con2{
         background-color:blue;
         -webkit-box-flex:1;
         /*设置当前快变成弹性模型,填充剩余内容 必要条件父级设置弹性盒模型*/
        }
        .con3{
         background-color: yellow;
         /*填充比例*/
         -webkit-box-flex:1;
        }
    

    相关文章

      网友评论

      • 早安___:感觉学到了好多,谢谢分享

      本文标题:关于CSS3的一些冷门属性

      本文链接:https://www.haomeiwen.com/subject/rkxdrttx.html