做项目时,遇到了一下问题:
当我子input框设置了
.right input { height: 30px; width: 100%; margin-top: 8px; margin-left: 3px; padding: 3px; }
可以看到input框已经放不下了,溢出了父元素的框。可能有人说设置overflow:hidden就不会啦。
但是,超过父边框的就直接隐藏起来了,我们的input框就好像硬生生的被切断了,不美观。
所以,以下就要用box-sizing这个属性来解决:
box-sizing常用有两个属性:content-box和border-box
content-box:是默认值,width和height直接决定了内容content的高度(上面我们宽度设为100%,还要加上padding和border的宽度,不撑开才怪)
border-box:width和height就已经包含了padding+border+content的宽度了,你边框、内边距设置得越多,内容也会随之缩减,最终宽度都是你设定好的那个宽度。
所以我在input的样式里面加上了 box-sizing:border-box
.right input {
box-sizing: border-box;
height: 30px;
width: 100%;
margin-top: 8px;
margin-right: 3px;
padding: 3px;
}
duang!!最终效果ok!