Поглед у ЦСС3 Бок-сизинг
Не тако давно, када стварамо бок на веб страници, рецимо са а див, прецизирамо 100пк и за ширину и за висину, а затим за паддинг за 10пк и границе око 10пк такође.
див ширина: 100пк; хеигхт: 100пк; паддинг: 10пк; бордер: 10пк солид #еаеаеа;
Прегледачи ће проширити величину оквира на 140 пиксела, при чему се тај износ од 140пк укупне ширине / висине састоји од додатка паддинг анд тхе границе као што следи; 100пк [ширина / висина] + (2 к 10пк [паддинг]) + (2 к 10пк [бордер]).
Међутим, понекад овај резултат није оно што очекујемо да буде. Понекад нам треба кутија да увек буде 100пк без обзира на додавање граница или границе.
Да бисмо превазишли такав проблем који се понавља приликом креирања изгледа веб страница, можемо користити ЦСС3 димензионисање кутија да контролише како ЦСС бок модел треба да раде у претраживачима.
Користећи бок-сизинг
Тхе димензионисање кутија својство има две опције вредности, прво цонтент-бок; што је подразумевана вредност, када се користи ова вредност, оквирни модел ће се понашати као што смо горе описали.
А друга је бордер-бок, где ће се израчунати величина кутије одузимањем величине одређеног садржаја са додацима и границама.
див ширина: 100пк; хеигхт: 100пк; паддинг: 10пк; бордер: 10пк солид #еаеаеа; бок-сизинг: гранични-бок; -моз-бок-сизинг: бордер-бок; / * Фирефок 1-3 * / -вебкит-бок-сизинг: бордер-бок; / * Сафари * /
На пример, када имамо кутију као што смо горе описали (квадратић од 100 пиксела са 10 пиксела за паддинг и границе), величина садржаја ће се смањити на 60пк, и укупна величина кутије остаје 100пк, где се једначина одузимања може описати на следећи начин; 100пк [ширина / висина] - ((2 к 10пк [паддинг]) + (2 к 10пк [бордер])).
- Демо
- Довнлоад Соурце
Бровсер Суппорт
Тхе димензионисање кутија имовина је подржан у свим прегледачима; Фирефок 3.6+, Сафари 3, Опера 8.5+ и Интернет Екплорер 8 и новији.
Дакле, ако знате да већина ваших посетилаца неће користити верзије Интернет Екплорера испод 8, можете користити ову корисну препоруку (захваљујући Паул Ирисх).
* бок-сизинг: бордер-бок; -моз-бок-сизинг: бордер-бок; / * Фирефок 1-3 * / -вебкит-бок-сизинг: бордер-бок; / * Сафари * /
Исјечак изнад ће примијенити димензионисање кутија све елементе на вашој веб страници.
Пример
У овом одељку, показат ћемо вам примјер из стварног живота о томе како то можемо искористити димензионисање кутија својство. Направићемо једноставну навигацију, базирану на доле наведеној ХТМЛ ознаци, са пет линкова у менију.
Затим ћемо додати неке декоративне стилове; као што је, подесите навигацију фик видтх фор 500пк и ширина везе је 100пк свака, затим уметните ставку листе и дајте различите позадине за сваки мени везе, тако да можете да видите разлику између њих.
нав видтх: 500пк; маргин: 50пк ауто 0; хеигхт: 50пк; нав ул паддинг: 0; маргин: 0; нав ли флоат: лево; нав а дисплаи: инлине-блоцк; видтх: 100пк; висина: 100%; бацкгроунд-цолор: #ццц; цолор: # 555; тект-децоратион: ноне; фамилија фонтова: Ариал, санс-сериф; фонт-сизе: 12пт; висина линије: 300%; тект-алигн: центар; нав а дисплаи: инлине-блоцк; видтх: 100пк; висина: 100%; цолор: # 555; тект-децоратион: ноне; фамилија фонтова: Ариал, санс-сериф; нав ли: нтх-цхилд (1) а бацкгроунд-цолор: # Е9Е9Е9; граница лево: 0; нав ли: нтх-цхилд (2) а бацкгроунд-цолор: # Е4Е4Е4; нав ли: нтх-цхилд (3) а бацкгроунд-цолор: #ДФДФДФ; нав ли: нтх-цхилд (4) а бацкгроунд-цолор: # Д9Д9Д9; нав ли: нтх-цхилд (5) а бацкгроунд-цолор: # Д4Д4Д4; граница десно: 0;
У овом тренутку, наша навигација изгледа нормално.
Међутим, проблем ће доћи када додамо леву или десну границу менију за повезивање.
нав а бордер-лефт: 1пк солид # ааа; бордер-ригхт: 1пк солид # ф3ф3ф3;
Мени ће се прелити на дно, пошто ширина везе више није 100пк. Сада је 102пк, узрокује укупну ширину навигације 10пк дуже од наведеног горе (500пк).
Да бисмо превазишли ово питање, морамо да применимо димензионисање кутија власништво, као што следи:
нав а бордер-лефт: 1пк солид # ааа; бордер-ригхт: 1пк солид # ф3ф3ф3; бок-сизинг: гранични-бок; -моз-бок-сизинг: бордер-бок; -вебкит-бок-сизинг: бордер-бок;
- Демо
- Довнлоад Соурце
Додатна литература
И на крају, ако сте авантуристички тип и желите да дубље проучите ову тему, саставили смо неколико одабраних референци за вас:
- Разумевање ЦСС Бок Модел - Тецх Републиц
- Грешка у димензијама Бок-а у Фирефок-у - БугЗилла
- Бок-сизинг ФТВ - Паул Ирисх
