上一节:
下一节:

  CSS Box调整

  • CSS自定义属性（变量）

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

  • 没有CSS box-sizing属性

    默认情况下，元素的宽度和高度计算如下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度 这意味着：当您设置元素的宽度/高度时，元素通常看起来比您设置的大（因为元素的边框和填充被添加到元素的指定宽度/高度）。 下图显示了两个具有相同指定宽度和高度的<div>元素：
    这个div较小（宽度为300px，高度为100px）。
    这个div更大（宽度也是300px，高度是100px）。 
    .div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}
    尝试一下
    box-sizing属性解决了这个问题。

  • 使用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 定义如何计算元素的宽度和高度:是否应该包含填充和边框
上一节:
下一节: