Октябрь 25, 2019 Запись была обновлена
Подводные камни CSS и как с ними бороться
Когда вы пишете CSS код, есть несколько неприятных ситуаций с которыми вы можете столкнуться. И иногда приходится прибегать в CSS трюкам, чтобы всё отображалось так как надо. В этой статье я постараюсь показать вам некоторые советы и приемы, которые помогут вам при написании CSS кода.
Стили кнопок
Начнем с оформления кнопок. При попытке придать стиль кнопке, например «Отправить», если хотите чтобы она отображалась одинаково во всех браузерах, не забывайте о следующих свойствах:
1 2 3 4 5 6 7 8 9 10 | /* удалить внешние отступы в IE */ .button{ overflow: visible; } /* удалить внутренние отступы в Firefox */ .button::-moz-focus-inner{ border: 0; padding: 0; } |
Использование псевдо-элементов
Вы наверняка знаете о таких псевдо-элементах как :before и :after, которые позволяют добавлять контент до или после блоков, которым задан данный элемент. Кроме того, элементы, такие как <input> или <img> не содержат в себе другие элементы, таким образом псевдо-элементы к ним не применяются. Исключением является элементом <hr>.
Градиент на всю высоту страницы
Если в CSS3 добавить градиент на фон, то он будет находится только слева сверху. Для того чтобы растянуть на всю страницу, необходимо прописать следующие строки:
1 2 3 4 5 6 7 8 9 | html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; } |
Высота 100%
При установке значения height:100% всегда помните о высоте родителя этого элемента. Если у элемента родителя не определена высота, то у этого элемента определена высота в 100% от ничего! Это грубая ошибка. Вот пример этой ошибки:
1 2 3 | <div id="parent"> <div id="child">текст</div> </div> |
и
1 2 3 4 5 6 7 8 9 10 | #parent{ height: 400px; padding:10px; background:red; } #child{ height: 100%; background:green; } |
Внимательно следите за этим!
Размеры input
Например при создании формы поиска, когда мы указываем размеры <input type="text"> и <input type="submit">, то на самом деле размеры на странице не будут одинаково отображаться. Для этого в CSS3 есть свойство, которое отвечает за размеры input-ов:
1 | box-sizing: content-box | padding-box | border-box; |
Это несколько частоиспользуемых советов и методов. Эти советы будут очень полезны начинающим.
Если есть какие-то вопросы, задавайте их в комментариях ниже.
Успехов!
Источник: css.dzone.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Как увеличить radio кнопки? ➡
Николай, посмотрите эту новость — перейти.