关于CSS3的一些冷门属性_html/css_WEB-ITnose

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

嵌入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;子元素的排列顺序（横向或竖向）horizontalbox-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;    }

Nach dem Login kopieren