关闭

@font-face和box-sizing 20150601

标签: css3
121人阅读 评论(0) 收藏 举报
分类:

@font-face 规则

能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体
语法:
@font-face{
font-family:<你的web字体名称>;
src:url(“字体路径”);
font-weight:bold;
}
引用:
div
{
font-family:你的web字体名称;
}

标准与怪异模式盒模型

DOCTYPE是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks 模式)。
在标准模式下的盒模型,
一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下的盒模型,盒子的总宽度和高度是包含内边距padding和边框border宽度在内的,
一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)

当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
当设置为box-sizing:border-box时,将采用怪异模式解析计算;

outline 轮廓

CSS3 外形修饰(outline-offset IE不支持)
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:
轮廓不占用空间
div{
width:150px;
height:70px;
margin:20px;
padding:10px;
border:2px solid black;
outline:2px solid red;
outline-offset:5px;
}

调整尺寸(Resize)

resize属性指定一个元素是否应该由用户去调整大小。
这个 div 元素由用户调整大小。 IE/欧朋不支持

CSS3 多列 column

通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!
column-count:属性指定元素的列数应分为。
column-gap:属性指定的列之间的差距。
column-rule:属性设置列之间的宽度,样式和颜色。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1610次
    • 积分:132
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类