Шта не знате о израчунавању процентуалних маржи у ЦСС-у
Већина веб дизајнера мисли да добро познају ЦСС. На крају крајева, ту нема много тога - неколико типова селектора, неколико десетина својстава и нека каскадна правила која једва морате запамтити јер се своди на здрав разум. Али када се спустите на ниво гњидама, постоји много нејасних детаља које мало дизајнера заиста разуме.
Када сам проучио резултате бесплатног ЦСС теста који сам понудио на мрежи протеклих шест месеци, открио сам скоро једно питање нико је добио право. Од хиљада људи који су полагали тест, мање од 14% је то исправило.
Питање се своди на ово: Како израчунати постотне маргине?
Питање
Рецимо да ваш сајт има контејнер див, и унутар тога, садржај див:
Сада, дајмо тај садржај див горња маргина:
.цонтент маргин-топ: 10%;
Ок, то је 10% ... али 10% Шта? То је питање само 13,8% људи може одговорити исправно. И имајте на уму: ови људи имају приступ Гоогле-у!
Оно што волим код овог питања је то чини се да би одговор требао бити очигледан. Толико тога, да сумњам да већина људи само погађа (и погађа погрешно). Али можда не Чини вам се очигледним. Мислим, ако заиста користите своју машту, постоји много начина на које би претраживач могао израчунати маргину као што је ова.
Дакле, како би било да сузим за вас јер је питање у тесту заправо вишеструки избор. Ево опција:
- 10% висине садржаја див
- 10% висине контејнера
- 10% од ширине садржаја див
- 10% ширине контејнера див
Запамтите, само 13,8% људи може изабрати прави одговор са ове листе. То је много горе од случајности!
Погледајте пажљиво одговоре; видећете да постоје само две ствари које морате да знате:
Контејнер или садржај?
Прво, јесте величина маргине заснована на величини самог садржаја див или на величини контејнера див?
Сада ово није гимме, али вероватно можете веровати својим инстинктима. Ако поставим див да буде 50% од ширине његовог контејнера, а онда желим да његова лева и десна маргина попуне остатак простора, природно бих их подесио на 25% сваки (тако да проценти додају до 100%). Да би се то радило, процентуалне маргине морају бити засноване на димензијама посуде.
Наравно, две трећине људи који су положили тест, добијају овај део одговора.
Ширина или висина?
Друго, је величина маргине-врха на основу ширине или висине тог елемента?
Ако сте обраћали пажњу, вероватно сте већ на опрезу. Да би тако мали број људи изабрао прави одговор, ово мора бити трик питање, зар не?
А ипак, кладим се да то једва можете вјеровати одговор није хеигхт. Па, није.
Да, овде говоримо о горњој маргини. Да, величина те маргине је вертикално мерење. Да, ако је блок 50% висине његовог контејнера, а ви сте му дали горњу маргину од 25%, очекујете да ће то бити 25% висине контејнера.. А ти би био у криву.
Не осећајте се лоше ако сте мислили да је то висина. Скоро 80% људи који се тестирају слажу се са вама:
Чини смисао ... Не, стварно!
Још увек не верујете? Ево цитата из В3Ц ЦСС спецификације:
Проценат се израчунава у односу на ширину блока који садржи блок. Имајте на уму да је ово тачно и за маргине-топ и маргин-боттом.
Исто важи и за горњу и доњу подлогу, у случају да се питате. Што се граница тиче, незаконито је одредити њихову ширину као проценат.
Дакле, у овом тренутку, ви вероватно мислите да су и креатори ЦСС-а бонкерс, или су направили стварно глупу грешку. Али ја сам ту да вам кажем, постоје два добра разлога да се вертикалне маргине базирају на ширини блока који садржи:
Хоризонтална и вертикална конзистентност
Наравно, постоји скраћено својство које вам омогућава да наведете маргину за све четири стране блока:
маргин: 10%;
Ово се проширује на:
маргина: 10%; маргин-ригхт: 10%; маргин-боттом: 10%; маргин-лефт: 10%;
Сада, ако сте написали било шта од горе наведеног, вероватно бисте очекивали маргине на све четири стране блока да буду једнаке величине, зар не? Али ако су маргина лево и маргинално десно засновани на ширини контејнера, а маргина-врх и маргина-дно су засновани на његовој висини, онда би они обично били различити.!
Избегавање кружне зависности
ЦСС поставља садржај у блоковима постављеним вертикално низ страницу, тако да ширина блока обично диктира искључиво ширина његовог родитеља. Другим речима, можете израчунајте ширину блока без бриге о томе шта је у тај блок.
Висина блока је друга ствар. Обично, висина зависи од комбиноване висине њеног садржаја. Промените висину садржаја и промените висину блока. Погледајте проблем?
Да бисте добили висину садржаја, морате знати горњу и доњу маргину која се примењује на њу. Ако те маргине зависе од висине родитељског блока, у невољи сте, јер не можете израчунати једну без познавања другог!
Полагање вертикалних маргина на видтх контејнера разбија ту кружну зависност и омогућава постављање странице.
Аце класе
Дакле, ту имате: најтеже питање на тесту, и сада можете одговорити на њега. Желите ли да знате како ћете радити на остатку теста? Пробајте сами. Обећавам, већина питања је много лакша од ове.
У међувремену, тражим ново најтеже питање! Какав детаљ ЦСС мислите да нико не зна?
Напомена уредника: Ово је написано за Хонгкиат.цом Кевин Ианк. Кевин је писао о вебу од 1999. године, с књигама о ПХП-у, ЦСС-у и ЈаваСцрипт-у за његово име. Он је такође био домаћин подцаста, који су говорили на конференцијама, и производили видео тренинг, све о Вебу. Сада води развојни тим у Сит тхе Тесту, веб апликацију за израду и преузимање онлине тестова.
Више о Хонгкиату:
- Веб дизајн: Висина једнаких колона са ЦСС-ом
- 6 ЦСС трикови за вертикално поравнавање садржаја
- Поглед у ЦСС јединице: пиксели, ЕМ и проценат
- Поглед у: ЦСС3 Бок-сизинг
Сада прочитајте: 10 скривених ЦСС3 особина које требате знати
