微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

Box-sizing:小身材,大拳头!

2015-11-14 19:53 前端大全

(点击上方,可快速关注)


作者:卖烧烤夫斯基

网址:http://www.cnblogs.com/constantince/p/4896419.html


今天,在加完班回来的22点,忙里偷闲,分享一下最近学到的一个小知识点如题。标题的灵感来自于暴雪的一款卡牌游戏:炉石传说中的一张卡牌的上场台词,觉得很契合本篇博客要表达的含义,身材小小,拳头大大呢!


盒子模型


Box-sizing属性一直比较陌生,在楼主平时的开发过程中一直都没机会见识,以前遇到应该用它解决的问题,很无耻的用了其他偷工减料,拿驴凑马的招来完成。后来才通过网上资料查到,原来它是设置box模型的计算方式的一种属性。说到box模型,了解w3c的同学一定不会陌生,它对盒子模型的定义如下:把每一个网页中的元素都看作是一个盒子,这个盒子有边框(border),有内容(content),有和在其他外面的盒子的间距(margin),有和在其内盒子的边距(padding)。它的高度和宽度,取决于它的内容和边框以及内边距的总和。在浏览器中,通过开发者工具,我们可以很容易地看到一个元素的盒子模型:



从上图可以看到,这个元素的宽和高分别是100px和100px。查看css代码,我们也可以看到它的width和height分别为100px和100px。到此为止,一切都很简单,没有问题。但是,如果我们接下来给它设置一个border呢?那么他的宽和高是多少呢?



通过查看元素,我们发现,这个元素虽然设置了100px的宽度和100px的高度,但实际上,在添加了内边距和边框后,它的宽度和高度变成了104px和104px;所以,元素实际的宽度和高度是在设置的width和height属性后加上padding和border的宽度和高度的。虽然只是一个小小的知识点,但常常会给我们造成一些麻烦。


小问题,大麻烦


来看一个经常遇到的切换导航。在手机端经常的设计中经常可以遇到此问题,顶部的tab切换标签。设计给的标注是左右对半分,并且拥有各自的边框,然后自由伸缩和切换。像下面那样。



一开始,你会感觉这很容易,因为无非是两个宽度为50%的div并排排列了。但是开始做的时候,你才会知道被设计师的边框坑了。因为如果你设置了width为50%,那么两个div是100%,除此之外还有两个div的左右边框的长度是没地方放置的!也就是说,当你把它们并排放置在一起的时候,实际上它们总宽度是100% + 4px!,多出了4个px,这导致了右边的box会掉下去(如果你用的float)。如果你用box布局,在使用了flex自由延伸后属性(请见我之前的博客)不会出现这个情况,但如果你还不会box布局,而又希望简单解决此问题(尤其是在考虑padding的固定填充距离后box布局也无法完美解决),那么是时候该学习box-sizing了(只需要1000ms)。


box-sizing:


box-sizing是css3中出现的属性,它允许你设置或检索对象的盒模型组成模式,通过修改属性的值对盒子模型的概念做设置。我们知道,标准的盒子模型的宽是content+borderwidth+padding。box-sizing属性的值中有一个就是解释标准模型的值,它是默认的content-box,一般情况下,我们不使用它。我们使用的是它的其他值,比如:border-box,含义是将盒子的border和padding计算到设置的width中,而不是实际宽度中。所以,如果你设置width为100px,而border为1px的时候,盒子的实际大小仍旧是100px而不是102px。用这个属性,我们就可以完美地解决上面遇到的难题了:只需要在给两个div的css上写下box-sizing:border-box就可以了,保证两个div等宽,拥有1px长度,至于它们的框度是不是50%,你可以喊设计师自己量。除了以上两个值外,box-sizing还有一个padding-box值,顾名思义,就是把内边距计算在设置的框度内,而border是不计算的。


兼容性


box-sizing 目前被大多数浏览器支持, 但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀。当然,对于需要在i8以下的浏览器中解决上面提到过的tab排列问题,你是不需要这个属性的,因为它们对盒子模型的解释默认值就是border-box。这也是IE这个逐渐失势的顽固的老古董和w3c对盒子模型解释的差异。就像下面那张图一样:



结束语


对于box-sizing的属性从无知到了解,最后到运用自如,得益于老大的提点,简单的属性在实际生产中解决了很多布局问题。从根本上说还是自己见识和基础知识太少了,写这篇博客放到此处提醒自己,多学一点知识就多解决一点难题。




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 How to 改进质量过程?-清晨每日分享-吴老电台 颠覆BAT的力量,或许会是VR世界里长出的虚拟经济体 世界互联网大会这两天,大佬们都吹了哪些牛逼? 阀门(Valve)常打开,快发请求过来 | Tomcat的AccessLogValve介绍 相关搜索 --- 搜索中的推荐