【CSS3】css3:box-sizing属性
本文介绍了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。
- content-box,border和padding不计算入width之内。
- border-box,border和padding计算入width之内。
- 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属性的更多相关文章
- CSS3 Flex Box(弹性盒子)
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- CSS3:布局display属性的flex(弹性布局)
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- CSS3:不可思议的border属性&Web字体图标Font Awesome
CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
- CSS3 新增的文本属性
一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
- 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 ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性。
CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性. CSS3 Generator ...
- CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...
随机推荐
- .NET面试题解析(05)-常量、字段、属性、特性与委托
系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 弱小和无知不是生存的障碍,傲慢才是!——<三体> 常见面试题目: 1. const和reado ...
- ios见习之-UISearchbar+tableview实现自动搜索自带提示
当做搜索时常常希望能在输入的时候出现搜索关键字,如下效果
- 如何启动免安装版Tomcat并将Tomcat添加到服务中
1.安装jdk,并配置环境变量 (1)在Path中添加 F:\Program Files\Java\jdk1.8.0_25\bin (2)添加一个JAVA_HOME变量,变量值为F:\Program ...
- Spark入门实战系列--8.Spark MLlib(下)--机器学习库SparkMLlib实战
[注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .MLlib实例 1.1 聚类实例 1.1.1 算法说明 聚类(Cluster analys ...
- selenium-webdriver(python) (十六) --unittest 框架
学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习selenium 也是从IED 开始的. IDE学习参考: 菜鸟学自动化测试(一)----selen ...
- [SDK2.2]Windows Azure Virtual Network (4) 创建Web Server 001并添加至Virtual Network
<Windows Azure Platform 系列文章目录> 在上一章内容中,笔者已经介绍了以下两个内容: 1.创建Virtual Network,并且设置了IP range 2.创建A ...
- JS的toFixed方法设置小数点位数后再进行计算,数据出错问题
这个应该算作失真,或者也不算.情况就是用了toFixed后再进行相关计算,得不到预期的结果 具体看例子 比如想动态计算百分比,保留一位小数如94.4%这样子 var blobTo = 409600; ...
- 利用bootstrap的modal组件自定义alert,confirm和modal对话框
由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootst ...
- 创建html元素
如果我要创建一个div元素. 1.使用DOM对象创建: 使用document.createElement('div')方法创建元素. 2.使用JQuery创建: 使用$('<div>通过J ...
- c#单例模式的实现
单例模式定义:一个类有且仅有一个实例,并且自行实例化向整个系统提供. 实现要点: 1.是单例模式的类只提供私有的构造函数. 2.是类定义中含有一个该类的静态私有对象. 3.是该类提供了一个静态的共 ...