CSS3的box-sizing属性
盒模型的宽度，在 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属性的更多相关文章
- CSS3 Flex Box（弹性盒子）
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- CSS3：不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
- CSS3 新增的文本属性
一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
- 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 ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具，而且可以通过这款工具除了在线生成效果代码之外，还可以实时看到你修改的效果，以及浏览器的兼容性。
CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性. CSS3 Generator ...
- CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...
随机推荐
- 窗口信息获取器 Spy4Win v0.20b 中文绿色版
软件名称:窗口信息获取器 Spy4Win v0.20b 中文绿色版软件类别:国产软件运行环境:Windows XP软件语言:简体中文授权方式:免费版软件大小:1.67 MB软件等级:整理时间:2012 ...
- 使用Java注解开发自动生成SQL
使用注解开发的好处就是减少配置文件的使用.在实际过程中,随着项目越来越复杂,功能越来越多,会产生非常多的配置文件.但是,当配置文件过多,实际维护过程中产生的问题就不容易定位,这样就会徒劳的增加工作量. ...
- x264中的帧类型、条带类型、数据分区(data partition)
1 条带类型(slice type) x264的条带有三种基本类型分别为:I(主要用于帧内图像编码).P(用于帧间前向参考预测图像编码).B(用于帧间双向参考预测图像编码).SI与SP(切换码流时用) ...
- Unity 5 Game Optimization
2. Scripting Strategies 2.1 Cache Component references (缓存组件引用) 使用 Rigidbody rigidbody = GetComponen ...
- 打开新世界的第一步：学习servlet
什么是servlet? 是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容. 创建servlet 一.创建一个web project 1)流程:eclipse-F ...
- linux中fork（）函数详解（转）
转自:http://blog.csdn.net/jason314/article/details/5640969 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过 ...
- android --拍照，从相册获取图片，兼容高版本，兼容小米手机
前几天做项目中选择图片的过程中遇到高版本和小米手机出现无法选择和崩溃的问题,现在记录下来,后面出现同类问题,也好查找 1,定义常量: private static final int TAKE_PIC ...
- 12款免费与开源的NoSQL数据库
Naresh Kumar是位软件工程师与热情的博主,对于编程与新事物拥有极大的兴趣,非常乐于与其他开发者和程序员分享技术上的研究成果.近日,Naresh撰文谈到了12款知名的免费.开源NoSQL数据库 ...
- PHP学习过程_Symfony_(3)_整理_十分钟学会Symfony
这篇文章主要介绍了Symfony学习十分钟入门教程,详细介绍了Symfony的安装配置,项目初始化,建立Bundle,设计实体,添加约束,增删改查等基本操作技巧,需要的朋友可以参考下 (此文章已被多人 ...
- 全球互联网技术大会GITC 2016 最炫酷技术盛宴
2016年对于全球互联网产业来说,可谓是不折不扣的"创新爆发年",科技创新的更迭速度和多元化趋势都呈现出全所未见的增长态势.我们看到,云计算.大数据等在多年前萌发的技术创新正在快速 ...