css 边框覆盖 |css盒子居中对齐

css边框滴水，淘宝左侧分类 css，html与css标签，css图片加载失败处理，css3 代码兼容网站，网页插入背景音乐 css，css盒子居中对齐 css 边框覆盖 |css盒子居中对齐

.box {
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 20px;
}

如上代码所示，大家给一个宽高为 200px 的盒子设置了 10px 的边框和 20px 的内边距。

但是，由于边框的宽度增加了盒子整体的宽高，导致内边距被边框覆盖，使得盒子的内容显示不完整。

解决这个问题的方法很简单，就是使用box-sizing属性。它的作用是决定盒子模型的计算方式。

.box {
width: 200px;
height: 200px;
border: 10px solid #000;
padding: 20px;
box-sizing: border-box;
}

当使用border-box时，元素的宽度和高度会包含内边距和边框，即边框和内边距不会再撑开盒子，从而避免了边框覆盖的问题。

需要注意的是，IE7 以下的浏览器不支持box-sizing属性，所以如果需要兼容旧浏览器，需要使用 hack 或者 JavaScript 来解决。

总之，了解如何解决边框覆盖问题对于 CSS 的学习以及网页设计都非常重要。