在HTML中width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？
题目
width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，这时该怎么办？
分析
因为传统的代码：
.box3{ width: 50%; height: 50%; background-color: aqua; border: 1px solid black; float: left; }
会导致溢出，所以这时我们加上代码：box-sizing: border-box;
原本代码变为：
.box2{ width: 50%; height: 50%; background-color: aqua; box-sizing: border-box; border: 1px solid black; float: left; }
这时就可以避免溢出了。
原理
box-sizing属性是css3中新增的属性，允许你以某种方式定义某些元素，以适应指定区域（假如你需要并排放置两个带边框的框，但是width:100%了，在设置border,这时盒子的总宽度会大于父盒子，会溢出，可以通过将box-sizing属性值设置为“border-box”，这可以把边框放入盒子中。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！