Как реализовать overflow: hidden без использования overflow: hidden?

Очень интересная тема.как не использоватьoverflow: hiddenвыполнитьoverflow: hidden?

в CSSoverflowОпределяет, что делать, если содержимое элемента слишком велико и не помещается в контекст форматирования блока. а такжеoverflow: hiddenСодержимое, выходящее за рамки контейнера, будет обрезано.

контрольoverflow: hiddenнаправление

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

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

Фактический родительский элемент установленoverflow: hiddenЭлементы.

Конечно, если реальная ситуация так проста, то проблем нет.

Но если элемент находится в сложном потоке компоновки, места может быть не так много, поэтому давайте обернем еще один слой родительского контейнера:

Как и на картинке выше, это все еще средний желтый элемент, и требуется только вертикальное направление, чтобы превысить кадрирование. На данный момент обернуть родительский элемент уже не так просто. Значит, нам нужно найти другой путь.

использоватьclip-pathобрезать

Хорошо, это может войти в текст. CSS, кромеoverflow: hidden, или есть другие свойства, которые также могут обеспечить отсечение за пределами области контейнера.clip-pathЭто один из лучших.

использоватьclip-path, мы можем легко управлять кадрированием в любом направлении. Вышеуказанные требования могут быть решены следующим образом:

<div class="g-container">
    <div class="sub"></div>
</div>

Ключевой код CSS выглядит следующим образом:

.g-container {
    width: 200px;
    height: 200px;
    clip-path: polygon(-1000% 0, 1000% 0, 1000% 100%, -1000% 100%);
}

используется здесьclip-path: polygon()обрезать прямоугольную область, используяclip-pathФункция поддержки отрицательных координат и установка начальной точки кадрирования вдали от координат может нарисовать большую прямоугольную форму. Схема:

Таким образом, мы можем рисовать все, что захотим, в пределах текущего размера контейнера в обычном потоке компоновки.overflow: hiddenспектр.

Вы можете нажать на демо и попробовать:

CodePen -- Clip-path overflow

Еще два примера:

{
    // 裁剪出左右两边都 overflow:hidden，上下不 overflow:hidden 的区域
    clip-path: polygon(0 -1000% ,100% -1000%, 100% 1100%,0 1100%);

   // 裁剪出左边、上边、右边都 overflow:hidden，下边不 overflow: hidden 的区域
    clip-path: polygon(100% 0，100% 1000%, 0 1000%, 0 0);
}

Конечно, в приведенном выше коде1000%Он очень гибкий, вы можете управлять им самостоятельно, этого достаточно.

Метод отсечения без переполнения, отсечение пути

Так. Из приведенного выше небольшого примера мы знаемoverflow,clip-pathОбласти можно обрезать. Итак, в дополнение к этим двум, есть ли какие-либо элементы в CSS, которые могут выполнять отсечение области?

Да, есть еще один интересный элемент, а именно...contain.

containАтрибуты позволяют нам указать конкретный элемент DOM и его дочерние элементы, что позволяет им быть независимыми от всей древовидной структуры DOM. Цель состоит в том, чтобы дать браузеру возможность перерисовывать и перекомпоновывать только некоторые элементы без необходимости каждый раз ориентироваться на всю страницу.

Я не буду здесь подробно описывать каждое из его свойств, если вам интересно, вы можете прочитать эту статью --Новая функция CSS содержит, управляет перерисовкой и перекомпоновкой страницы.

contain: paintОбрезка контента

говорить подробноcontain: paint, задаватьcontain: paintЭлемент включенограничения компоновки, то есть потомки этого элемента не будут отображаться за пределами этого элемента.

contain: paintНазначение атрибута — ускорить отрисовку страницы, а элементы не отрисовываются в второстепенных областях. Следовательно, если элемент не отображается на экране или иным образом не установлен как невидимый, его потомки невидимы и не отображаются.

Взгляните на пример:

.g-container {
    contain: paint;
}

CodePen Demo -- contain: paint Demo

contain: paintпобочные эффекты

contain: paintПервоначальное намерение состояло в том, чтобы улучшить отрисовку страницы, а элементы, вырезанные за пределы контейнера, не отрисовываются. Но его использование имеет некоторые побочные эффекты:

1. Он создаст новый собственный контекст стекирования (он станет контекстом стекирования), то есть изменит ссылку на абсолютное позиционирование и фиксированное позиционирование своих дочерних элементов;
2. Он становится новым контекстом форматирования, то есть означает, что макет вне элемента больше не будет влиять на его дочерние элементы;

Для получения более подробной информации ознакомьтесь с этой статьей -CSS Containment in Chrome 52

Поясним первый пункт, очень интересно,он генерирует новый собственный контекст стека, то есть изменитсяposition: fixedЭталонный элемент, который делает наборposition: fixedЭлемент больше не позиционируется относительно окна просмотра, а позиционируется относительно элемента. то есть выродиться вposition: absolute.

Конечно, это не тема данной статьи, я привожуDemo -- contain: paint create a stacking context, не будет продолжаться здесь.

В заключение

На данный момент в этой статье представлены 3 способа добиться отсечения за пределами контейнера:

• overflow: hidden
• clip-pathнарисовать область обрезки
• contain: paintНе выводить содержимое за границы элемента

Вот демонстрации следующих трех примеров:CodePen Demo -- Overflow Hidden In CSS

Конечно, между ними есть некоторые различия:

1. overflow: hiddenа такжеcontain: paintсоздаст BFC, аclip-pathНет, это просто урожай
2. Различия между совместимостью

Другими словами, CSS — это больше, чем простоoverflow: hiddenвыполнитьoverflow: hidden, во многих случаях можно использовать гибко.

Небольшой тест

Еще одна интересная часть, вМагия одной строки кода CSS, упомянулCSS Battle.

Этот веб-сайт представляет собой основной игровой процесс: официальный представитель предоставляет графику на заданном холсте 400 x 300,Чем короче код способен его реализовать, тем выше оценка.

В прошлый раз я говорил о теме с помощью строки кода CSS, сегодня давайте посмотримвопрос 2:

Как это реализовать кратчайшим кодом? Подумайте о том, что я сказал сегодняclip-path.

Во-первых, мы используем этот фрагмент кода для создания такого графика:

<style>
body {
    margin: 0 50px;
    background: #62374e;
    border: 50px dashed #fdc57b;
}

Затем используйтеclip-path, и отрезаем верхнюю и нижнюю части.

<style>
body {
    margin: 0 50px;
    background: #62374e;
    border: 50px dashed #fdc57b;
  + clip-path: polygon(0 50px, 100% 50px, 100% 250px, 0 250px);
}

Это потрясающе. Конечно, количество символов сейчас немного велико, их 158. Фактически, для обрезанной прямоугольной областиclip-pathЕсть более удобный синтаксис, приведенный вышеclip-path:polygon(0 50px, 100% 50px, 100% 250px, 0 250px)можно заменить наclip-path:inset(50px 0), уменьшенный на 20 символов.

Конечно, еще немного грубой силы, мы также можем добиться этого в одну строку:

<body bgcolor=62374e style=margin:0+50;border:dashed+50px#fdc57b;clip-path:inset(50px+0>

Конечно, может быть некоторый синтаксис, который разрешен только на этом веб-сайте, но основная реализация по-прежнему заключается в использованииclip-pathОтрезать лишнее

наконец

Ну вот и подошла к концу эта статья, надеюсь она вам поможет :), если хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.