css3中可以通过box-sizing来指定盒模型。
有二个值:content-box和border-box
默认情况是:
box-sizing:content-box 盒子大小是with+padding+border
第二种是:
box-sizing:border-box; 盒子大小是width
如何盒子模型我们改为box-sizing:border-box,那padding和border就不会
撑大盒子了(前提是padding和border不会超过width宽度)
代码演示:
<style>
div{
width: 200px;
height: 200px;
background-color: aquamarine;
padding: 10px;
border: 10px solid red;
}
p{
width: 200px;
height: 200px;
background-color: aquamarine;
padding: 10px;
border: 10px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
运行结果: