box-sizing神奇功效

当我们写布局的时候 一般都会先分块 将布局固定 然后在将内容填充到布局里面去 在有时候将内容填充进去后会出现布局混乱 内容下沉

这是原来的效果 

这是混乱的结果 

原因就是内容太多，超过原来容器。可能是我们在里面加了padding的原因，这个时候我们只需要加一个box-sizing:border-box就可以了（记得适应不同浏览器），然后见面就会被修复好。

但是IE6和IE7是不支持box-sizing的属性，所以为了兼容我们还需要为他们写一个hack:

 

box-sizing 还能同意form表单中的元素风格 

submit,reset,button,section,input[type="text"] 这些 都会有自己默认的border padding margin 就算一开始你设置的宽度是一样的  但是出来的效果也是不一样的 这个时候我们就要将margin border padding 统一  并且加上box-sizing 这样就能达到效果一致。

 

 

 

原文: https://www.w3cplus.com/content/css3-box-sizing © w3cplus.com