web前端入门到实战：CSS box-sizing属性的正确用法

时间 2019-12-20

标签 web 前端入门实战 css box sizing 属性正确用法栏目 HTML 繁體版

原文原文链接

CSS自定义属性（变量）

CSS box-sizing属性容许咱们在元素的总宽度和高度中包含填充和边框。html

没有CSS box-sizing属性

默认状况下，元素的宽度和高度计算以下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度这意味着：当您设置元素的宽度/高度时，元素一般看起来比您设置的大（由于元素的边框和填充被添加到元素的指定宽度/高度）。下图显示了两个具备相同指定宽度和高度的<div>元素：前端

学习Q-q-u-n： 784783012 ，分享学习的方法和须要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ccs</title>
    <style>
        .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
        }

        .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<div class="div1">这个div更小(宽度为300px，高度为100px)。</div>
<br>
<div class="div2">这个div更大(宽度也是300px，高度也是100px)。</div>

</body>
</html>

box-sizing属性解决了这个问题。web

使用CSS box-sizing属性

box-sizing属性容许咱们在元素的总宽度和高度中包含填充和边框。若是box-sizing: border-box;在元素填充上设置而且边框包含在宽度和高度中：浏览器

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

因为使用它的结果box-sizing: border-box;很是好，许多开发人员但愿他们页面上的全部元素都以这种方式工做。下面的代码确保以更直观的方式调整全部元素的大小。许多浏览器已经box-sizing: border-box;用于许多表单元素（但不是所有 - 这就是输入和文本区域在宽度上看起来不一样的缘由：100％;）。将其应用于全部元素是安全和明智的：安全

* {
  box-sizing: border-box;
}

CSS Box大小调整属性

box-sizing 定义如何计算元素的宽度和高度:是否应该包含填充和边框ide