内边距、边框撑大盒子问题

最新推荐文章于 2023-03-01 13:42:30 发布

嗷呜~嗷呜~呜呜~

最新推荐文章于 2023-03-01 13:42:30 发布

阅读量1.9k

点赞数 2

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_63712639/article/details/121550842

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

我们在开发中经常会遇到设置盒子内间距和边框然后会撑大盒子的问题，然而我们又不想盒子被撑大，因为这会影响我们的布局，那么我们该怎么办呢？

首先我们要知道标准盒子模型宽高的计算方式。

标准盒子模型宽高=自己设置的宽高+内间距+边框+外间距

因此当我们设置盒子内间距边框等属性的时候就避免不了撑大盒子,想解决这个问题有两种办法.

第一种就是自己手动减去对应的宽高,这样就可以获得我们想要的盒子大小.

第二种通过怪异盒子模型自动来获得我们想要的盒子大小.

怪异盒子模型的宽高计算方式和标准盒子模型不一样,所以我们可以通过设置这个属性来解决问题.

怪异盒子模型宽高=原来设置的宽高+外间距

原来设置的宽高=新内间距+新边框+重新计算的宽高

box-sizing: border-box;

假设我们需要一个200宽高的盒子,然后需要给盒子设置20px的内间距,使用怪异模型,宽度高度就会自动给我们减去40,不需要我们手动计算.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      padding: 20px;
      /* 怪异模型 */
      box-sizing: border-box;
      /* 水平居中 */
      margin:200px auto;
      background-color: pink;
    }
  </style>
</head>
<body>
<div class="box"></div>
<script>
</script>
</body>
</html>