css3 box-sizing 属性

来源：互联网发布：unity3d 2d网格地图编辑：程序博客网时间：2024/06/11 16:22

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。
默认值： content-box
JavaScript 语法： object.style.boxSizing="border-box"

语法
box-sizing: content-box|border-box|inherit;

content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承 box-sizing 属性的值。

content-box是默认值，这里不做多讲，我们着重来看border-box：

场景描述：我们有一个未知宽度的外围容器（div）（这里暂定为500px）,里面有俩个子元素，全部左浮动，他们各占父容器的50%;到此没有任何问题，但是我们有个需求，这俩个子元素要有1px的边框，这是我想大家都能想到，第二个子元素换行了，原因我就不做解释了，不理解的动手实践一下即可，这时，我们的border-box就应该上场了，我们只需在俩个子元素上添加box-sizing：border-box；即可，为什么呢？拿公式说话：
content-box：横向：content-width = width+padding-left+padding-right+border-left+border-right;
border-box: 横向：content-width = width-padding-left-padding-right-border-left-border-right;
纵向与横向类似，这里就不做赘述，通过公式我们就一目了然，即content-box是外扩，border-box是内缩。

应用场景：在传统的布局中，大多情况下，我们是可以确定元素的宽高，所以很少用这个属性，但是在当下流行的响应式布局，移动端web开发中，元素的尺寸都是用百分比表示的，此时，box-sizing：border-box；就派上用场了。

.left{width:50%;height:300px;border:1px solid red;background:green;float:left;box-sizing:border-box}

.right{width:50%;height:300px;border:1px solid blue;background:yellow;float:left;box-sizing:border-box}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>

0 0