Какво не знаете за изчисляването на процентните маржове в CSS

Повечето уеб дизайнери смятат, че познават CSS доста добре. В края на краищата, не е толкова много - няколко вида селектори, няколко дузини свойства и някои каскадни правила, които едва ли трябва да запомните, тъй като се свеждат до здравия разум. Но когато стигнете до ниското ниво, има много неясни детайли, които малко дизайнери наистина разбират.

Когато разгледах резултатите от безплатния CSS тест, който предлагах онлайн през последните шест месеца, открих почти един въпрос никой имам право. От хилядите хора, които взеха теста, по-малко от 14% са го направили правилно.

Въпросът се свежда до следното: Как се изчисляват процентните надценки?

Въпроса

Кажете, че вашият сайт има контейнер Разделение, и вътре в него - съдържание Разделение:

Сега нека да дадем това съдържание Разделение горна граница:

.съдържание margin-top: 10%;

Добре, така че е 10%… но 10% от Какво? Това е въпросът само 13,8% от хората могат да отговорят правилно. И имайте предвид: тези хора имат достъп до Google!

Това, което обичам по този въпрос е това изглежда, че отговорът трябва да е очевиден. Толкова много, така че подозирам, че повечето хора просто отгатват (и предполагат погрешно). Но може би не изглежда очевидно за вас. Искам да кажа, ако наистина използвате въображението си, има много начини браузърът да може да изчисли такъв марж.

Така че какво ще кажете, ако го огранича за вас, тъй като въпросът в теста е всъщност множествен избор. Ето ви опциите:

10% от височината на съдържанието div
10% от височината на контейнера div
10% от ширината на съдържанието div
10% от ширината на контейнера div

Не забравяйте, че само 13,8% от хората могат да изберат правилния отговор от този списък. Това е по-лошо от случайността!

Погледнете внимателно отговорите; ще видите, че наистина има само две неща, които трябва да знаете:

Контейнер или съдържание?

Първо, е размерът на маржа, основан на размера на съдържанието div, или на размера на контейнера div?

Сега това не е нещо, но може да се доверите на инстинктите си. Ако настроя div да бъде 50% от ширината на неговия контейнер, а след това искам лявото и дясното поле да запълни останалата част от пространството, естествено бих ги поставил на 25% всеки (така че процентите да се прибавят до 100%). За да работят, процентните маржове трябва да се основават на размерите на контейнера.

Разбира се, две трети от хората, които вземат теста, получават тази част от отговора правилно.

Ширина или височина?

втори, е размер на марджин отгоре в зависимост от ширината или височината на този елемент?

Ако сте обръщали внимание, вероятно вече сте нащрек. За толкова малко хора, които да изберат правилния отговор, това трябва да е трик въпрос, нали?

И все пак, обзалагам се, че едва ли можете да вярвате в това Отговорът не е височина. Е, не е така.

Да, тук говорим за горна граница. Да, размерът на това поле е вертикално измерване. Да, ако блокът е 50% от височината на неговия контейнер и сте му дали най-висок марж от 25%, бихте очаквали, че това ще бъде 25% от височината на контейнера. И ще грешите.

Не се чувствайте зле, ако смятате, че трябва да е височина. Почти 80% от хората, които се подлагат на теста, са съгласни с вас:

Това прави смисъла… Не, наистина!

Все още не вярвате в това? Ето цитат от спецификацията на W3C CSS:

Процентът се изчислява по отношение на ширината на генерирания блок, съдържащ кутията. Обърнете внимание, че това важи и за margin-top и margin-bottom.

Същото важи и за горната и долната подложка, в случай че се чудите. Що се отнася до границите, незаконно е да се посочва тяхната ширина като процент.

Така че в този момент вероятно си мислите, че и създателите на CSS са щур, или просто са направили наистина тъпа грешка. Но аз съм тук, за да ви кажа, че има две основателни причини да се основават вертикалните полета на ширината на съдържащия се блок:

Хоризонтална и вертикална съгласуваност

Съществува, разбира се, съкратено свойство, което ви позволява да укажете маржа за всичките четири страни на блок:

марж: 10%;

Това се разширява до:

margin-top: 10%; марж-право: 10%; margin-bottom: 10%; марж-ляво: 10%;

Сега, ако сте написали някое от изброените по-горе, най-вероятно ще очаквате маржовете от четирите страни на блока да са с еднакъв размер, нали? Но ако марж-ляво и марж-дясно се основаваха на ширината на контейнера, а марж-отгоре и марж-дъното се основаваха на неговата височина, тогава те обикновено са различни!

Избягване на циркулярна зависимост

CSS излага съдържанието в блокове, подредени вертикално надолу по страницата, така че ширината на блока обикновено се диктува изцяло от ширината на неговия родител. С други думи, можете изчислете ширината на блок, без да се притеснявате за това, което е вътре този блок.

Височината на блок е различен въпрос. Обикновено височината зависи от комбинираната височина на съдържанието му. Променете височината на съдържанието и променете височината на блока. Вижте проблема?

За да получите височината на съдържанието, трябва да знаете горната и долната граници, които се прилагат към нея. И ако тези полета зависят от височината на основния блок, имате проблеми, защото не можете да изчислите един, без да знаете другия!

Базирайки се на вертикалните полета на широчина на контейнера нарушава тази кръгова зависимост, и дава възможност да се изложи страницата.

Ace клас

Така че имаш най-трудния въпрос на теста и сега можеш да му отговориш. Искате ли да знаете как ще се справите с останалата част от теста? Опитайте сами. Обещавам, че повечето от въпросите са много по-лесни от този.

В същото време, аз съм в търсене на нов най-тежък въпрос! Какви детайли на CSS смятате, че никой не знае?

Бележка на редактора: Това е написано за Hongkiat.com от Кевин Янк. Кевин е писал за мрежата от 1999 г. насам, с книги за PHP, CSS и JavaScript. Той също е домакин на подкасти, изказвани по време на конференции, и произвежда видео обучение, всичко за Мрежата. Сега той ръководи екипа за разработка в Sit the Test, уеб приложение за правене и вземане на онлайн тестове.

Повече за Hongkiat:

Уеб дизайн: Равна височина на колоните с CSS
6 CSS трикове за вертикално подреждане на съдържанието
Погледни в CSS единици: пиксели, ЕМ и процент
Погледни в: CSS3 Box-sizing

Сега прочетете: 10 Скрити CSS3 свойства, които трябва да знаете