box-sizing

Սերնդեսերունդ մարդիկ գիտակցեցին, որ մաթեմատիկորեն հաշվելը հարմար չէ, ապա ստեղվծեց box-sizing նոր CSS հատկությունը։ Հիմա եթե դու որևէ էլեմենտի համար հայտարարես box-sizing: border-box; ապա ներքին սահմանը և սահմանագիծը այլևս չեն ազդի էլեմենտի լայնության վրա։ Ահա նախորդ բաժնի նույն էլեմենտները, սակայն արդեն box-sizing: border-box; կոդի կիրառությամբ։

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
<div class="simple">

Հիմա արդեն նույն չափի ենք

</div>
<div class="fancy">

Այո՜

</div>

Այս մոտեցումը ավելի հարմար է և որոշ հեղինակներ ուզում են, որ իրենց էջերի բոլոր էլեմենտները այս նույն սկզբունքով աշխատեն։ Նրանք ավելացնում են հետևյալ CSS-ը։

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Սա ապահովում է բոլոր էլեմենտների չափերի արտապատկերումը ավելի ինտուիտիվ եղանակով։

Քանի որ box-sizing-ը նոր հնարավորություն է, դու դեռևս պիտի օգտագործես -webkit- և -moz- նախդիրները ինչպես արված է օրինակներում։ Այս տեխնիկան միացնում է կոնկրետ զննարկիչների էքսպերիմենետալ հնարավորությունները։ Նաև հիշիր որ այս մեկը IE8+-ի համար է։

  • Creative Commons License