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. class文件魔数CAFEBABE的由来

    https://blog.csdn.net/ustcyy91/article/details/78462378 https://blog.csdn.net/renfufei/article/detai ...

  2. 初学Python——文件操作

    一.文件的打开和关闭 1.常用的打开关闭语句 f=open("yesterday","r",encoding="utf-8") #打开文件 ...

  3. java可重入锁reentrantlock

    public class ReentrantDemo { //重入锁 保护临界区资源count,确保多线程对count操作的安全性 /*public static ReentrantLock rtlo ...

  4. echart自定义浮窗 增加点击事件

    一:情景 做一个柱状图,需要在柱状图显示lable,并且浮窗上每个条目可以被点击或者跳转. 我使用的做图插件是echarts,但是echart的浮窗是图片,而且不可以被点击,不能识别html,而且这个 ...

  5. [MicroPython]TPYBoardv102自动浇花系统

    1.系统功能 监测土壤湿度.环境温度.光照强度 根据当前环境自动浇水,寒冷天气自动加热土壤 2.所需元器件 TPYBoard板子1块 光敏模块1块 DS18B20模块1块 土壤湿度检测模块1块 杜邦线 ...

  6. Linux内存管理 一个进程究竟占用多少空间?-VSS/RSS/PSS/USS

    关键词:VSS.RSS.PSS.USS._mapcount.pte_present.mem_size_stats. 在Linux里面,一个进程占用的内存有不同种说法,可以是VSS/RSS/PSS/US ...

  7. Spark性能优化指南——基础篇(转载)

    前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一.Spark的功能涵盖了大数据领域的离线批处理.SQL类处理.流式/实时计算.机器学习.图计算等各种不同类型的计算操作 ...

  8. vue-amap 实例获取与自动缩放

    this.$refs.map.$amap.setFitView(markers) 获取实例,$amap 为 el-map 的 vid,没错,vid 获取方式就是这样 markers 为 Amap.Ma ...

  9. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 客户端多网络支持

    客户端可以支持灵活的,中间层连接选择,由于我们系统的定位架构大型信息系统的,所以全国各地,甚至国外的用户也会有,所以需要支持全网络配置,只要配置了中间层,可以选择连接哪个中间层的服务程序.客户端可以进 ...

  10. Codeblocks 遇到的问题 Cannot open output file, permission denied

    Codeblocks下运行C++的程序时,偶尔会出现  Cannot open output file, permission denied 的问题,导致不能够编译. 在 Stack Overflow ...