一、什么是box-sizing
box-sizing是CSS3新增的一个属性，用于控制元素宽高的计算方式，常见的有两种值：
box-sizing: content-box; // 默认值，宽高只计算内容区域
box-sizing: border-box; // 宽高计算包括内容、内边距和边框
box-sizing属性的主要作用是让开发者控制元素的盒模型，从而更加灵活地进行页面布局。下面我们来看一些实际应用。
二、box-sizing实战-响应式布局
在移动端开发中，响应式布局是比较常见的技术，使用box-sizing可以很好地实现这一点。我们可以通过设置所有元素的box-sizing为border-box，然后使用百分比作为宽度，达到自适应的效果。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.box {
width: 25%;
padding: 20px;
float: left;
}在上面的代码中，我们将所有元素都设置为border-box盒模型，这样可以计算内边距和边框的宽高，避免了使用传统的盒模型（content-box）时会出现的盒子宽度换算问题。接着，设置.container宽度为100%，防止盒子超出父容器，然后限制最大宽度为1200px，实现响应式布局。最后是.box的样式，宽度为25%时，可以自适应宽度，而padding的值不会改变宽度，均布四个盒子。
三、box-sizing实战-响应式表格
使用box-sizing实现响应式表格也是一种常见的技术。我们可以使用border-spacing属性来控制单元格间距，同时设置单元格宽度为百分比，使用box-sizing: border-box属性。这样可以实现表格在不同尺寸的设备上自适应的效果。
table {
border-collapse: separate;
border-spacing: 0px;
width: 100%;
}
td {
width: 50%;
padding: 10px;
box-sizing: border-box;
}在上面的代码中，通过设置table的border-collapse为separate，使单元格有一个边框。同时，使用border-spacing: 0px来控制单元格的间距。接着，设置td的宽度为50%和 padding 10px，实现表格单元格水平分布和自适应。
四、box-sizing实战-图片自适应
当图片大小不同时，如何保持图片的比例不受影响呢？可以使用box-sizing实现图片自适应的效果。我们可以将图片包裹在div中，将box-sizing设为border-box、将div的padding-bottom属性值设置为图片高度与宽度比例的百分比。
.wrapper {
position: relative;
width: 100%;
}
.img-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
padding-bottom: 75%; // 图片高度与宽度比例为4:3
}
.img-box img {
display: block;
max-width: 100%;
max-height: 100%;
}在上面的代码中，我们用div包含了图片，将其放在一个相对定位的wrapper中，然后用绝对定位的方式将div居中。接着，将div的width设置成100%，padding-bottom设置成图片高度与宽度的比例（这里是4：3）。最后再将img的max-width和max-height都设置为100%，实现图片的自适应效果。
总结
box-sizing属性使得开发者可以更加灵活地控制元素的盒模型，较好地实现手机端的响应式布局、响应式表格、图片自适应等效果。使用box-sizing: border-box时，需要注意内边距和边框的宽高计算问题，从而准确计算元素的实际大小。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/193027.html
微信扫一扫 
支付宝扫一扫 