box-sizing: border-box

最新推荐文章于 2025-04-14 18:05:48 发布

帅气且烦恼

最新推荐文章于 2025-04-14 18:05:48 发布

阅读量476

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_46641049/article/details/136832633

版权

本文解释了CSS盒模型中的两种模式：border-box和content-box，强调了border-box如何使宽度和高度计算更直观，同时通过代码示例展示了如何使用并测量元素的实际宽度

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

box-sizing: border-box;
border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变

在这里插入图片描述
box-sizing: content-box;
当定义width和height时，它的参数值不包括border和padding

  <style>
    .box-model {
      width: 100px;
      height: 100px;
      padding: 10px;
      /* box-sizing: border-box; */
      /* border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变 */
      box-sizing: content-box;
      /* 当定义width和height时，它的参数值不包括border和padding */
      border: 1px solid red;
      background-color: #ccc;
    }
  </style>
  <body>
    <div class="box-model" id="box-model">
      <p>美好的一天又开始了࿰