css库存,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

栗子：

.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;

}

截图(ff)：

原文：http://www.cnblogs.com/zhaoran/archive/2013/05/24/3097482.html

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; } 有时候在某些项目中 ...

随机推荐

PHP中的闭包和匿名函数

闭包的概念是指在创建闭包时,闭包会封装周围的状态的函数.即便闭包所在环境不在了.但闭包中封装的状态依然存在. 匿名函数就是没有名称的函数. 它们看似很函数一样,实际上它们属于Closure类的实例 P ...

初识 python

Python 语言介绍 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python变化 python 2 和 python 3 1.1/2 等于0.5 2.print ...

JDK5什么是新的线程锁技术(两)

一个. Lock线程同步实现互斥 Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也是一个对象. 两个线程运行的代码片段要实现同步相互排斥的效果.他们必须用 ...

C#:using与.net对象销毁

一 . 1.using 语句获取一个或多个资源,执行一个语句,然后处置该资源.     2.using 语句: using ( 资源获取 ) 嵌入语句 3.资源获取: 局部变量声明 表达式 资源是实现 ...

影响HTTP性能的常见因素

影响HTTP性能的常见因素 我们这里讨论HTTP性能是建立在一个最简单模型之上就是单台服务器的HTTP性能,当然对于大规模负载均衡集群也适用毕竟这种集群也是由多个HTTTP服务器的个体所组成.另外我们 ...

【架构设计】Android：配置式金字塔架构

最近做一个项目,在项目搭建之前,花了些许时间去思考一下如何搭建一个合适的架构.一开始的构思是希望能合理的把应用的各部分进行分离,使其像金字塔一样从上往下,下层为上层提供功能. 在平常项目中,总是有很多 ...

putty失活不挂起运行

https://blog.csdn.net/c1481118216/article/details/53010963 以下方式是试过了https://www.cnblogs.com/mysqlplus ...

LINUX学习 - 磁盘分区 + 开机自动挂载 + 性能测试

在看鸟哥linux私房菜,发现不少有趣的东西,真是相见恨晚. 情境:建立一个新的filesystem挂在/srv/myproject目录下,并让其开机自动挂载到目录,该目录给project群组共享,其 ...

python图像处理(1)图像的打开与保存

使用python进行图像处理时有三种库可以使用分别是:PIL.matplotlib.pyplot.opencv(opencv未接触) 注意:matplotlib读取进来的图片是unit8,0-255范 ...

LeetCode——Rotate Image

1. Question You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees ( ...