Боксовая модель CSS |
![]() |
![]() |
![]() |
У любого блочного элемента в CSS есть свои геометрические параметры – ширина и высота, то есть x и y, на оси координат, также в некоторых случаях встречается z-координата, о z координате поговорим в конце статьи В CSS блочный элемент обозначается “display:block”, так вот каждый блочный элмент имеет ширину и высоту, однако существует три CSS свойства способных изменять, косвенно, изменять эти параметры.
Border – рамка вокруг элемента, «по умолчанию» border равен 0 px и является не видимым Padding – отступ между border и содержимым элемента. Margin - отступ после border`a Когда я начал заниматься созданием сайтов, я узнавал всё методом проб и ошибок и поэтому довольно долго использовал два свойства (padding и magrin) бездумно. Когда я набрался опыта – стал использовать их интуитивно и лишь не давно, увидев боксовую модель блочного элемента (иллюстрация ниже), всё стало на свои места. Правильное использование CSS свойств облегчит Вам верстку, кроме того велика вероятность что Ваши сайты будут выглядеть во всех браузерах одинаково, то есть не нужно будет подгонять верстку под каждый браузер, использовать костыли и хаки. Z-координаты или z-index Иногда блоки расположенные на Вашем сайте наезжают друг на друга, и довольно часто это делается умышленно, скажем чтобы показать всплывающее окно поверх всех остальных элментов. Чтобы правильно расположить блоки на оси Z (смотрите иллюстрацию системы координат ниже) было придумано свойство z-index, с числовым значением. Пользоваться им очень просто. Элемент должен иметь позиционирование, значение которого position задано как absolute, fixed или relative. После чего элементы можно расставлять в данной последовательности, чем Выше число z, тем ближе к нам будет элемент. То есть элемент с z-index 100, перекроет элемент с z-index 75.
|
Новые статьи
- Как взять кредит онлайн в Украине
- Налог на интернет exploer
- Ошибка kernel power 41 63
- ФАС РФ оштрафовал гугл на 500 млн рублей
- В России заблокирован Qiwi
- SEO всё ещё работает
- Закон о агрегаторах принят. Прощайте Яндекс.Новости
- Генпрокуротура РФ хочет контролировать WhatsApp и Telegram
- В России Google обогнал Яндекс
- На Rutracker музыки больше нет
- В App Store появилось приложение для навигации в помещениях
- Реклама в интернете. Агентство Имидж Медиа Групп
- Самые дорогие блоггеры на Youtube
- Бинарные опционы, для колхозника
- 9 доказанных способов собрать резервный фонд
Популярные статьи
- Эксперимент закончен
- Реклама на форумах
- Что такое постовой
- Легальное применение прокси-сервера
- Сколько зарабатывают блоггеры
- Как узнать сайт-мошенник
- Сколько стоят топовые блоггеры
- Что такое фишинговые сайты
- Кто такие для всех нас известные актёры Голливуда?
- Обязанности кадрового работника
- Незакрывающаяся вкладка Chrome
- Как сделать 301 редирект для joomla
- Самые популярные сайты 2011
- wordpress описание CMS
- Мобильный телефон для Facebook