关闭

@font-face和box-sizing 20150601

标签: css3
183人阅读 评论(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
查看评论

理解box-sizing属性border-box,content-box

普通盒模型与怪异盒模型对比。box-sizing:content-box,box-sizing:border-box;对比。 如何使用普通盒模型与怪异盒模型,如何让浏览器只支持标准盒模型。
  • y491887095
  • y491887095
  • 2016-09-16 10:54
  • 4694

盒子模型 box-sizing中content-box和border-box

盒子模型 CSS中有一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型,包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性,而且他们之间...
  • Practicer2015
  • Practicer2015
  • 2015-06-11 11:01
  • 8379

CSS3 box-sizing属性和IE盒模型

盒模型是CSS中很重要的概念,但很多人不知道的是IE5.5及更早的IE浏览器采用的不是标准盒模型,我们称之为IE盒模型。标准盒模型的组成部分有:margin + border + padding + content,content部分的width height不包含border和padding。而在...
  • cc7756789w
  • cc7756789w
  • 2016-03-17 09:11
  • 2871

box-sizing属性的使用方法

定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。 ...
  • hunannanhu
  • hunannanhu
  • 2016-01-19 17:30
  • 599

学会使用box-sizing布局

盒子模型 关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如: padding + border + width= ...
  • splendid_can
  • splendid_can
  • 2016-11-28 10:33
  • 1133

H5:常用css3属性box-sizing,display:box

box-sizing属性:允许您以特定的方式定义匹配某个区域的特定元素。 box-sizing有三个取值:content-box|border-box|inherit;默认情况下值为content-box content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素...
  • zhs45656
  • zhs45656
  • 2016-08-04 11:42
  • 2373

box-sizing:border-box用于移动端页面的开发!

*, *::before, *;;after{   border-sizing:border-box; } (bootstrap全局中设定该样式) 先从块级元素的盒子大小说起,通常一个块级元素实际所占宽高度=外边距(margin)+ 边界宽度(bord...
  • qq_34986769
  • qq_34986769
  • 2016-10-13 12:57
  • 1371

CSS3 box-sizing详解

HTML菜鸟,正在学习:原文地址 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性。 box-sizing: 盒大小,盒模型. 我们经常遇到左右模块宽度为50%,加个边框会掉下去,加一个这个样式就能解决,看下栗子: ...
  • u012265444
  • u012265444
  • 2017-03-30 15:05
  • 569

浅谈CSS3的box-sizing属性

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。 假如需要并排放置两个带边框的框,可通过将box-sizing设为"border-box",令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。   box-sizing:content-...
  • zhouziyu2011
  • zhouziyu2011
  • 2017-03-09 17:18
  • 286

@font-face 网络字体的中文用法(一)

如果你使用的Windows XP操作系统,在浏览中文网页时,你会发现网页上的汉字基本上全部都是宋体。这是因为你的操作系统里安装了中文宋体字库,而且被设定为默认字体。浏览器会用你的默认字体显示网页上的汉字。进入Windows7/8时代,Windows系统的默认字体变成了微软雅黑,于是,所有的中文网站上...
  • xiaokui_wingfly
  • xiaokui_wingfly
  • 2016-06-28 14:16
  • 3401
    个人资料
    • 访问:2643次
    • 积分:147
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类