Настройка веб-страницы должна быть интуитивно понятной. Во многих случаях она не совсем подходит для одной страницы. Например, некоторые новостные сайты используют постраничную загрузку данных. Если вы хотите увидеть больше текста, вам нужно продолжать скользить вниз. В правой части браузера всегда есть полоса прокрутки — элемент, описанный в этой статье. На веб-страницах, когда одна страница не может вместить все данные, мы часто используем переполнение для ее установки.
Роль атрибута overflow заключается в том, чтобы указать, что происходит, когда содержимое выходит за пределы поля элемента, и определяет, как будет обрабатываться содержимое, выходящее за пределы области содержимого элемента.
1.переполнение
Чтобы лучше обрабатывать содержимое переполнения, CSS предоставляет атрибут overflow. Этот атрибут может указать, как обрабатывать содержимое области содержимого элемента переполнения. Необязательные значения атрибута показаны в следующей таблице:
Пример:
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{переполнение: au to;</style></head><body><divclass=hidden>Настройка веб-страницы должна быть интуитивно понятной. Во многих случаях она не совсем подходит для одной страницы. Например, некоторые новостные веб-сайты используют пейджинг. загрузка данных. Если вы хотите увидеть больше. Здесь много текста, и вам нужно продолжать скользить вниз. В правой части браузера всегда будет полоса прокрутки. Этот элемент описан в этой статье. страницы, когда одна страница не может вместить все данные, мы часто используем настройки Make. Роль атрибута overflow заключается в том, чтобы указать, что происходит, когда содержимое выходит за пределы поля элемента, и определяет, как будет обрабатываться содержимое, выходящее за пределы области содержимого элемента. <div> При перемещении в правой части браузера всегда будет полоса прокрутки. Этот элемент описан в этой статье. На веб-страницах, когда одна страница не может вместить все данные, мы часто используем переполнение для ее установки. Роль атрибута overflow заключается в том, чтобы указать, что происходит, когда содержимое выходит за пределы поля элемента, и определяет, как будет обрабатываться содержимое, выходящее за пределы области содержимого элемента. <div> При перемещении в правой части браузера всегда будет полоса прокрутки. Этот элемент описан в этой статье. На веб-страницах, когда одна страница не может вместить все данные, мы часто используем переполнение для ее установки. Роль атрибута overflow заключается в том, чтобы указать, что происходит, когда содержимое выходит за пределы поля элемента, и определяет, как будет обрабатываться содержимое, выходящее за пределы области содержимого элемента. </div></body></html>Результаты запуска:
2.переполнение-x, переполнение-y
CSS3 также предоставляет два атрибута: overflow-x и overflow-y. Их функции аналогичны атрибуту overflow. Необязательные значения атрибута такие же, как у атрибута overflow, где:
overflow-x: укажите, как обрабатывать содержимое переполнения, когда содержимое области содержимого элемента выходит за пределы элемента в горизонтальном направлении;
overflow-y: укажите, как обрабатывать содержимое переполнения, когда содержимое области содержимого элемента выходит за пределы элемента в вертикальном направлении.
3. Магическое использование переполнения
Первое использование: решить проблему доставки с максимальной маржой.
Проблема с переносом верхнего края поля: верхний край дочернего элемента одновременно снизит родительский элемент. Эту проблему можно решить, добавив overflow:hidden к родительскому элементу.
Второе использование: устранить влияние плавающего элемента — высота родительского элемента сворачивается.
универсальный метод удаления
переполнение: скрыто
ясно: оба
Третье использование: раскрытие и сокрытие анимации — за пределами скрытия.
Четвертое использование: однострочный текст превышает пропуск.
Пример:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>программирование dotcpp</title><styletype=text/css>#{margin:0px;padding:0px;}section{width:800px; высота: 460 пикселей; поле in:auto;}article{float:left;width:200px;height:460px;overflow:hidden;}h3{font-size:16px;font-weight:bold;margin:10px50px;}p{margin:10px50px;} .глава_1 {background-color:#A3A3A3;}.chapter_2{background-color:#81559d;}.chapter_3{background-color:#54709d;}.chapter_4{background-color:#4f9d89;}section:hover >article{overflow:hidden;width:50px;}section>article:hover{width:650px;</style></head><body><section><articleclass=chapter_1><h3>Том 1</ h3 ><p>Добро пожаловать в мир языка C! Язык C — мощный и специализированный язык программирования, популярный среди любительских и профессиональных программистов. Давайте поймем и распознаем это, прежде чем учиться! Прототипом языка C является язык A (язык ALGOL60). </p></article><articleclass=chapter_2><h3>Том 2</h3><p>Добро пожаловать в мир языка C! Язык C — мощный и специализированный язык программирования, популярный среди любительских и профессиональных программистов. Давайте поймем и распознаем это, прежде чем учиться! Прототипом языка C является язык A (язык ALGOL60). </p></article><articleclass=chapter_3><h3>Том 3</h3><p>Добро пожаловать в мир языка C! Язык C — мощный и специализированный язык программирования, популярный среди любительских и профессиональных программистов. Давайте поймем и распознаем это, прежде чем учиться! Прототипом языка C является язык A (язык ALGOL60). </p></article><articleclass=chapter_4><h3>Том 4</h3><p>Добро пожаловать в мир языка C! Язык C — мощный и специализированный язык программирования, популярный среди любительских и профессиональных программистов. Давайте поймем и распознаем это, прежде чем учиться! Прототипом языка C является язык A (язык ALGOL60). </p></article></section></body></html>Результаты запуска:
