css3 box-sizing属性
个人总结:
如果需要兼容IE6 IE7,使用content-box。现在流行bootstrap3,需注意它使用的是border-box。
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box,border和padding不计算入width之内
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是怪异模式了~
ie8+浏览器支持content-box和border-box;
ff则支持全部三个值。
使用时:
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other
栗子:

- <style type="text/css">
- .content-box{
- box-sizing:content-box;
- -moz-box-sizing:content-box;
- width: 100px;
- height: 100px;
- padding: 20px;
- border: 5px solid #E6A43F;
- background: blue;
- }
- .padding-box{
- box-sizing:padding-box;
- -moz-box-sizing:padding-box;
- width: 100px;
- height: 100px;
- padding: 20px;
- border: 5px solid #186645;
- background: red;
- }
- .border-box{
- box-sizing:border-box;
- -moz-box-sizing:border-box;
- width: 100px;
- height: 100px;
- padding: 20px;
- border: 5px solid #3DA3EF;
- background: yellow;
- }
- </style>

截图(ff):
原文:http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html
css3 box-sizing属性的更多相关文章
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- CSS3外轮廓属性
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...
- 学习笔记:CSS3的filter属性
CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...
- CSS3利用text-shadow属性实现多种效果的文字样式展现
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- css3 的box-sizing属性理解
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...
随机推荐
- 【代码笔记】iOS-带输入框的UIAlertView
一,效果图. 二,代码. //点击任何处,弹出输入框 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ UIAlertV ...
- 【读书笔记】iOS网络-异步请求与运行循环
异步请求需要运行循环.当数据传递到服务器或是被客户端接收时,运行循环用于实现事件与委托对象之间的通信.异步请求在发出时,会在当前线程的运行循环上操作,这个实现细节是很重要的,因为在GCD块中或者是通过 ...
- 【工具相关】iOS-Reveal的使用
一,首先下载Reveal工具. Reveal的下载地址:http://revealapp.com/download. 下载界面如下图所示,选择Download Trail蓝色按钮可以进行下载: 二,新 ...
- git之一
1.Git是什么Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 ...
- <a href>传参的中文乱码问题
版权声明:本文为博主半原创文章,未经博主允许不得不转载时允许转载 :) 当需要href进行传参,参数为中文时,会出现乱码问题,最简单的方法是: 传入的值首先用escape()进行转码,然后在取值页面用 ...
- 迪杰斯特拉算法——PAT 1003
本文主要是将我对于我对于迪杰斯特拉算法的理解写出来,同时通过例题来希望能够加深对于算法的理解,其中有错误的地方希望大家指正. 迪杰斯特拉算法 我将这个算法理解成一个局部到整体的算法,这个方法确实越研究 ...
- Linux服务器宕机案例第二则
邮件告警发现海外工厂一Linux服务器连接不上,DPA(Database Performance Analyzer)系统也发现其出现问题,ping这台服务器发现网络不通,联系不到当地系统管理员,邮件咨 ...
- Javascript之旅——第四站:parseInt中要注意的坑
前些天信用卡站点要接入一个新功能,不过还真比较坑爹,asp站点,大家都知道信用卡的背面是有一个有效期的,在对接银行中这个信息 一定是要传给银行做数据校验,用户在语音输入信用卡有效期后,系统会做一个有效 ...
- 简单看看这两个类 String和StringBuilder
我记得以前在园子里面讨论这两个类的文章有很多很多,并且还拿出了很多的测试报告,在什么情况下,谁比谁快,在什么情况下,该用谁 不该用谁等等这些,我这里就不比较了,我就简单看看他们里面的内部实现,那就先看 ...
- MySQL数据库出现The server quit without updating PID file.
一.服务器环境 操作系统:CentOS-6.4 服务器环境:集成环境LNMP1.0 二.步骤重现 1.安装LNMP1.0,具体操作方法见这里,安装成功: 2.因个人需求,现将MySQL数据库存放在/d ...