box-sizing: border-box мүлк эмне жана ал CSSте кандай роль ойнойт?

box-sizing өзгөчөлүгү элементтин жалпы кеңдиги жана бийиктиги кандай эсептелеттигин аныктайт.

box-sizing: content-box (өзгөчөлүк боюнча стандарттык мааниси) — кеңдик жана бийиктик тек гана мазмунга (content) тиешелүү. Padding жана border көрсөтүлгөн кеңдик/бийиктик маанилерине кошулат.

box-sizing: border-box — кеңдик жана бийиктик padding жана border камтыйт. Мазмун (content) көрсөтүлгөн өлчөмдөргө ылайык кыскарат.

CSSте box-sizing: border-boxтин ролу:

• ** эсептөөлөрдү жөнөкөйлөтүү:** Элементтердин өлчөмдөрүн эсептөөнү жеңилдетет, өзгөчө padding жана border колдонулганда.
• Тартиптин алдын ала болуусу: Блоктордун өлчөмдөрүн так аныктоого мүмкүндүк берет, padding жана border көз карандылыгынан көз карандысыз, бул тартипти көбүрөөк алдын ала болуусун камсыздайт.
• Куту моделинде ыңгайлуулук: Блоктун өлчөмүн интуитивдүү түшүнүүгө ылайыктуу — анын чегерүүлөрү. Тармактар жана так өлчөмдүү компоненттер түзүүдө жеңилдик берет.

Мисал:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Жалпы кеңдик = 100 + 10*2 + 1*2 = 122px */
  /* Жалпы бийиктик = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Жалпы кеңдик = 100px */
  /* Жалпы бийиктик = 100px */
  /* Мазмун 100 - 10*2 - 1*2 = 78px кеңдикте жана бийиктикте болот */
}