Элемент див

Элемент див <div></div> — контейнер данных.

Элемент див — по сути является отдельным контейнером, который также необходимо и рассматривать. Мягко говоря — это локальная ограниченная территория, содержащая или не содержащая другие элементы языка HTML. В настоящее время подавляющее большинство движков, сайтов и блогов размечается при помощи элемента, хотя в сети ещё можно встретить ресурсы, которые размечены исключительно таблицами.

Что нужно знать о диве, чтобы нормально понимать разметку движка или самого сайта? В принципе немного. Во-первых нужно хорошо себе представлять как устроен сайт на дивах, то есть, из дивов состоят практически все отдельные элементы страницы: шапка, низ, контент и боковые колонки. Для нормальной работы с движками нужно уметь находить эти элементы, чтобы можно было их корректировать, вносить изменения.

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

Самое главное правило, о котором обычно забывают, — нельзя вставлять блочные элементы в строчные. Например, если Вы хотите вставить элемент div в элемент span (спан как раз и является строчным элементом), то сначала лучше посмотреть как на это отреагирует браузер. Скорее всего каждый браузер будет отображать элементы по-своему, но лучше такие приёмы не использовать, потому что ошибки заставляют браузеры подтягивать дополнительные модули, где эти ошибки указаны, а это увеличивает загрузку страницы.

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

Свойства элемента див глобальны только по отношению к вложенным элементам и не имеют никакого отношения к свойствам других, невложенных элементов не имеют. При помощи свойств можно, например, назначить шрифт и всё написанное в этом диве будет имеено этим шрифтом, а в других дивах другим. Можно обозначить рамку, цвет фона или даже назначить картинку фоновым изображением, а можно её просто обрезать всё теми же свойствами, но главное, повторяю, производить изменения именно в том диве, который Вы хотите редактировать, а для этого его нужно научиться находить.

Как обрезать картинку дивом.

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

Чтобы обрезать картинку дивом, достаточно задать его размер и использовать свойство overflow со значением hidden. Таким образом если в свойствах дива написать <div style=»overflow: hidden; width: 190px;» ><img src=»адрес рисунка»/></div>, то Ваша картинка, вне зависимости от размера, будет шириной 190 пикселей, если добавить ещё и высоту, то и соответствующей высотой.




Яндекс.Метрика Рейтинг@Mail.ru