Sifat box-sizing

Sifat box-sizing membolehkan anda mengubah cara pengiraan saiz elemen.

Secara lalai, menambah padding akan mengembangkan elemen: jika kita menetapkan lebar width 100px dan padding-left sebanyak 20px, maka lebar sebenar elemen akan menjadi 120px.

Dan jika kita menetapkan border-left sebanyak 10px, maka lebar sebenar elemen akan menjadi 130px. Iaitu, padding dan border mengembangkan blok (baik dari segi lebar mahupun ketinggian). Tingkah laku ini boleh diubah dengan menggunakan box-sizing.

Sintaks

cssselector {
  box-sizing: content-box | border-box;
}

Nilai

Nilai lalai: content-box.

Contoh . Tingkah laku piawai

Sekarang kedua-dua blok mempunyai ketinggian dan lebar yang sama, namun blok kedua mempunyai padding yang ditetapkan, manakala yang pertama tidak. Lihat bagaimana saiz mereka berbeza:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Contoh . Tingkah laku piawai

Sekarang kedua-dua blok mempunyai ketinggian dan lebar yang sama, namun blok kedua mempunyai sempadan 10px yang ditetapkan, manakala yang pertama tidak. Lihat, bagaimana saiz mereka berbeza:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Contoh . Tingkah laku piawai

Sekarang blok kedua mempunyai kedua-dua padding dan sempadan 10px:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Contoh . Nilai border-box

Mari tambahkan nilai border-box kepada sifat box-sizing untuk elemen kedua. Sekarang saiz elemen pertama dan kedua akan menjadi sama:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Lihat juga