有的时候是不是想在自己的网页中,用自己设计的字体呢?那么请看下面!
嵌入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;
}
