CSS Box Sizing

CSS Box Sizing

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

如果未指定 CSS box-sizing 属性

默认情况下，元素的宽度和高度是这样计算的：

  • width + padding + border = 元素的实际宽度
  • height + padding + border = 元素的实际高度

这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。

下图中展示了两个具有相同指定宽度和高度的 <div> 元素：

这个 div 较小
（宽度为 300px，高度为 100px）。
这个 div 更大
（宽度也为 300px，高度为 100px）。

上面的两个 <div> 元素在最终结果中呈现出不同的尺寸（因为 div2 指定了内边距）：

Esimerkki

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

Kokeile itse

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

如果使用 CSS box-sizing 属性

box-sizing 属性允许我们在元素的总宽度和高度中包括内边距和边框。

如果在元素上设置了 box-sizing: border-box;，则宽度和高度将包括内边距和边框：

现在两个 div 的大小相同！
Hooray!

此例与上例相同，两个 <div> 元素都设置了 box-sizing: border-box;：

Esimerkki

.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;
}

Kokeile itse

因为使用 box-sizing: border-box; vaikutusta niin hyvin, että monet kehittäjät toivovat, että kaikki elementit voisivat toimia tällä tavalla verkkosivuilla.

Seuraava koodi varmistaa, että kaikki elementit voidaan säätää tällä intuitiivisella tavalla. Monet selaimet ovat jo käyttäneet tätä box-sizing: border-box;（mutta ei kaikille - tämän vuoksi input ja textarea näyttävät eri tavoin width: 100%; aikana）。

On turvallista ja viisaata soveltaa tätä kaikille elementeille:

Esimerkki

* {
  box-sizing: border-box;
}

Kokeile itse

CSS Box Sizing ominaisuus

Ominaisuus Kuvaus
box-sizing Määritetään elementin leveys ja korkeus laskentatapa: niiden tulisi sisältää sisätilat (padding) ja reunat.