如何查到网站是谁做的,app开发公司推荐,做帮助手册的网站,伪静态 网站如何扫描项目开发中#xff0c;在浏览同事的代码#xff0c;发现他经常用一个属性--box-sizing#xff0c;很好奇是什么#xff0c;于是乎#xff0c;上网查阅资料学了起来。 首先我们先复习一下盒模型的组成#xff1a;一个div通常由 content(内容) margin padding border组成… 项目开发中在浏览同事的代码发现他经常用一个属性--box-sizing很好奇是什么于是乎上网查阅资料学了起来。 首先我们先复习一下盒模型的组成一个div通常由 content(内容) margin padding border组成。 浏览器有两种盒模型w3c说的标准模型和ie下的传统模型。也就是css3中box-sizing中对应的属性值。 拿盒子的尺寸来说: box-sizing w3c的标准模型 content-box 盒子的高度 conent的height padding margin border 盒子的宽度 content的width padding margin border ie下的传统模型 border-box 盒子的高度 content的height margin (height 包含了padding border content) 盒子的宽度 content的width margin width 包含了padding border content 看这理论感觉很乱动手实践才是真道理。 看一下w3下的标准模型box-sizingcontent-box 这意思就是你给div本身的宽度和高度是100px但是因为marginpadding和border的添加导致这个div的宽度和高度随之变大。可以想象一下一排上正好可以放5个等大的div但是半路上给一个div添加了margin或padding或border一排还能放下5个div吗也许是3个或者2个总之放不下5个。 box-sizing:content-box 是浏览器默认的样式即使不添加也会 遵遁content-box。 看一下ie下的传统模型 box-sizingborder-box 这意思就是你给div的高度和宽度是100px不管你加了padding和border其宽度和高度不会改变改变的是里面content内容的高度和宽度。举个例子一排上可以放5个等大的div你给其中的一个div添加了padding或者border没有margin这一排上还是5个div只不过你添加padding或border的div里的内容缩小了。 关于这两者的区别只要仔细观察一下layout图就会恍然大悟原来是这样啊。在项目开发中我们经常遇到一行上放等大的li时只要添加了padding或者border时容易往下排右边一片空白我们不得不调一下li的height和width现在不用啦通过box-sizingborder-box就可以直接解决了。 box-sizingborder-box主要用于布局以及表单元素表单中不同类型type的默认宽度不一致可以通过border-box解决。 兼容性 box-sizing是css3的新属性会有兼容性问题。 box-sizing现代浏览器都支持但IE家族只有IE8版本以上才支持虽然现代浏览器支持box-sizing但有些浏览器还是需要加上自己的前缀Mozilla需要加上-moz-Webkit内核需要加上-webkit-Presto内核-o-,IE8-ms-所以box-sizing兼容浏览器时需要加上各自的前缀。例如 div{-moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box;
}div {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } css3的计算属性calc的意思和box-sizingborder-box一样。简单用box-sizing复杂可以用calc 另外有一位大神对box-sizing的理解以及讲解特别好我也是看他的文章才搞明白的如果想了解更深可以去访问他的文章 http://blog.sina.com.cn/s/blog_877284510101kt87.html
