CSS Էջատում
Սերնդեսերունդ մարդիկ գիտակցեցին, որ մաթեմատիկորեն հաշվելը հարմար չէ, ապա ստեղվծեց 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>Այո՜
</div>Այս մոտեցումը ավելի հարմար է և որոշ հեղինակներ ուզում են, որ իրենց էջերի բոլոր էլեմենտները այս նույն սկզբունքով աշխատեն։ Նրանք ավելացնում են հետևյալ CSS-ը։
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Սա ապահովում է բոլոր էլեմենտների չափերի արտապատկերումը ավելի ինտուիտիվ եղանակով։
Քանի որ box-sizing-ը նոր հնարավորություն է, դու դեռևս պիտի օգտագործես -webkit- և -moz- նախդիրները ինչպես արված է օրինակներում։ Այս տեխնիկան միացնում է կոնկրետ զննարկիչների էքսպերիմենետալ հնարավորությունները։ Նաև հիշիր որ այս մեկը IE8+-ի համար է։
