css3新增属性box-sizing详解

最新推荐文章于 2023-09-21 15:34:29 发布

今天会下雨吗

最新推荐文章于 2023-09-21 15:34:29 发布

阅读量938

点赞数 1

分类专栏： CSS 面试文章标签： css3 html5 css

本文链接：https://blog.csdn.net/weixin_45663697/article/details/120550769

版权

CSS 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

面试

13 篇文章 0 订阅

订阅专栏

1. 定义详解

box-sizing属性是用来规定容器元素的总宽高是如何计算的
W3C标准盒模型中规定：
- 元素总宽度 = contentWidth + padding +border
- 元素总高度 = contentHeight + padding + border
- margin不计入元素的宽高，他设置的是一个元素与其他元素之间的间隔，不会改变元素本身的宽高
- 例如，要设置一个总宽度为350px的盒子
```
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
}
```
  - 计算如下
```
320px(内容宽度)
+ 20px（左+右内边距）
+ 10px（左+右边框）
= 350px
```
平时我们给元素设置的width和height都是设置的内容区域宽高，如果加了padding、border这些的话就会撑大容器。会给布局造成一定的影响。
所以我们就可以使用box-sizing:border-box来改变盒子的宽高计算方式。
- 告诉浏览器：元素实际宽高就是我们设置的width和height，后续添加的padding和border也包括其中。

2. box-sizing的几个属性值

他一共有三个属性值

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

3. 使用

设置一个宽高为100*100的盒子

<!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>
      .main{
        width: 100px;
        height: 100px;
        padding: 20px;
        margin: 20px;
        border: 20px solid red;
        background-color: pink;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
  </html>

没有添加box-sizing: border-box;时，
- 元素总宽度 = 100（内容宽度） + 40（左右内边距） + 40（左右边框宽度） = 180px
添加box-sizing: border-box;后
- 内容宽度 = width（100px） - padding（40px） - border（40px） = 20px

今天会下雨吗

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
css3新增属性box-sizing详解

1. 定义详解box-sizing属性是用来规定容器元素的总宽高是如何计算的W3C标准盒模型中规定：元素总宽度 = contentWidth + padding +border元素总高度 = contentHeight + padding + bordermargin不计入元素的宽高，他设置的是一个元素与其他元素之间的间隔，不会改变元素本身的宽高例如，要设置一个总宽度为350px的盒子div { width: 320px; padding: 10px;
复制链接

扫一扫