Погледни в CSS3 Box-оразмеряване
Не толкова отдавна, когато създаваме кутия в уеб страница, да кажем с a Разделение, ние уточняваме 100px както за ширината, така и за височината, последвана от подложка за 10px и граници на около 10px също.
div ширина: 100px; височина: 100 пиксела; пълнеж: 10px; граница: 10px твърди #eaeaea;
Браузърите ще разширят размера на полето до 140 пиксела, където тази сума от 140 пиксела от общата ширина / височина се състои от добавянето на подложка и граници както следва; 100 пиксела [ширина / височина] + (2 x 10px [подложка]) + (2 x 10px [граница]).
Понякога обаче този резултат не е това, което очакваме. Понякога трябва винаги да бъдем 100px независимо от добавената подложка или границите.
За да преодолеем такъв повтарящ се проблем при създаването на оформление на уеб страници, можем да използваме CSS3 кутия оразмеряване собственост, за да контролира как CSS кутия модел трябва да работи в браузърите.
Използване на оразмеряване в кутия
Най- кутия оразмеряване имотът има две опции за стойност, първо съдържание кутия; което е стойността по подразбиране, когато се използва тази стойност, моделът на кутията ще се държи така, както вече беше описано.
А втората е гранично-кутия, където се изчислява размерът на кутията чрез изваждане на размера на посоченото съдържание с добавена подложка и граници.
div ширина: 100px; височина: 100 пиксела; пълнеж: 10px; граница: 10px твърди #eaeaea; оразмеряване на кашони: гранична кутия; -moz-box-sizing: гранична кутия; / * Firefox 1-3 * / -babkit-box-sizing: гранична кутия; / * Safari * /
Например, когато имаме поле, подобно на описаното по-горе (квадрат 100 пиксела с 10 пиксела за подложка и граници), размерът на съдържанието ще намалее до 60px, и общият размер на кутията остава 100px, където уравнението на изваждането може да бъде описано както следва; 100px [ширина / височина] - ((2 x 10px [подложка]) + (2 x 10px [граница])).
- Демонстрация
- Изтеглете Източник
Поддръжка на браузър
Най- кутия оразмеряване собственост се поддържа във всички браузъри; Firefox 3.6+, Safari 3, Opera 8.5+ и Internet Explorer 8 и по-нови.
Така че, ако знаете, че повечето от посетителите ви няма да използват версии на Internet Explorer под 8, можете да използвате тази полезна препоръка (благодарение на Paul Irish).
* box-sizing: гранична кутия; -moz-box-sizing: гранична кутия; / * Firefox 1-3 * / -babkit-box-sizing: гранична кутия; / * Safari * /
По-горният фрагмент ще приложи кутия оразмеряване на всички елементи на вашата уеб страница.
пример
В този раздел ще ви покажем един реален пример за това как можем да използваме това кутия оразмеряване Имот. Ще създадем проста навигация, базирана на HTML маркировката по-долу, с пет връзки в нея.
След това ще добавим някои декоративни стилове; като, задайте навигацията определя ширина за 500px и ширината на връзката е 100px всяка, след това вмъкнете елемента от списъка и дайте различен фон за всяко меню за връзки, така че да можете да видите разликата между тях.
nav ширина: 500px; марж: 50px auto 0; височина: 50px; nav ul padding: 0; марж: 0; nav li float: left; nav a display: inline-block; ширина: 100px; височина: 100%; фон-цвят: #ccc; цвят: # 555; текст-декорация: няма; фамилия: Arial, sans-serif; размер на шрифта: 12pt; височина на линията: 300%; text-align: center; nav a display: inline-block; ширина: 100px; височина: 100%; цвят: # 555; текст-декорация: няма; фамилия: Arial, sans-serif; nav ли: nth-child (1) a фон-цвят: # E9E9E9; Граница наляво: 0; nav ли: nth-child (2) a фон-цвят: # E4E4E4; nav li: nth-child (3) a фон-цвят: #DFDFDF; nav ли: nth-child (4) a фон-цвят: # D9D9D9; nav ли: nth-child (5) a фон-цвят: # D4D4D4; Граница вдясно: 0;
На този етап навигацията ни изглежда нормално.
Проблемът обаче ще възникне, когато добавим лява или дясна граница към менюто за връзки.
nav a граница-ляво: 1px твърдо #aaa; Граница вдясно: 1px твърдо # f3f3f3;
Менюто ще прескочи до дъното, тъй като ширината на връзката вече не е 100px. Сега е 102px, причиняват общата ширина на навигацията 10px по-дълго, отколкото посочихме по-горе (500px).
За да преодолеем този проблем, трябва да приложим кутия оразмеряване собственост, както следва:
nav a граница-ляво: 1px твърдо #aaa; Граница вдясно: 1px твърдо # f3f3f3; оразмеряване на кашони: гранична кутия; -moz-box-sizing: гранична кутия; -вибъкит кутия: гранична кутия;
- Демонстрация
- Изтеглете Източник
Допълнителна информация
И накрая, ако сте приключенски тип и искате да разгледате по-задълбочено тази тема, сме събрали няколко избрани референции за вас:
- Разбиране на CSS Box Model - Tech Republic
- Поправка на размера на кутия в Firefox - BugZilla
- Оразмеряване на кутия FTW - Пол ирландски
