加padding之后盒子会被撑大的解决办法
盒子代码:
div{
margin:0 auto;
margin-top:400px;
width:100px;
height:100px;
text-align: center;
border:2px solid black;
}
</style>
</head>
<body>
<div>我是内容</div>
运行示例
这是正常的页面 然后我们给内容部分加个padding:10px;
效果如下：
我们可以看到 现在盒子宽度是：100+两个padding+两个border=124px;
同理 宽度是：100+两个padding+两个border=124px;
很明显的 盒子被撑大了
然后我们加入如下代码
box-sizing: border-box;
我们再看下运行截图：
我们看到浏览器自动计算了内容的宽高从而保持原有的高度和宽度