Box-sizing հատկությունը

box-sizing հատկությունը թույլ է տալիս փոխել էլեմենտի չափերի հաշվարկման եղանակը:

Լռելյայն՝ padding-ի ավելացումը ընդլայնում է էլեմենտը. եթե մենք նշանակել ենք լայնություն width 100px և padding-left 20px, ապա էլեմենտի իրական լայնությունը կլինի 120px:

Իսկ եթե մենք նշանակենք նաև border-left 10px, ապա էլեմենտի իրական լայնությունը կդառնա 130px: Այսինքն՝ padding-ը և border-ը ընդլայնում են բլոկը (և լայնությամբ, և բարձրությամբ): Այս վարքագիծը կարելի է փոխել box-sizing-ի միջոցով:

Շարահյուսություն

cssընտրիչ {
  box-sizing: content-box | border-box;
}

Արժեքներ

Լռելյայն արժեքը՝ content-box:

Օրինակ . Ստանդարտ վարքագիծ

Այժմ երկու բլոկներն էլ ունեն նույն բարձրությունը և լայնությունը, սակայն երկրորդ բլոկի համար նշանակված է padding, իսկ առաջինի համար՝ ոչ: Նայեք, թե ինչպես են տարբերվում նրանց չափերը:

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

Результат:

Օրինակ . Ստանդարտ վարքագիծ

Այժմ երկու բլոկներն էլ ունեն նույն բարձրությունը և լայնությունը, սակայն երկրորդ բլոկի համար նշանակված է եզրագիծ 10px, իսկ առաջինի համար՝ ոչ: Նայեք, թե ինչպես են տարբերվում նրանց չափերը:

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

Результат:

Օրինակ . Ստանդարտ վարքագիծ

Այժմ երկրորդ բլոկն ունի և՛ padding, և՛ եզրագիծ 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;
}

Результат:

Օրինակ . Border-box արժեք

Ավելացնենք երկրորդ էլեմենտին border-box արժեքը box-sizing հատկության համար: Այժմ և՛ առաջին, և՛ երկրորդ էլեմենտների չափերը կդառնան նույնը:

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

Результат:

Տես նաև