border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
border-box width 和 height 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。
这里的维度计算为: width = border + padding + 内容的 width, height = border + padding + 内容的 height。
<view class="recommendlist">
<image class="recommendShoppings" mode="widthFix" wx:for="{
{recommendList.PRODUCT}}" wx:key="index" src="{
{item.THUMB_URL}}"></image>
</view>
.recommendlist{
padding:5px 4px 50px 4px;
background-color: white;
margin-top: 12px;
}
.recommendlist .recommendShoppings{
width: 50%;
box-sizing: border-box;
padding: 2px;
margin-bottom: 10px;
}