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. 异常:NoNodeAvailableException

    现象 1.启动时候出现 node null not part of the cluster Cluster [********], ignoring... 2.启动时正常,但是请求时出现 NoNode ...

  2. 红米Note5进入全网通5.0时代,其实是高通已经落后了!

    高通早在去年12月份就正式发布了新一代的骁龙845处理器,接下来就是人们对于搭载骁龙845处理器的手机充满期待,可是转眼到了2018年的3月份,目前已经发布的高端旗舰新机却只有三星S9和三星S9+,而 ...

  3. 修复XSS跨站漏洞

    XSS跨站漏洞最终形成的原因是对输入与输出没有严格过滤. 1.输入与输出 在HTML中,<,>,",',&都有比较特殊的意义.HTML标签,属性就是由这几个符合组成的.P ...

  4. redis学习(二)——String数据类型

    一.概述 字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中字符串类型的 ...

  5. vue 图片切换动态绑定

    <img :src="切换条件 ? require('xxx.png') : require('xxx.png')" />

  6. 编写Linux C++程序如何影响VIRT(虚存)和RES(实存/常驻内存)

    转载目的,主要是为了理解lVIRT虚拟内存.RES常驻内存.共享内存SHR.SWAP和实际程序应用如何对应的. 在Linux命令行中执行top命令,可以查询到所有进程使用的VIRT虚拟内存.RES常驻 ...

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

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

  8. 面试 16:栈的压入压出队列(剑指 Offer 第 22 题)

    我们今天继续来看看周五留下的习题: 面试题:输入两个整数序列,第一个序列表示栈的压入顺序,请判断二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如:压入序列为{1,2,3,4,5},那{ ...

  9. iOS开发简记(7):网络请求模块

    主流的APP都少不了跟服务器交互,网络请求是少不了的事情. 开源的网络请求库,有很多,比如:AFNetworking.YTKNetwork.PPNetworkHelper.ASIHttpRequest ...

  10. Codeforces Round #486 (Div. 3)-C. Equal Sums

    C. Equal Sums time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...