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. 输出 1-100 内的奇数和偶数,并对其分别求和(while嵌套if-else循环)

    package com.summer.cn; /** * @author Summer * 输出 1-100 内的奇数和偶数,并对其分别求和 * while嵌套if-else循环 */ public ...

  2. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  3. MongoDB的分片集群搭建

    MongoDB的最为自豪的一个特色之一,分片. 参考官方文档: https://docs.mongodb.com/manual/sharding/  单机压力,高频查询CPU,IO 单表压力,百万千万 ...

  4. 微软Azure AspNetCore微服务实战第1期【补充2017-09-09活动】

    2017年09月09日,冒着酷暑,我们在(上海徐汇)虹桥路3号港汇中心2座10层组织了一次微软Azure AspNetCore微服务实战活动. 由于前期工作繁忙,活动完成之后,没能及时发布相关信息,特 ...

  5. POJ - 2528 区间离散化,线段树区间修改,区间询问

    这个题非常有意思的地方是,我们发现区间[1,4]和[5,8]是紧挨着的,因为这个的数代表的是一段区间,原本我们对于普通的离散, a[1]=1,a[2]=5,a[3]=6,a[4]=8;数组下标就是重新 ...

  6. ES6 Promise 详解

    一.概念 Promise,从语法上来讲,它是一个对象,是一个构造函数,可以获取 异步操作 的信息. 简单来讲,就是用同步的方式写异步代码,用来解决回调问题. 二.特点 Promise 对象有两个特点: ...

  7. A-Text Reverse(文本反向读)

    多组数据测试,输入t,表示要测几个,每个语句反向输出. 链接 [https://cn.vjudge.net/contest/235390#problem/A] 解: 就是getchar()和gets( ...

  8. Integer的NPE问题

  9. yield from

    一.yield 关于yield详细可参考我这篇文章 下面是一个带yield的生成器: def gen_yield(): while True: recv = yield do something wi ...

  10. rest-framework的认证组件

    认证组件 1.登录认证(与组件无关): 首先要在model表内添加用户表和token表: from django.db import models # Create your models here. ...