Использование элементов блоков
24 апреля 2017 | Опубликовано в css | 2 Комментариев »
Есть несколько элементов HTML, в которых почти нет смысла без использования CSS. И один из таких элементов — элемент блока. Это, возможно, наиболее неправильно понимаемый и неуместно используемый элемент в спецификации HTML5, так что давайте разберемся с часто встречающимися примерами его неправильного использования:
• Блок — это контейнер, который применяется, только если все остальные элементы не подходят.
• В коде CSS все свойства, которые можно задать элементу блока, можно задать и любым другим элементам. Элемент блока не отличается от других элементов в этом смысле. Не нужно использовать элемент блока, чтобы применять современные свойства CSS, такие как, например, расположение.
• Элемент блока почти никогда не должен содержать в себе только один элемент. Так как все, что можно использовать для стилизации блока, можно использовать и в задании стилей другим элементам, размещение одиночного элемента в элементе блока почти всегда избыточно и необязательно.
• Элемент блока — не замена и не добавление к блочным элементам или элементам разделов. Например, у ненумерованного списка уже есть родительский элемент. Размещение его в элементе блока излишне.
• Необязательно добавлять блок, чтобы создать дополнительную рамку вокруг элемента. Вместо этого можно использовать сочетание свойств контура и тени блока.
• Избегайте задавать высоту элементам блоков. Фактически, избегайте задавать высоту любым элементам, кроме элементов изображений. За исключением случаев использования высоты 100%, лучше позволить элементам блоков растянутся на нужную им высоту, зависящую от их содержимого.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
- Использование селектора only-of-type
- Использование единиц измерения vw и vh в создании современных сайтов
- Использование media queries CSS
Комментарии
Оставить ответ
Похожие статьи
-
Милый графический дизайн от Клаудии Бордин
-
Красивый текстовый 3D-эффект в Adobe Photoshop
-
Вектор в стиле ретро для вашего дизайна
-
Монохромный веб-дизайн
-
Японский стиль в изобразительном искусстве
-
Тонированные изображения с помощью множественных фоновых изображений
-
Строгие узоры и иллюстрации от Гарри Голдхока
-
Бесплатные весенние фотографии
-
Яркое на темном в веб-дизайне
-
20 крутых примеров нейл-арта
-
Бесплатный клипарт лепестков
-
Разные шрифты на одной веб-странице
-
Вкусные образы в фотографиях Луизы Валиери
-
Яркий текстовый эффект с масками в Adobe Illustrator
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 12 сайтов, на которых можно продавать свои работы
61
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58
26 апреля 2017 в 8:48
Спасибо! Полезно для начинающих и не только... Кстати речь идет про теги SPAN и DIV.
Ответить