关于CSS3的一些冷门属性

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

嵌入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;
    }