CSS3 盒子设置border和padding不撑开盒子

最新推荐文章于 2024-05-28 09:08:58 发布

mouka~

最新推荐文章于 2024-05-28 09:08:58 发布

阅读量6.5k

点赞数 6

分类专栏： HTML+CSS+JS 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_38370387/article/details/124590129

版权

HTML+CSS+JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

普通的盒子模型我们设置border会将盒子撑大

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 10px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        border: 30px solid red;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box1">Test1</div>
    <div class="box2">Test2</div>
  </body>
</html>

很明显盒子被撑开变大，实际宽度大于100像素

通过box-sizing指定盒子模型改变计算盒子大小的方式

属性说明:

box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

默认情况下，元素的宽度(width) 和高度(height)计算方式如下：

width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度

值	说明
content-box	默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box	告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 10px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        border: 30px solid red;
        margin-bottom: 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box1">Test1</div>
    <div class="box2">Test2</div>
  </body>
</html>

通过设置 box-sizing: border-box; 设置border的时候不会撑开盒子

同理，padding也是如此

mouka~

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
CSS3 盒子设置border和padding不撑开盒子

普通的盒子模型我们设置border会将盒子撑大<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scal
复制链接

扫一扫

专栏目录