本文介绍了css3中的box-sizing属性,在这之前读者需要预备知识width的范围。

浏览器的支持情况

Browser Suppored Notes
Internet Explorer Yes version 8.0
Mozilla Firefox Yes 29.0
2.0 -moz-
chrome Yes 10.0
4.0 -webkit-
opera Yes version 9.5
Safari Yes 5.1
3.2 -webkit-

box-sizing属性

box-sizing属性可以有三个值:content-box(defalut),border-box,inherit。

  1. content-box,border和padding不计算入width之内。
  2. border-box,border和padding计算入width之内。
  3. inherit,从父元素继承。
  <style>
div{
width:100px;
height:100px;
border:20px solid yellow;
padding:20px;
background:green;
background-clip:content-box; }
.content-box{
box-sizing:content-box;
}
.border-box{
box-sizing:border-box;
}
</style>

效果截图:

参考文章:

http://www.runoob.com/cssref/css3-pr-box-sizing.html

本文章为博主原创作品,若需转载请注明出处。

【CSS3】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. 为什么MVC不是一种设计模式

    http://damoqiongqiu.iteye.com/blog/1949256 ---比较Backbone和Ext4.x在MVC实现上的差异 大漠穷秋 前言 圣人云:不想做妈咪的小姐不是好码农. ...

  2. javascript类型系统——Math对象

    × 目录 [1]常量 [2]函数 前面的话 javascript使用算术运算符实现基本的算术运算,如果要实现更加复杂的算术运算,需要通过Math对象定义的常量和函数来实现.和其他对象不同,Math只是 ...

  3. 最简单的可取消多选效果(以从水果篮中挑选水果为例)【jsDEMO】

    [功能说明] 最简单的可取消多选效果(以从水果篮中挑选水果为例) [html代码说明] <div class="box" id="box"> < ...

  4. CSS光标cursor

    前面的话 在浏览器中,光标对于提供交互反馈很有用.通过在不同的场景中改变光标,就能赋予其不同的含义 定义 cursor光标 值: [<uri>,]*[auto | default | po ...

  5. HTML的音频和视频

    目录 [1]媒体格式 音频格式 视频格式 [2]元素 插件元素 HTML5元素 [3]HTML音频 [4]HTML视频 前面的话 多媒体元素(比如视频和音频)存储于媒体文件中,确定媒体类型的最常用的方 ...

  6. JSP网站开发基础总结《十二》

    前两篇已经简单为大家介绍了一下,有关Filter接口的知识,本篇就让我们以一个登录小功能,来具体实现一下过滤器的作用,便于大家掌握.具体为大家介绍一下如何使用Filter对访问进行过滤,及如何防止中文 ...

  7. spring源码分析之spring-core asm概述

    ASM是什么? ASM is an all purpose Java bytecode manipulation and analysis framework. It can be used to m ...

  8. HBase相关

    hadoop和hbase节点添加和单独重启 有时候hadoop或hbase集群运行时间久了后,某些节点就会失效,这个时候如果不想重启整个集群(这种情况在很多情况下已经不被允许),这个时候可以单独重启失 ...

  9. 从设计到开发,硅谷技术专家教你做“声控”APP

    编者:本文为携程机票研发部技术专家祁一鸣在携程技术微分享中的分享内容,关注携程技术中心微信公号ctriptech,获知更多一手干货. [携程技术微分享]是携程技术中心推出的线上公开分享课程,每月1-2 ...

  10. 我的游戏蜗牛web前端面试经历

    蜗牛在江苏苏州地区应该算是比较大的互联网公司了,可以称得上中国游戏的鼻祖,之前一直很想进蜗牛,但作为一个应届毕业生却没有看到蜗牛发布任何关于招聘实习生的职位,无奈之下于是就毛遂自荐了,主动以邮件的形式 ...