CSS3中可以通过box-sizing来指定盒子模型,有2个值:content-box、border-box,这样我们计算盒子大小的方式就发生了改变
- box-sizing:content-box盒子大小为width+padding+border
- box-sizing:border-box盒子大小为width
如果盒子模型改为了box-sizing:border-box,那么padding和border就不会撑大盒子了(padding和border不会超过width)
<style>
div {
width: 200px;
height: 200px;
background-color: brown;
border: 20px solid rosybrown;
padding: 20px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: brown;
border: 20px solid rosybrown;
padding: 20px;
box-sizing: border-box;
}
</style>
<div>盒子模型</div>
<p>盒子模型</p>
那么我们可以让所有的盒子都这样设置:<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!