Latest web development tutorials

Размер коробки CSS3

CSS3 box-sizing свойство , чтобы установить ширину и высоту атрибутов содержит отступы (кожухами) и границы (граница).

Поддержка браузеров

Цифры в таблице представляют первый браузер для поддержки номер версии недвижимости.

Сразу после номера -webkit- браузера или -moz- указанного префикса.

свойство
коробчатого проклейки 10,0
4.0 -webkit- 		8.0 29,0
2.0 -moz- 		5.1
3.1 -webkit- 		9.5

Не используйте CSS3 коробчатого проклейки недвижимость

По умолчанию, ширина и вычислительное элемент путь высокого класса выглядит следующим образом:

ширина (ширина) + обивка (обивка) + граница (граница) = фактические элементы ширины

высота (высота) + обивка (обивка) + граница (граница) = фактическая высота элемента

Это означает, что, когда мы устанавливаем ширину / высоту элемента, высота отображения элемента и ширина будет больше (из-за границы элемента с прокладкой рассчитает ширина / высота в).

Это небольшая коробка (ширина 300px, высота 100px).

Это большая коробка (ширина 300px, высота 100px).

Эти два элемента <DIV>, хотя ширина и высота настройки те же, но размер реального шоу непоследовательной, потому что div2 указанного дополнения:

примеров

.div1 {
ширина: 300px;
высота: 100px;
границы: 1px сплошной синий;
}

.div2 {
ширина: 300px;
высота: 100px;
обивка: 50px;
границы: 1px сплошной красный;
}

Попробуйте »

Если вы хотите использовать этот метод, чтобы получить меньшую коробку и содержит в полях, вы должны учитывать границу и в пределах ширины поля.

CSS3 box-sizing свойство является хорошим решением этой проблемы.

Использование CSS3 коробчатого проклейки недвижимость

CSS3 box-sizing атрибут содержит отступы (дополнение) и границы (граница) в ширину и высоту элемента.

Если вы установите на элементе box-sizing: border-box; прокладка (прокладки) и границы (граница) также включена в ширину и высоту:

Два DIV теперь тот же размер!

Это учебное пособие!

Вот два элемента <DIV> добавляется box-sizing: border-box; свойства простого примера.

примеров

.div1 {
ширина: 300px;
высота: 100px;
границы: 1px сплошной синий;
коробчатого проклейки: граница-бокс;
}

.div2 {
ширина: 300px;
высота: 100px;
обивка: 50px;
границы: 1px сплошной красный;
коробчатого проклейки: граница-бокс;
}

Попробуйте »

Судя по результатам box-sizing: border-box; лучшие результаты, также много разработчиков нужно.

Следующий код может сделать все элементы в более интуитивным способом, чтобы отобразить размер. Многие браузеры уже поддерживают box-sizing: border-box; (но не все - именно поэтому входные и текстовые элементы , установленные ширина: 100%; ширина пост не то же самое).

Все элементы, использующие бокс-проклейки более рекомендуется:

примеров

* {
коробчатого проклейки: граница-бокс;
}

Попробуйте »