盒模型的宽度，在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 width 之内

W3C标准中的盒模型宽度为内容宽度，不包括内边距padding和边框border

CSS3 的box-sizing属性

共有三个值：content-box    padding-box   border-box

content-box与以前的W3C标准对盒模型的处理一样

padding-box在指定width时会把padding计算在内

border-box在指定width时，会把border和padding计算在内

<title>无标题文档</title>

<style type="text/css">

#div1{

    width:100px;

    height:100px;

    padding:20px;

    border: 5px solid #E6A43F;

    background-color:red;

}

#div2{

    box-sizing:padding-box;

    width:100px;

    height:100px;

    padding:20px;

    border: 5px solid #E6A43F;

    background-color:blue;

}

#div3{

    box-sizing:border-box;

    width:100px;

    height:100px;

    padding:20px;

    border: 5px solid #E6A43F;

    background-color:yellow;

}

</style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

</body>

目前这个属性的使用需要加上特定浏览器的前缀，测试了一下，火狐支持该属性，不需要加前缀

CSS3的box-sizing属性的更多相关文章

  1. CSS3 Flex Box（弹性盒子）

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

  2. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  3. CSS3：不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  4. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  5. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  6. css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  7. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  8. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  9. CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具，而且可以通过这款工具除了在线生成效果代码之外，还可以实时看到你修改的效果，以及浏览器的兼容性。

    CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性. CSS3 Generator ...

  10. CSS3的滤镜filter属性

    css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...

随机推荐

  1. python 3.5构建WINDOWS推送服务

    import ConfigParser import os import sys cf = ConfigParser.ConfigParser() #绝对路径获取 ABSPATH=os.path.ab ...

  2. [Jmeter]jmeter之脚本录制与回放，优化（windows下的jmeter）

    一.录制脚本: 1.启动jmeter 2.添加线程组 3.添加http代理 4.配置代理 a.jmeter侧(注意:lest plan content这里需要选择目标控制器,本文即测试计划中需要选择的 ...

  3. layer1.8UI

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. JDOM与DOM主要有两方面不同

    我这丝毫没有吐槽的意思哟,只是想说作为一个合格的程序员大家最起码需要做到思维严谨这点,在有能力的情况下对用户体验能提点建议最好.自己写的代码一定要经过严格测试再交付,不要指望测试人员帮你测试再去修改, ...

  5. 注册 Gmail，验证手机号码的时候提示“此号码不能用于验证”，怎么解决？

    地址:https://www.zhihu.com/question/34834773   刚刚注册成功.折腾了好久,最后换了Chrome浏览器就成功了.手机号在注册的第一个界面时就填+86 xxxxx ...

  6. sql 函数 DATEADD 使用

    DATEADD ( datepart , number, date ) 在日期中添加或减去指定的时间间隔.   datepart 是规定应向日期的哪一部分返回新值的参数. number 为要增加或减去 ...

  7. 2.1 IDEA

    1.背景:IntelliJ IDEA 比 Eclipse 更好http://www.oschina.net/news/26929/why-intellij-is-better-than-eclipse ...

  8. C++编程技巧（长期更新）

    1.数组使用 int* p = new int[5](); // 数组新建并全部初始化为0 等价于: int* p; p = new int[5](); int* q = new int[5];    ...

  9. Samba: Server setup..

    To make samba shard folder permission clear, there are 3 kind of permission need to be paid attentio ...

  10. Android:关于Edittext的一些设置

    1.自动弹出输入框. et_order_search.setFocusableInTouchMode(true); et_order_search.requestFocus(); CmzBossApp ...