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 ...
随机推荐
- redhat 安装配置samba实现win共享linux主机目录
[转]http://blog.chinaunix.net/uid-26642180-id-3135941.html redhat 安装配置samba实现win共享linux主机目录 2012-03-1 ...
- Linux Kernel Vhost 架构
Vhost 回顾 Linux中的vhost驱动程序提供了内核virtio设备仿真. 通常,QEMU用户空间进程模拟guest的I / O访问. Vhost将virtio仿真代码放到内核中,使QEMU用 ...
- Hibernate 异常 集锦
异常1.Error parsing JNDI name [foo] 异常信息摘要: org.hibernate.engine.jndi.JndiException: Error parsing JND ...
- es6 语法
1.定义变量 使用let,const.let可以定义变量,相当于var,定义的变量只在局部范围内使用.const用来定义常量. 2.解构 自动解析数组或者对象中的值,比如一个函数要返回多个值,通常的做 ...
- 路由页面缓存开启 以及 keep-alive 给你埋下的坑
为什么要用keep-alive呢, 因为这个会缓存dom模板, 下次再回到这个页面, 就可以利用这个已经渲染好的dom结构了, 如果数据不一样, 也会启用 virtualDoM 进行diff更新, 这 ...
- ES6 之 let和const命令 Symbol Promise对象
ECMAScript 6入门 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了. (2016年6月,发布了小幅修订的<ECMASc ...
- 基于jQuery弹性展开收缩菜单插件gooey.js
首先 引入css <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel ...
- LEK-Introduction
LEK - logstash + elasticsearch + Kibana Elasticsearch, Logstash, and Kibana — designed to take data ...
- A. Grasshopper And the String(CF ROUND 378 DIV2)
A. Grasshopper And the String time limit per test 1 second memory limit per test 256 megabytes input ...
- fzu Problem 2128 最长子串（KMP + strstr 经典好题）
Problem Description 问题很简单,给你一个字符串s,问s的子串中不包含s1,s2...sn的最长串有多长. Input 输入包含多组数据.第一行为字符串s,字符串s的长度1到10 ...