CSS3 盒子模型：border-box

听海边涛声

于 2024-08-29 11:23:00 发布

阅读量407

点赞数 3

文章标签： css3 css

本文链接：https://blog.csdn.net/panghuangang/article/details/141673203

版权

CSS3 中可以通过box-sizing来指定盒子模型，有2个值：content-box、border-box。选择不同的值，我们计算盒子大小的方式就发生了改变。

box-sizing: content-box

box-sizing: content-box：盒子最终的实际大小为width+padding+border（这是以前默认的方式），即pdding和border会撑大盒子。

加不加box-sizing: content-box;这句话，效果是一样的：
在这里插入图片描述

在这里插入图片描述

不加box-sizing: content-box;这句话：
在这里插入图片描述

在这里插入图片描述

box-sizing: border-box

box-sizing: border-box; 盒子最终的大小就是width。

如果盒子模型采用 box-sizing: border-box;，那么padding和border就不会撑大盒子（前提是padding和border不会超过widht宽度）。

以后样式的开头部分可以加上：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      box-sizing: content-box;
      background-color: pink;
      border: 20px solid red;
      padding: 15px;
      font-size: 25px;
    }

    p {
      width: 200px;
      height: 200px;
      box-sizing: border-box;
      background-color: pink;
      border: 20px solid red;
      padding: 15px;
      font-size: 25px;
    }
  </style>
</head>

<body>
  <div>content-box</div>
  <p>border-box</p>
</body>

</html>