box-sizing本身有三个属性:content-box(默认)、border-box和padding-box。

content-box:border与padding均不算入width中;

border-box:border与padding均算入width中;

padding-box:padding算入width中,但是border不算进去。

目前火狐浏览器三个属性全都支持,IE的话不支持padding-box,会得到content-box一样的结果。

.borderBox{
box-sizing: border-box;
width: 200px;
background: pink;
border:3px solid black;
padding:10px;
}

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. mongo中游标

    1.手动循环访问游标 mongo中我们常用的查询方式db.collection.find()方法其实返回的就是游标,只不过我们并未给返回的游标分配变量,我们所看到的的查询数据也就是游标自动迭代得出的( ...

  2. Java多线程(二)——常用的实现多线程的两种方式

    一.继承Thread类创建线程类 Java使用Thread类代表线程,所有的线程对象都必须是Thread类或其子类的实例.每个线程的作用是完成一定的任务,实际上就是执行一段程序流即一段顺序执行的代码. ...

  3. 我的微软最有价值专家(Microsoft MVP)之路

    一.写在前面 2018年对我来说是幸运的一年,对我来说最幸运的事情有两个,一个是在离驾照考试过期还有一个月(报名之后一直没去考)终于拿到了我的驾照,还有一件事莫过于获得了微软MVP.期间,一直有朋友问 ...

  4. 重构JS代码 - 让JS代码平面化

    js中的嵌套函数用的很多,很牛叉,那为何要平面化? 易懂(自己及他人) 易修改(自己及他人) 平时Ajax调用写法(基于jQuery) $.post('url', jsonObj, function ...

  5. 高并发下的Id生成器

    考虑到sql server以及c#,最多只能用decimal类型,也就是29位的数字,做了下面这个数字型id生成器: class Program { static void Main(string[] ...

  6. Nodejs mongoose 详解

    前言 Mongoose 是在nodejs环境下,对mongodb进行便捷操作的对象模型工具.本文介绍解(翻)密(译)Mongoose插件. Schema 开始我们就要讲到Schema,一个Schema ...

  7. Faster R-CNN:详解目标检测的实现过程

    本文详细解释了 Faster R-CNN 的网络架构和工作流,一步步带领读者理解目标检测的工作原理,作者本人也提供了 Luminoth 实现,供大家参考.   Luminoth 实现:https:// ...

  8. Quartz-Spring定时任务器持久化,通过Service动态添加,删除,启动暂停任务

    原文地址:https://blog.csdn.net/ljqwstc/article/details/78257091 首先添加maven的依赖: <!--quartz定时任务--> &l ...

  9. elasticsearch(6.2.3)安装Head插件

    一.安装elasticsearch,参照:https://www.cnblogs.com/dyh004/p/8872443.html 二.安装nodejs,参照:https://www.runoob. ...

  10. oracle表空间不足,ORA-00604的解决方法

    参考文章: http://blog.chinaunix.net/uid-26446098-id-3344813.html 错误信息如下: 从错误的角度可以推出:应该是表空间不足 根据查看表空间的使用情 ...