CSS кодының үзіндісі берілген:
.a { width: 200px; padding: 10px; border: 2px solid black; margin: 5px; }
.b { width: 200px; padding: 10px; border: 2px solid black; margin: 5px; box-sizing: border-box; }
a класты блоктың көлденең бойынша толық ені (сол және оң жақтағы сыртқы шегіністерді қоса алғанда) b класты блоктікінен неше пикселге артық?
Жауап пен талдауды көрсетуЖауап пен талдауды жасыру
Дұрыс жауап
- C24 px
Талдау
a блогында box-sizing қасиетінің әдепкі мәні (content-box) әрекет етеді, сондықтан width тек мазмұнның енін береді. Толық ені: 200 + 2·10 (padding) + 2·2 (border) + 2·5 (margin) = 234 px. b блогында box-sizing: border-box берілген, сондықтан 200 px ені padding пен border-ді қамтиды. Толық ені: 200 + 2·5 (margin) = 210 px. Айырмасы: 234 − 210 = 24 px. «34 px» жауабы сыртқы шегіністерді қосымша қосқанда шығады, ал «20 px» және «12 px» тек ішкі шегіністі немесе тек бір жағын ғана есептегенде шығады.