border-box tells the browser to understand that the border and padding values you set are included in the width. In other words, if you set the width of an element to 100px, then this 100px will include other border and padding, and the actual width of the content area will be the calculated value of width minus border + padding. In most cases this makes it easier for us to set the width and height of an element.
The border-box width and height properties include content, inner margins and borders, but do not include outer margins. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that the padding and border will be inside the box, for example, .box {width: 350px; border: 10px solid black;} will result in a 350px width box rendered in the browser. The content box cannot be negative and is assigned to 0, making it impossible to use border-box to make the element disappear.
The dimensions here are calculated as: width = border + padding + width of the content, height = border + padding + height of the content.
<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;
}
