盒模型的宽度，在 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. CentOS7 citus9.5 集群安装及管理

    1 所有节点配置 #------服务安装 服务yum update -y #------扩展依赖安装yum install -y epel-release && yum update ...

  2. 解决 git extensions 每次提交需要输入用户名和密码

    打开git bash 输入用户名和密码 git config --global user.name "username" git config --global user.emai ...

  3. 无法启动MYSQL服务”1067 进程意外终止”解决办法

    原文:http://www.111cn.net/database/mysql/48888.htm   本文章主要是总结了各种导致mysql提示无法启动MYSQL服务"1067 进程意外终止& ...

  4. oAuth 使得第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权

    OAUTH协议为用户资源的授权提供了一个安全的.开放而又简易的标准.与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可 ...

  5. PHP中 post 与get的区别 详细说明

    1.Get 方法通过 URL 请求来传递用户的数据,将表单内各字段名称与其内容,以成对的字符串连接,置于 action 属性所指程序的 url 后,如[url]http://www.jincaib.c ...

  6. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

  7. 《html表格》

    1.html表格 w3c School:http://www.jb51.net/w3school/html/html_tables.htm 2.<colgroup></colgrou ...

  8. javascript中的事件处理

    事件处理:http://www.cnblogs.com/polk6/archive/2016/02/19/5154470.html#Menu2-DOMEventSpecification addEve ...

  9. 《JS权威指南学习总结--9.3 JS中JAVA式的类继承》

    内容要点: 一.JS中的类 1.JAVA或其他类似强类型 面向对象语言的 类成员的模样 实例字段:它们是基于实例的属性或变量,用以保存独立对象的状态. 实例方法: 它们是类的所有实例所共享的方法,由每 ...

  10. JavaScript事件响应的基础语法总结

    1.onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用 //例子 <html> <head> ...