【域名邮箱】黑龙江省双鸭山国际英文域名注册/中文国内域名申请/企业域名服务器空间备案-企业域名【网页制作公司】

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; }.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;}

亲自试一试

box-sizing 属性解决了这个问题。

如果使用 CSS box-sizing 属性

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。

如果在元素上设置了 box-sizing: border-box;，则宽度和高度会包括内边距和边框：

该例与上例相同，两个 <div> 元素都设置了 box-sizing: border-box;：

实例

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;}.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;}

亲自试一试

由于使用 box-sizing: border-box; 的效果如此之好，许多开发人员希望页面上的所有元素都能够以这种方式工作。

下面的代码能够确保以这种更直观的方式调整所有元素的大小。许多浏览器已经在对许多表单元素使用 box-sizing: border-box;（但并非全部 - 这就是为什么 input 和 textarea 在 width: 100%; 时看起来不同）。

将其应用于所有元素是安全且明智的：

实例

* {
  box-sizing: border-box;}

亲自试一试

CSS Box Sizing 属性