css盒子模型中包括几种重要的属性,包括margin、border、padding以及content。但浏览器对其盒子模型的解释则有所不痛,启用标准模式还是IE(怪)模式是与当前页面的文档声明相关的。

借用网上一幅图:

这是标准盒子模型,可以看出,其宽和高均为其中content的宽高。

对于IE来说,,其css盒子的宽高则包括了border,padding以及content。

如何判断当前的页面使用了哪种解释模型呢,这就与文档声明有关。在文档顶部增加了doctype声明则会被解释为标准模型,若不加则与具体的浏览器相关了,ie以ie盒子的方式解释,ff仍然以标准盒子方式解释。

css2.1规范即为标准模型,只是IE“自以为是”。为了解决这种“自以为是”的行为,css3规定了这个属性,box-sizing,其值为“content-box”和“border-box”。

当box-sizing为content-box时,解释方法即IE盒子模型;当为border-box时,解释方法为标准模型。

Firefox使用-moz-box-sizing,safari/webkit使用-webkit-box-sizing,而opera使用box-sizing。

但为什么IE会把盒子模型解释成border-size,而这两种模式又有什么样的用法呢?等我熟悉熟悉再说~

既然说到盒子模型,再介绍刚学到的几个新的css3属性,background-origin,background-clip.

background-origin:即用来决定图片的原始起始位置,可选值为:content-box,padding-box,border-box。默认值为padding。

目前在FF中要加-moz-,safari/chrome中要加-webkit-,值为content,padding,border。

background-clip:即用来对背景图片进行适当的裁剪,可选值同background-origin。

含义是指,背景图片无论初始值设置在哪里,但只有在background-clip设置的范围内的部分才会显示出来。

这个具体的用法需要再熟悉一下。

css3之box-sizing的更多相关文章

  1. CSS3 Flex Box(弹性盒子)

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  2. 转: css3: display:box详解

    示例见:  css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...

  3. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

  4. css3 display:box

    想做自适应的流体布局 box很有用 . 还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome ...

  5. css3 display:box 属性

    先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...

  6. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  7. CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  8. 一个简单的CSS3+js 实现3D BOX

    <!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...

  9. CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

    目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...

  10. CSS3学习基本记录

    CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下 box-shadow:阴影 box-shadow: ...

随机推荐

  1. 【HDOJ】2645 find the nearest station

    裸BFS. /* 2645 */ #include <iostream> #include <queue> #include <cstdio> #include & ...

  2. Unity NGUI的多分辨率适配

    参考链接:http://blog.csdn.net/mfc11/article/details/17681429,作者:CSDN mfc11 1.NGUI默认的适配方式: NGUI默认是适配方式是根据 ...

  3. Wine install, 卸载的方法

    EL6 (RHEL6 and SL6) Required packages for proper building of 32-bit Wine on 64-bit EL6 yum install - ...

  4. 图论(网络流):[CTSC2001]终极情报网

    [CTSC2001]终极情报网 [题目描述] 在最后的诺曼底登陆战开始之前,盟军与德军的情报部门围绕着最终的登陆地点展开了一场规模空前的情报战. 这场情报战中,盟军的战术是利用那些潜伏在敌军内部的双重 ...

  5. 【动态规划】【KMP】HDU 5763 Another Meaning

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5763 题目大意: T组数据,给两个字符串s1,s2(len<=100000),s2可以被解读成 ...

  6. [转]sleep和wait的区别

    http://www.cnblogs.com/plmnko/archive/2010/10/15/1851854.html from:http://nneverwei.javaeye.com/blog ...

  7. javaweb笔记5之请求编码问题

    post提交: 设置实体内容的编码:request.setCharacterEncoding("utf-8"); 注意:一定要在获取所有参数之前设置,否则设置无效! get方式提交 ...

  8. tcp dump 截取http

    监听命令 sudo tcpdump -w mm.txt -s 0 -A -v  tcp dst port 8080 -w mm.txt :把记录下来的数据已二进制格式存储在mm.txt文件内  -w ...

  9. php动态分页类

    <?php /** * 页面名称:cls_page.php */ class Page { private $each_disNums; //每页显示的条目数 private $nums; // ...

  10. 基于RMAN的异机数据库克隆(rman duplicate)

    对于基于生产环境下的数据库的版本升级或者测试新的应用程序的性能及其影响,备份恢复等等,我们可以采取从生产环境以克隆的方式将其克隆到本地而不影响生产数据库的正常使用.实现这个功能我们可以借助rman d ...