Как только мы начинаем путь внесения изменений в размеры элементов и их контейнеров, всегда наступает время, когда оба они больше не совместимы, и к нам приходит ужасный эффект переполнения или переполнения, который является не чем иным, как эффектом этот один элемент больше другого и покидает свой контейнер.
Создание элемента, который переполняется
Давайте посмотрим на классический пример элемента, который очень мал по своему содержанию и генерирует переполнение, так как все легче увидеть через примеры. Сначала давайте посмотрим на один элемент, прежде чем перейти к свойствам, которые помогают нам контролировать переполнение.
Пример p {ширина: 200 пикселей; высота: 100 пикселей; граница: средняя двойная черная; }Есть много разных видов фруктов - только более 500 сортов бананов. К тому времени, когда мы добавим бесчисленные виды яблок, апельсинов и других известных фруктов, мы столкнулись с тысячами вариантов.
Предыдущий код генерирует следующий результат в браузере:
Поскольку мы видим текст о емкости контейнера контейнера, чтобы исправить это, мы можем использовать свойство переполнения, давайте посмотрим на свойства, прежде чем приступить к исправлению этой проблемы:
overflow-x / overflow-y: определить поведение горизонтального или вертикального переполнения.
Переполнение: это ярлык для использования предыдущего свойства, и порядок его действия - переполнение, переполнение х, переполнение у.
Свойства, которые можно использовать с элементом переполнения, следующие:
auto: это значение делегирует браузеру ответственность за принятие решения о том, что делать, обычно случается так, что полоса прокрутки отображается, когда элемент начинает переполняться ее содержимым.
скрытый: контент показывается той части, которая не переполняется, скрывая остальную часть контента; у него нет механизмов, позволяющих сообщить пользователю, что делать, чтобы увидеть остальную часть контента.
no-content: переполненный контент удаляется, если его нельзя разместить внутри контейнера. Это значение не поддерживается ни одним из самых популярных браузеров.
без отображения: контент скрыт, если он не может быть полностью отображен. Это значение не поддерживается ни одним из самых популярных браузеров.
scroll: браузер генерирует полосу прокрутки, позволяющую пользователю всегда видеть переполненный контент внутри контейнера. Панель будет зависеть от браузера и системы, определяющей способ ее отображения. Полоса прокрутки всегда будет видна, даже если элемент не переполняется.
visible: это значение по умолчанию. Контент всегда отображается, даже если он переполнен.
Теперь, когда у нас есть инструменты для того, чтобы атаковать переполнение, давайте посмотрим на практике, как мы можем его применить, ничего лучше, чем немного кода, чтобы это доказать
Пример p {ширина: 200 пикселей; высота: 100 пикселей; граница: средняя двойная черная; } #first {overflow: hidden;} #second {overflow: scroll;}Есть много разных видов фруктов - только более 500 сортов бананов. К тому времени, когда мы добавим бесчисленные виды яблок, апельсинов и других известных фруктов, мы столкнулись с тысячами вариантов.
Есть много разных видов фруктов - только более 500 сортов бананов. К тому времени, когда мы добавим бесчисленные виды яблок, апельсинов и других известных фруктов, мы столкнулись с тысячами вариантов.
Мы использовали два элемента, чтобы продемонстрировать, как работает переполнение : во-первых, мы помещаем скрытое свойство, где мы знаем, что только содержимое будет отображаться до тех пор, пока не начнется переполнение, а остальное скрыто, а во-вторых, мы используем прокрутку, с помощью которой будет отображаться панель. Прокручиваем переполнения или нет элемента, посмотрим результат: $config[ads_text5] not found
- 0
СТАТЬИ