一、CSS3中可以通过box- sizing来指定盒模型,有2个值:即可指定为content-box或者border-box ,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
1. box-sizing: content-box盒子大小为width + padding + border ( 默认情况)
2. box- sizing: border-box盒子大小为width（其余设计的尺寸在盒子内部伸缩进行变化不会让盒子变大）
如果盒子模型我们改为了box- sizing: border-box，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪乔治
</div>
<p>
小猪佩奇
</p>
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
