Обзор основ внешнего интерфейса

(Нажмите на общедоступную учетную запись выше, чтобы быстро следить)

Эта статья взята из вклада (автора Цай Цзяньтао)

https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA

1. предисловие

Во фронтенд-круге есть «стебель»: во время собеседования вопрос о должности, свойственной CSS, может стереть с лица земли половину людей, многие из которых проработали четыре-пять лет. В компании я всегда участвовал в фронтенд-базовом собеседовании, и я глубоко чувствую, что это «преследование» — не шутка.

Тем не менее, я думаю, что фактическое соотношение может быть выше, и даже многие интервьюеры сами могут этого не понять. Потому что большинство передовых студентов могут не знатьначальный содержащий блокпонятие, или знать, но неправильно понять понятие.

Основных причин этого явления две: с одной стороны, при введении этого пункта знаний появляется слишком много лживых статей в Интернете, а также в стране и за рубежом (среди них есть и MDN), в результате чего многие студенты заблуждение (тоже начал я), и эта ошибка передавалась из поколения в поколение; с другой стороны, может быть, мы обычно не уделяем много внимания определению понятий, наше отношение к знаниям недостаточно строго, и нам не хватает духа проверки и привычки к систематическому обобщению.

Случайно я обнаружил это заблуждение и обнаружил, что организация W3CИнициализировать содержащий блокОфициальное определение , и для того, чтобы студенты, только что вступившие во фронтальный круг, пошли в обход, я хотел бы поделиться с вами этой статьей (подробности см. в главе 5.5. Включение блоков), и также делитесь им систематически.Я в основе внешнего макета.Накопленный неглубокий опыт. (Поскольку это систематический обзор, длина будет относительно длинной, я надеюсь, что читатели морально готовы)

2. Каковы основы внешнего интерфейса?

Существует три основных схемы компоновки интерфейса:

Традиционная схема компоновки (путем плавания, позиционирования и т.д.)
схема гибкого макета
схема расположения сетки

Все эти схемы могут решить проблему верстки, и каждая схема имеет свою теоретическую основу, так какую же базовую теорию схемы можно назвать основой верстки переднего плана? Чтобы ответить на этот вопрос, мы должны углубиться в характеристики этих трех схем.

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

Схема гибкой компоновки — это новая схема улучшения, предложенная для устранения различных неудобств традиционной схемы компоновки.Она больше не требует использования таких методов компоновки, как плавание и позиционирование, а в одностороннем порядке настраивает связанные связанные элементы через родительский элемент (флекс-бокс). Свойства CSS определяют правила компоновки подэлементов, и в большинстве случаев компоновка между подэлементами может быть выполнена без участия подэлементов (флекс-элементов). макет, а код CSS более совершенен. Ложка дегтя в том, что IE10 только начал его поддерживать, и нужно использовать префикс -ms- (в IE11 он не нужен).

Хотя сегодняшние мобильные телефоны в основном используют современные браузеры, которые имеют лучшую поддержку flex, не каждый мобильный телефон такой: автор когда-то использовал схему flex layout в мобильном проекте, но тестовые одноклассники компании есть в «Huawei». в браузере Honor 5" обнаруживает, что он не может поддерживать гибкую раскладку. Мы можем сказать студентам, которые тестировали его, есть ли проблема с браузером этого мобильного телефона Huawei? Очевидно нет. Поэтому автор вовремя отказался от схемы гибкой верстки на ранней стадии проекта, и перешел на традиционную схему верстки, чтобы избежать масштабных изменений в дальнейшем.

Схема компоновки сетки предложена Microsoft. По сравнению с традиционной схемой компоновки и схемой гибкой компоновки, это схема двумерной компоновки. Она поддерживается в IE10, но требует использования суффикса -ms- (больше не требуется для IE11+).

В общем, эти три типа решений могут в основном решить ежедневные проблемы макета интерфейса, а с точки зрения простоты использования, гибкости и мощности гибкие макеты и макеты сетки являются будущими тенденциями. Однако, судя по текущему использованию различных версий браузеров на пользовательском рынке и браузерной совместимости каждой схемы, традиционная схема компоновки является наиболее удобной и в определенной степени незаменимой, поэтому я думаю, что традиционная схема компоновки является Самый удобный для пользователя. Сначала освойте его, особенно для начинающих студентов, которые работают в компаниях B.

Таким образом, «основы макета внешнего интерфейса», которые подробно будут представлены в этой статье, относятся к большому количеству знаний CSS о «традиционной схеме макета», основное содержание которой взято из спецификации CSS2.

3. Зачем изучать основы внешнего интерфейса?

Студенты фронтенда, написавшие много страниц, я думаю, у всех у них должно быть такое глубокое чувство: при написании страниц мы часто сталкиваемся с проблемами верстки в разных сценариях.Нам нужно не только выбрать достижимые решения реализации верстки для конкретных сценариев, И нужно учитывать возможные будущие изменения.

Чтобы сделать это хорошо, вам нужен прочный передний фундамент в качестве опоры.

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

4. Количественно оценить рациональность плана компоновки

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

Когда дело доходит до количественной оценки цели «решения проблем», для внешнего кода, который написан и представлен, мы можем интуитивно судить о том, возможно ли решение, поэтому нам не нужно слишком много количественных методов, мы в основном хотим количественно определить «принятие изменений» «эта цель.

Чтобы количественно определить цель «принятия изменений», мы должны сначала понять, что такое «изменение». Основываясь на прошлом опыте разработки, автор делит изменения на две категории: одна — это изменение требований к компоновке, а другая — изменение операционной среды.

Для этих двух типов изменений я предлагаю следующие количественные принципы:

1. Для изменения требований к макету вы можете:

Удобно быстро найти позицию, которую нужно изменить
Способность реагировать на изменения без или с минимальными затратами на модификацию

2. Для изменения операционной среды можно сделать:

Отображает корректно или нормально в разных браузерах

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

Ниже мы формально начинаем знакомить с базовыми знаниями о верстке, относящимися к «традиционной схеме верстки».

5. Основы макета

5.1 Стандартная блочная модель CSS (или блочная модель W3C)

Веб-страница состоит из множества html-элементов, и каждый html-элемент анализируется в виде прямоугольного блока, а блочная модель CSS представляет собой модель деконструкции этого прямоугольного блока. Блочная модель CSS разделена на четыре области изнутри наружу четырьмя границами. Край содержимого, край заполнения, край границы и край поля: область содержимого, область заполнения, область границы и область поля. сплошной прямоугольник, а остальные — полые кольца (полая часть — это область содержимого), как показано на следующем рисунке:

Блочная модель CSS — диаграмма деления области

Кроме того, каждая область имеет свою определенную роль: область содержимого, которая используется текущим элементом для размещения всех дочерних элементов; область заполнения, которая используется текущим элементом для изоляции себя и дочерних элементов; область границы, используемая текущим элементом. элемент для отображения собственного контура; Область поля — это текущий элемент, используемый для изоляции самого себя и соседних элементов. Понимание ролей и обязанностей каждой области имеет решающее значение для написания элегантного и понятного кода макета.

Блочная модель CSS — диаграмма действий региона

Размер каждой области управляется определенными свойствами CSS, как показано на следующем рисунке:

Блочная модель CSS — диаграмма управления свойствами

Эти свойства размера CSS (ширина, высота, отступы, граница и поля) эквивалентны крючкам. Мы можем настроить размер элементов, установив эти «крючки».

5.2 box-sizing (свойство CSS3)

5.2.1. размер коробкиэффект

Размер блока, как следует из названия, связан с настройкой размера блоков CSS, а блоки CSS можно разделить на:

поле содержимого (т.е. область содержимого)
padding-box(=content area + padding area)
border-box(=content area + padding area + border area)
margin-box(=content area + padding area + border area + margin area)

Проще говоря, роль box-sizing состоит в том, чтобы сообщить браузеру: CSS-свойства width и height используются для установки размера блока, в стандарте W3C значением box-sizing является только content-box и border-box (firefox дополнительно поддерживает padding-box). так,

Когда значение box-sizing равно content-box (по умолчанию), есть:

width = content-width;

height = content-height;

Когда значение box-sizing равно border-box, возможны:

width = content-width + padding-left + padding-right + border-left-width + border-right-width;

height = content-height + padding-top + padding-bottom + border-top-height + border-bottom-height;

Относительно роли box-sizing есть другое выражение: сообщить браузеру, использовать ли блочную модель W3C или блочную модель IE.

5.2.2. размер коробкиСовместимость с браузером

box-sizing — это свойство CSS3, которое поддерживается в IE8+ (включая IE8).Однако в IE8, когда значение box-sizing равно border-box, его нельзя комбинировать с min-width, max-width, min-height. или max-height Используйте, потому что синтаксический анализ IE8 min-* и max-* по-прежнему действует на поле содержимого и не контролируется свойством размера окна.

5.2.3. размер коробкипричина

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

При разработке CSS существует две версии: одна — блочная модель IE, а другая — блочная модель W3C. Блочная модель IE используется как в IE5- (включая IE5), так и в navigator4, тогда как блочная модель W3C поддерживается в стандартном режиме IE6+ (включая IE6). Две версии блочной модели на самом деле одинаковы с точки зрения структуры модели, но правила расчета свойств with и height различны. Разница эквивалентна двум значениям свойств box-sizing: border-box и content- коробка. разница", как показано на следующем рисунке:

Разница между блочной моделью IE и блочной моделью W3C

После понимания процесса разработки блочной модели CSS и начала поддержки недавно добавленного размера боксов нетрудно найти:

IE5 — принимает модель коробки IE
Стандартный режим IE6 и 7 отказался от блочной модели IE и переключился на блочную модель W3C.
IE8+ снова обеспечивает поддержку блочной модели IE с помощью box-sizing.

Что касается блочной модели IE, то мы видели неоднократное отношение организации W3C к тому, чтобы сначала уйти, а затем остаться.Я не могу не вызвать следующие два сомнения:

Вопрос один:Почему организация W3C отказалась от блочной модели IE в самом начале при формулировании стандарта блочной модели и восстановила блочную модель W3C с полем содержимого в качестве правила расчета? Чем блочная модель W3C лучше блочной модели IE?

Вопрос второй:Почему в CSS3 вновь обеспечена поддержка блочной модели IE (для размера окна задано значение border-box) и на что следует обратить внимание?

Что касается первого вопроса, я не нашел соответствующих официальных инструкций, но утверждение, с которым я согласен:

В повседневной жизни, когда мы кладем вещи, нас волнует, насколько велика коробка.«Большой» здесь часто относится к вместимости коробки, а не к размеру всей коробки. Элемент HTML также рассматривается как блок и контейнер, поэтому мы будем уделять больше внимания размеру его области содержимого и надеемся, что сможем лучше контролировать область содержимого. Таким образом, с точки зрения хранения, модель блока W3C больше соответствует этому восприятию.С помощью ширины и высоты мы можем напрямую задавать размер блока контента декларативным способом. Если используется модель блока IE, мы можем сначала установить размер всего блока (границы), и, наконец, браузер автоматически вычисляет размер блока контента, который, по-видимому, слабо контролирует размер окна. содержание-коробка.

Что касается второго вопроса, я думаю, что есть несколько причин:

1. Помогает повторно использовать код CSS, разработанный на основе блочной модели IE;

2. «Старые и молодые» блочной модели IE могут продолжать компьютерную привычку;

3. Для некоторых html-элементов при синтаксическом анализе по-прежнему используются правила расчета блочной модели IE (к таким элементам относятся select и button).Использование блочной модели IE помогает поддерживать согласованность;

4. С точки зрения расположения элементов семантика ширины и высоты модели блока IE больше соответствует интуитивному познанию человека (размер и контур блока должны быть ограничены рамкой);

5. В сценариях гибкого макета и адаптивного макета блочная модель IE работает лучше, чем блочная модель W3C (более простая в реализации и лучшая совместимость с браузерами), например, установка ширины элемента так, чтобы она всегда составляла фиксированный процент от общей ширины. текущей строки (менее 100%), а элемент имеет фиксированное отступы в пикселях;

Например: установите элемент, ширина которого составляет 40% от текущей строки, а отступ элемента зафиксирован на 10 пикселей.

Реализация блочной модели IE:

Вариант 1. Этого можно добиться, используя div, непосредственно установив ширину на 40% и отступы на 10 пикселей;

Реализация блочной модели W3C:

Вариант 1: Используйте два div для имитации реализации, ширина внешнего div установлена на 40%, отступ внутреннего div — 10 пикселей, а ширина — auto;

Вариант 2. Этого можно добиться с помощью div, но вам нужно позаимствовать функцию calc из CSS3 для динамического расчета ширины области его содержимого, то есть ширина равна calc(40% - 20px), а отступ равен 10 пикселей;

Очевидно, что реализация блочной модели IE более лаконична и лучше совместима с браузерами.

Ответ на два приведенных выше вопроса на самом деле представляет собой сравнение блочной модели IE и блочной модели W3C. Из сравнения мы можем прояснить преимущества и недостатки двух моделей коробок. В то же время, после большого практического опыта и всестороннего обсуждения, блочная модель IE в целом лучше, чем блочная модель W3C, что является реальной причиной, по которой блочная модель IE может «вернуть короля» и быть повторно включена организация W3C.

Поэтому для повторной поддержки блочной модели IE в новой спецификации и обеспечения обратной совместимости с блочной моделью W3C организация W3C добавила свойство box-sizing в CSS3 для переключения между двумя блочными моделями.

5.2.4 Оценка размера коробки

На мой взгляд, добавление box-sizing в CSS3 на самом деле сложный способ компенсировать это. Хотя этот дизайн может повторно обеспечить поддержку блочной модели IE, в определенной степени свойства CSS width и height неоднозначны, что делает их обязанности не единственными. Однако это кажется наиболее предпочтительным исправлением, потому что в Интернете уже есть много веб-страниц, разработанных на основе блочной модели W3C, и последующие исправления должны учитывать обратную совместимость. Мы можем решать новые проблемы только с помощью неэлегантных замыслов на основе неразумных замыслов.

Если вы можете путешествовать во времени и пространстве, когда организация W3C обсуждает «как спроектировать стандартную блочную модель», я думаю, что более подходящим проектным решением будет добавление нового атрибута, чтобы установить размер только блока содержимого, сохраняя при этом ширина и высота исходной семантики блочной модели IE. Таким образом, не будет более поздних свойств размера коробки.

Я предполагаю, что организация W3C также думала об этом плане, но в то время, вероятно, думала:

1. Напрямую задавать размер элемента border-box не имеет смысла, а размер border-box можно добиться и установкой размера content-box (на самом деле две настройки, поддерживающие размер из content-box и border-box тоже Не беда, можно расценивать как синтаксический сахар)

2. Настройка размера блока содержимого также является часто выполняемой операцией: если новое добавленное свойство называется content-width или content-height, имя будет слишком длинным (также можно использовать имена cwidth и cheese)

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

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

Что касается оценки и размышлений о размерах коробки, могут быть некоторые запоздалые размышления, а некоторые предположения могут быть просто воображением автора, а не первоначальным намерением организации W3C. Здесь я просто хочу поделиться своими мыслями о рефакторинге и пообщаться со студентами, у которых такие же сомнения, как и у меня.

5.2.5. Лучшие практики для определения размера коробки

Здесь нужно ответить на три основных вопроса:

Вопрос один:Для значения box-sizing лучше взять content-box или border-box?

Если требуется совместимость хотя бы с IE6 и 7, то box-sizing нельзя использовать, а можно использовать только box-модель W3C;

Если вам нужна совместимость хотя бы с IE8, то нет проблем с использованием content-box в функции, но это будет немного сложнее при реализации некоторых гибких макетов и адаптивных макетов; а border-box лучше в этих аспектах, но не может Он используется вместе с четырьмя атрибутами IE8 min-width, min-height, max-width и max-height.Если вы используете его, вы должны обратить на это внимание;

Если вам нужна только совместимость хотя бы с IE9, то я думаю, что для content-box больше подойдет глобальная конфигурация, а локальная конфигурация может быть и той, и другой. Причины следующие:

1. CSS3 предоставляет функцию calc (IE9+), которая делает блочную модель W3C мощным помощником, а ее производительность в гибкой и адаптивной верстке ничем не отличается от блочной модели IE;

2. Принцип по умолчанию лучше, чем конфигурация: я лично считаю, что «по умолчанию лучше, чем конфигурация», особенно в файлах конфигурации на уровне архитектуры и платформы, таких как reset.css, старайтесь не навязываться модулям, которые могут быть введены в будущем. Например, нам часто нужно внедрить в проект сторонние компоненты.Если в компоненте строго не задекларировано box-sizing, то по умолчанию используется стандартная боксовая модель W3C.Если значение box-sizing задано в глобальном reset.css border-box для использования блочной модели IE, то это повлияет на стиль сторонних компонентов этого типа, основанный на блочной модели W3C по умолчанию. Это также напоминает нам о том, что при инкапсуляции компонентов не забудьте строго объявить box-sizing, даже если вы используете контент-бокс по умолчанию.

Короче говоря, в большинстве сценариев их можно поменять местами, но концепция использования отличается. В небольшом количестве сцен у border-box больше преимуществ, но с поддержкой функции calc этого преимущества больше нет, наоборот, преимущество content-box как значения по умолчанию становится все более и более очевидным.

Мое личное предложение: используйте блочную модель W3C по умолчанию глобально (ваш код CSS может быть совместим как минимум с IE6/7, а также может использоваться с min-* и max-* в IE8) и обе локальные сцены (только IE бокс-модели используются в качестве техники компоновки). Вы можете использовать блочную модель IE глобально, если вы подтверждаете, что проект должен быть совместим только с IE8, даже если это может повлиять на импортированные сторонние компоненты, есть способы справиться с этим.

Вопрос второй:Если вы хотите глобально использовать блочную модель IE, как установить размер блока в reset.css?

Вот ссылка:

html {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

*, *:before, *:after {

-webkit-box-sizing: inherit;

-moz-box-sizing: inherit;

box-sizing: inherit;

}

Преимущества этой установки:

1. Тип модели типа дочернего элемента определяется родительским элементом по умолчанию, что удобно для унифицированной настройки компонентов;

2. Поддержка более ранних версий браузеров: Safari (

Вопрос третий:Начиная с Bootstrap3, во всем мире используется блочная модель IE (box-sizing и border-box). Как согласовывать отношения со сторонними компонентами, разработанными на основе стандартной блочной модели?

Как мы все знаем, BS2 также учитывала совместимость с IE7, в то время как BS3 полностью отказалась от совместимости с IE7 и установила box-sizing на border-box. Что касается этого момента, вы можете увидеть список изменений, официально выпущенный «Выпуском Bootstrap 3». Выдержки из него следующие:

Из вышеприведенного простого утверждения: Лучшая блочная модель по умолчанию (используйте лучшую блочную модель по умолчанию) мы видим, что автор BS является поклонником блочной модели IE. Автор также перечисляет причины, и основное содержание, как упоминалось выше, блочная модель IE хорошо работает в адаптивном макете. Дополнительным моментом является то, что если border-box установлен не глобально, а каждый компонент и его подкомпоненты установлены индивидуально, поддерживать его будет кошмар (автор упоминается в выпуске с официальным номером 12351).

Чтобы узнать, как BS обрабатывает отношения со сторонними компонентами, разработанными на основе стандартной блочной модели, вы также можете обратиться к проблеме № 12351: «Откажитесь от * {box-sizing: border-box }, чтобы хорошо работать со сторонними скриптами. "

В выпуске автор ответил агрессивно и эвфемистично:

1. BS не рассматривает поддержку сторонних компонентов и фреймворков. Автор эвфемистически сказал, что BS — это большой проект, и есть в основном четыре активных сопровождающих, поэтому они не могут позаботиться о потребностях каждого ~ (Но я чувствую, что автор говорит, что BS — это большой и всеобъемлющий фреймворк, вы все еще сделать это Насчет сторонних компонентов)

2. Блочная модель IE, все говорили, что после ее использования почему сторонние компоненты не поддерживают боксовую модель IE?

В этой главе свойство box-sizing объясняется с пяти точек зрения: роль box-sizing, совместимость с браузерами, причины, оценка и рекомендации, чтобы углубить понимание и овладение учащимися этим свойством. Следует подчеркнуть, что если вы только что взялись за проект, прежде чем писать код CSS, проверьте, есть ли в проекте глобальная конфигурация box-sizing, и выберите соответствующие правила расчета размера в соответствии с конкретными значениями.

5.3 Классификация элементов и их компоновочные характеристики

5.3.1 Классификация элементов

По характеристикам компоновки элементов их можно разделить на три типа элементов: элементы блочного уровня (block-level), встроенные элементы (inline-level) и встроенные элементы блочного уровня (inline-block-level). , мы можем Следующее определение:

5.3.1.1 Элементы блочного уровня

Свойство display принимает такие элементы, как блок, таблица, flex, сетка и элемент списка, которые отображаются в отдельной строке.

5.3.1.2 Элементы встроенного уровня

Элементы, свойство display которых принимает значение inline, могут отображаться в одной строке.

5.3.1.3 Встроенные элементы блочного уровня

Свойство display принимает такие элементы, как inline-block, inline-table, inline-flex и inline-grid, которые имеют как элементы блочного уровня, так и характеристики макета встроенных элементов.

дружеское напоминание:

1) Что касается отображаемых значений различных элементов, все они фактически были перечислены, но для того, чтобы определение могло охватывать изменения (в будущем могут быть введены новые значения отображаемых атрибутов), эквивалентные слова используется в листинге;

2) В официальной документации w3c элементы, у которых значения атрибута отображения inline, inline-block и inline-table, вместе называются элементами inline-level, мне не нравится и я не согласен с этой общей классификацией. В этой статье переопределяется «Понятие «элемент встроенного уровня блока» подразделяет «элемент встроенного уровня» и разделяет встроенные блоки и встроенные таблицы на элементы встроенного уровня блока. Исходный документ выглядит следующим образом: Следующие значения свойства display сделать элемент встроенного уровня: «встроенный», «встроенная таблица» и «встроенный блок».

5.3.2 Свойства макета элементов

5.3.2.1 Свойства макета блочных элементов

Для блочных элементов существует несколько особенностей компоновки:

Эксклюзивная линия (по умолчанию ширина 100%, высота 0);
Вы можете установить любые свойства, связанные с размером (ширина, отступы, поля и границы);

5.3.2.2 Свойства макета для элементов встроенного уровня

Прежде чем говорить о характеристиках макета элементов встроенного уровня, давайте сначала разберемся с классификацией элементов встроенного уровня, которые можно разделить на два типа элементов:

1) Сменные встроенные элементы

В MDN определение «заменяемого встроенного элемента» выглядит следующим образом:

В буквальном переводе «заменяемые встроенные элементы» — это элементы, содержимое представления которых не входит в область действия CSS. Эта фраза непонятна? Мы можем понимать это по-другому: «заменяемый встроенный элемент» — это тип элемента, отображаемый контент которого получен из внешних ссылок через src, value и другие атрибуты элемента или атрибута содержимого CSS, и может быть заменен. По мере изменения источника контента или количества контента сам заменяемый элемент будет изменяться в размере как по горизонтали, так и по вертикали. Типичные сменные элементы:<img>,<object>,<video> а также <embed>, заменяемыми элементами класса формы являются<textarea> а также<input>, некоторые элементы представлены как заменяемые элементы только в некоторых особых случаях, таких как<audio>, ,<canvas>и .

В частности, объекты, вставленные через свойство содержимого CSS, называютсяАнонимные сменные элементы.

2) Встроенные элементы не могут быть заменены

«Незаменяемые встроенные элементы» на самом деле являются распространенным типом встроенных элементов, таких как и . «Незаменяемые встроенные элементы» относятся к «заменяемым встроенным элементам», а отображаемый контент находится в рамках CSS и не может быть заменен.

Ближе к началу, элементы встроенного уровня имеют следующие характеристики макета:

Его можно расположить с несколькими элементами одного типа в порядке слева направо;
Незаменяемые встроенные элементы не могут устанавливать ширину, высоту и вертикальные поля, в то время как заменяемые встроенные элементы могут;
Выравнивание по горизонтали и вертикали управляется атрибутом text-align родительского элемента и атрибутом vertical-align элемента встроенного уровня соответственно (если родительский элемент является элементом ячейки таблицы, он также управляется атрибутом атрибут vertical-align родительского элемента. ), по умолчанию выровненный по левому краю в горизонтальном направлении и отображаемый на базовой линии линейного блока по умолчанию в вертикальном направлении (понятие «линейный блок» будет подробно объяснено позже);

дружеское напоминание:

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

2) Когда элементы встроенного уровня расположены горизонтально, между двумя элементами может быть около 6 пикселей пробела, что вызвано символами пробела (переводом строки, пробелами или табуляцией) между элементами, как показано на следующем рисунке:

Методов клиринга много, я привык использовать плавающий метод, другие способы могу сам погуглить.

5.3.2.3 Свойства макета встроенных элементов блочного уровня

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

Расположение такое же, как у элементов строчного уровня, он не занимает ни одной строки, а располагается в порядке слева направо в строке;
Выравнивание по горизонтали и вертикали такое же, как и для элементов встроенного уровня;
Подобно элементам блочного уровня, можно установить любой атрибут размера (но ширина по умолчанию равна 0);

Примечание. Нетрудно обнаружить, что на самом деле встроенные элементы можно заменять, а их характеристики компоновки такие же, как и у встроенных элементов блочного уровня.

5.4 Контекст форматирования

Контекст форматирования, который относится к контексту с определенными правилами форматирования CSS (правилами макета), в котором все дочерние элементы будут расположены в соответствии с их конкретными правилами форматирования CSS.

Мы можем назначить определенный контекст форматирования элементу как контейнеру, что означает, что мы можем определить область рендеринга с определенными правилами макета. Распространенными контекстами форматирования являются BFC (спецификация CSS2.1), IFC (спецификация CSS2.1), FFC (новая спецификация CSS3) и GFC (новая спецификация CSS3).

5.4.1. BFC

5.4.1.1 Определения

BFC, полное название контекста форматирования блока, это независимая и закрытая область рендеринга, все элементы в этой области, начиная с верхней части области, располагаются один за другим в соответствии со своими особенностями компоновки: уровень блока в этой области Элементы , отображаются сверху вниз, соседние элементы блочного уровня могут быть разделены полями, но соседние элементы блочного уровня в вертикальном направлении будут объединены полями; встроенный уровень или встроенный уровень в этой области - блочные элементы , они отображаются по порядку слева направо (организация W3C говорит, что элементы внутри BFC отображаются вертикально друг за другом, я не думаю, что это очень строго, потому что BFC также может вмещать элемент inline-level и inline-level-block , поэтому моя интерпретация здесь немного отличается от W3C). Элементы со средой форматирования BFC, мы называем их элементами BFC, можно сказать, что BFC определяет правила рендеринга области содержимого элементов BFC.

Глядя на это описание, думаете ли вы, что правила рендеринга BFC являются правилами компоновки по умолчанию для документооборота? Это похоже, но не совсем то же самое. Между правилами рендеринга внутри элементов BFC и внутри обычных блочных элементов все еще есть некоторые различия.5.4.1.3 Особенностидетали раздела.

5.4.1.2. как создать

Существует несколько способов создания элементов BFC (из MDN BFC):

корневой элемент или другой элемент, содержащий его
плавающий элемент (элементfloat нет none)
Абсолютно позиционированные элементы (элементposition для absolute или fixed)
встроенный блок (элементы имеютdisplay: inline-block)
ячейки таблицы (элементы имеютdisplay: table-cell，HTML表格单元格默认属性)
заголовок таблицы (элементы имеютdisplay: table-caption, атрибут заголовка таблицы HTML по умолчанию)
overflowзначение неvisibleБлочный элемент
display: flow-root
containявляется элементом следующих значений:layout, content, или strict
гибкий элемент (display: flex или inline-flexДочерний элемент)
Элемент сетки (display: grid или inline-gridдочерние элементы элемента)
Многоколоночный контейнер (элементыcolumn-count или column-widthне дляauto, включать column-count: 1Элементы)
column-span: all Всегда должен создаваться новый контекст форматирования, даже еслиcolumn-span: allЭлементы не завернуты в контейнер с несколькими столбцами.

5.4.1.3 Особенности

Элементы BFC обладают следующими характеристиками:

1. В соответствии с независимой и закрытой областью рендеринга стиль CSS дочернего элемента не будет влиять на внешнюю часть элемента BFC;

Например, мы используем два последовательных элемента уровня блока, один из которых является обычным элементом уровня блока, а другой является элементом BFC (оба с зеленым фоном), соответственно обертывая дочерний элемент с верхним отступом 20 пикселей (желтый фон). ), сравните эффект макета:

проиллюстрировать:

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

2. Плавающий дочерний элемент участвует в вычислении высоты родительского элемента BFC, то есть элемент BFC может распознать плавающий элемент (объявление элемента как элемента BFC также является распространенным методом для clearfix для решения проблемы коллапса родительского элемента). элемент);

Например:

проиллюстрировать:

Элементы BFC могут идентифицировать плавающие подэлементы, а плавающие подэлементы участвуют в вычислении высоты элементов BFC, и не будет проблемы «обрушения высоты»;
Обычные элементы блочного уровня не могут распознавать плавающие подэлементы, и возникает проблема «коллапса высоты»;

3. Элемент BFC, занимающий поток документов (может быть создан с помощью overflow: auto), может идентифицировать плавающий одноуровневый элемент;

Например:

проиллюстрировать:

Обычные элементы уровня блока не могут распознавать плавающие одноуровневые элементы, и часть контента будет покрыта плавающими одноуровневыми элементами;
Элемент BFC, занимающий поток документа (может быть создан с параметром overflow: auto), может идентифицировать плавающий одноуровневый элемент, не будет перекрываться плавающим одноуровневым элементом и будет отображаться рядом с ним;

4. Элемент BFC, занимающий поток документа (можно создать с overflow: auto), при ширине auto он будет занимать оставшуюся ширину текущей строки;

Например:

проиллюстрировать:

Элемент BFC в потоке документов, когда ширина задана автоматически, будет занимать оставшуюся ширину текущей строки;

5.4.2. IFC

5.4.2.1 Определения

IFC, полное название контекста встроенного форматирования, его внутренние элементы отображаются друг за другом по горизонтали, по вертикали каждому элементу можно задать разное выравнивание, элементы внутри IFC обрамлены рядом прямоугольников Содержит , эти виртуальные прямоугольные блоки мы называем линейным блоком (line box). Область действия IFC можно рассматривать как прямоугольную область, состоящую из блоков строк, содержащих все ее дочерние элементы.

5.4.2.2 Как создать

По сравнению с BFC, он создается пассивно, неявно, содержащимися подэлементами: он генерируется только тогда, когда область содержит только горизонтально расположенные элементы, и эти подэлементы могут быть текстом, элементом встроенного уровня или встроенным элементом. элемент блочного уровня.

5.4.2.3 Особенности

1. Элементы внутри ИФК располагаются в порядке слева направо и сверху вниз;

2. Каждый элемент внутри IFC может регулировать вертикальное выравнивание, устанавливая свойство vertical-align;

3. Каждая линия, образованная прямоугольной областью, содержащей эти внутренние элементы, называется линейным блоком (линейный блок, который будет подробно описан позже);

5.4.3. FFC и GFC

FFC (контекст гибкого форматирования) и GFC (контекст форматирования сетки) — это содержимое гибкого макета и макета сетки соответственно.Содержимое этих двух модулей не является предметом рассмотрения в этой статье, поэтому заинтересованные студенты могут самостоятельно найти его в Google.

5.5 Содержащий блок

5.5.1 Определения

Когда мы устанавливаем процентное значение свойств размера элемента (ширина, высота, отступы, поля и границы) или значение свойств смещения (сверху, справа, снизу и слева), обычно имеется «относительная система отсчета», эта «относительная опорный кадр» «Опорный кадр» обычно представляет собой элемент-предок на уровне блока (обычно родительский элемент на уровне блока), который обертывает элемент или ближайший к элементу элемент-предок с нестатическим (относительным, абсолютным и фиксированным) позиционированием. Эти элементы-предки с функцией «относительной системы отсчета» имеют специальный термин для описания области их размещения (content box или padding box), то есть содержащего блока (в системе знаний существует понятие содержащего блока, которое помогает Углубить понимание принципа позиционного позиционирования).

В частности, для элемента относительного позиционирования «относительная система координат» его атрибутов размера (ширина, высота и т. д.) по-прежнему является его содержащим блоком (поле содержимого элемента-предка на уровне блока (обычно родительский элемент)) , но атрибуты смещения (сверху, «относительная система координат» справа, снизу и слева) — это его исходное положение в потоке документа.

5.5.2 ICB (начальный содержащий блок, начальный содержащий блок)

5.5.2.1 Определения

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

на верхнем уровне нет окружающего его элемента, и его содержащий блок что? Что он выбирает в качестве «относительной системы отсчета»?

На самом деле корневой элемент

имеет содержащий блок, представляющий собой невидимый прямоугольный блок, который организация W3C называет ICB (начальный содержащий блок, начальный содержащий блок). Ниже приводится определение пары ICB, данное организацией W3C:

The containing block in which the root element lives is a rectangle called the initial containing block.

5.5.2.2 Размер и начальное положение МКТ (координаты левого верхнего угла)

Объясняя размер и начальное положение ICB, вот краткое дополнение базовых знаний: непрерывный носитель (continuous media) и постраничный носитель (paged media). Как понимать эти два понятия? На уровне визуального чтения это два способа представления контента.

Непрерывное мультимедиа — это метод непрерывного отображения контента, который поддерживает непрерывность отображаемого контента (отображение всего контента на одной странице), и мы можем просматривать текущий представленный контент в окне просмотра (визуальном окне) непрерывного мультимедиа. В частности, окно браузера можно рассматривать как сплошной носитель: когда размер содержимого превышает область просмотра, читатель может читать содержимое с помощью плавной прокрутки.

Пейджинговый медиа — это метод отображения контента путем вырезания страниц. Он делит отображаемый контент на несколько страниц одинакового размера (все содержимое отображается на страницах). Мы можем просматривать текущий представленный контент в области страницы (области отображения страницы). пейджинговых медиа. В частности, слайды и устройства для чтения электронных книг могут рассматриваться как пейджинговые носители.Когда размер содержимого превышает область страницы, читатели могут читать содержимое, вырезая страницы;

Для окна браузера, принадлежащего непрерывному медиа, размер ICB равен области просмотра (окну браузера), а его начальное положение — исходной точке холста (т. данные).Содержимый документа можно рассматривать как холст).

Для пейджингового носителя размер ICB равен площади страницы (отсутствуют соответствующие сведения о начальной позиции ICB в пейджинговом носителе, но это не является предметом рассмотрения в данной статье).

Интуитивно понятно, что ICB, содержащий блок корневого элемента , является «первым экраном».

5.5.3 Содержащие блоки, соответствующие различным элементам позиционирования

Содержащий блок статических и относительных позиционированных элементов является полем содержимого его предкового элемента на уровне блока (обычно родительский элемент на уровне блока);
Содержащий блок элемента с абсолютным позиционированием — это поле заполнения ближайшего нестатически позиционированного элемента-предка.
);
Содержащий блок элемента фиксированного позиционирования является текущим окном просмотра (окном);

Здесь важно подчеркнуть, что ICB (Initial Containing Block) — это имя собственное, которое конкретно относится к содержащему блоку корневого элемента

. Не путайте начальный содержащий блок элемента с его родителем. Редактор MDN также допустил эту ошибку. детали следующим образом:

После исправления:

Есть также некоторые авторитетные книги по CSS, в которых говорится, что когда абсолютно позиционированный элемент не может найти своего ближайшего нестатического предка, он позиционируется относительно корневого элемента

, что также не является строгим. Только что видел один, следующим образом:

Рисунок 1. Обложка книги

Рисунок 2. Скриншот оригинальной истории

Мы можем опровергнуть это утверждение на простом примере: установить высоту корневого элемента html так, чтобы она превышала высоту области просмотра, например, 5000 пикселей (при условии, что высота области просмотра равна 500 пикселей), а затем установить нижнюю часть абсолютно позиционированного элемента, у которого нет ближайшего нестатический элемент-предок Установите для него значение 0 и размер 100px*100px. Если это так, как указано в книге, то в верхней части сгиба абсолютно позиционированный элемент скрывается под полосой прокрутки. А реальная ситуация такова:Абсолютно позиционированный элемент должен отображаться внизу сгиба и прокручиваться по мере прокрутки страницы. Проверьте следующим образом:

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

5.6 Обоснование

5.6.1 Документооборот (нормальный поток)

5.6.1.1 Определения

Что касается «документооборота», то более официального определения найти не удалось. Автор нашел в гугле некоторые пояснения, которые я считаю более надежными, и они перечислены следующим образом:

1) Из: "CSS: понимание документооборота"

The document flow is the model by which elements are rendered by default in the CSS specifications. In this model, elements are rendered according by their default display rule. In other words, block-level elements are displayed on a new line and inline elements on the same line. Everything is stacked in an ordered way from top to bottom.

2) Из: "Что такое "документооборот"?

Document flow is the arrangement of page elements as defined by positioning statements and the order of html statements; that is, how the different elements take up space and arrange themselves around each other.

Здесь я хотел бы поделиться своим собственным определением «документооборота»:

Поток документов является «контейнером» по умолчанию для элементов страницы.

5.6.1.2. характеристика

Потоки документов обладают следующими свойствами:

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

2. Элементы документооборота соотносятся друг с другом: они расположены упорядоченно и идентифицируют друг друга;

5.6.1.3 Вне документооборота

Элемент отделен от потока документов Согласно моему предыдущему определению это фактически означает, что элемент отделен от контейнера хранения по умолчанию и хранится в другом контейнере. Элемент находится вне потока документа, поэтому его родительский элемент не распознает его и не участвует в вычислении высоты родительского элемента. Проблема «коллапса высоты» возникает, когда все дочерние элементы родительского элемента выпадают из потока документа. Распространенными способами выхода из документооборота являются:

Установите элемент как плавающий элемент
Установите элемент в абсолютный, фиксированный элемент

5.6.2. Поплавок (свойство float)

5.6.2.1 Классификация плавучих элементов

В соответствии с настройкой свойства float элементы можно разделить на плавающие элементы (значение left или right) и неплавающие элементы (значение none). А по направлению плавания его можно подразделить на:

Элемент с плавающей запятой слева: элемент, значение которого с плавающей запятой оставлено.
Правый элемент с плавающей запятой: элемент, чье значение с плавающей запятой правильное.

5.6.2.2 Плавающий принцип

Чтобы понять плавающий принцип плавающих элементов, вам нужно только понять плавающее начальное положение, плавающее направление и плавающее конечное положение плавающих элементов.

плавающее начальное положение

Плавающая начальная позиция плавающего элемента (включая левую и правую) — это крайняя левая пустая позиция последней строки, независимо от того, может ли пустая позиция вместить текущий плавающий элемент;
плавающее направление

Плавающее направление плавающего влево элемента должно плавать влево от начальной позиции;

Направление плавания плавающего вправо элемента - плавать вправо от исходного положения;
плавающее конечное положение

Когда левый плавающий элемент встречает первый левый плавающий элемент или крайнее левое заполнение содержащего блока, плавание заканчивается;

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

Следующая демонстрация может помочь учащимся понять три элемента плавающих элементов:

/06:layout/float/1 Три элемента плавающего файла elements.html:

<body>

левый плавающий элемент — 1 (ширина: 30%; высота: 100 пикселей;)

левый плавающий элемент — 2 (ширина: 30%; высота: 200 пикселей;)

левый плавающий элемент — 3 (ширина: 30%; высота: 100 пикселей;)

левый плавающий элемент — 4 (ширина: 30%; высота: 100 пикселей;)

</body>

Показать результаты:

проиллюстрировать:

а) имеется четыре последовательных плавающих слева элемента, каждый шириной 30 %;

б) когда строка заполнена тремя элементами, текущая строка имеет только 10% своей ширины, чего недостаточно для размещения четвертого плавающего слева элемента;

в) четвертый плавающий элемент, который перемещается влево от начальной позиции (самое левое поле последней строки) до тех пор, пока не встретится с границей второго плавающего элемента;

Чтобы помочь вам понять плавающий принцип, я хотел бы определить здесь несколько дополнительных терминов:

Левая плавающая команда: состоит из нескольких последовательных левых плавающих элементов.
Плавающая вправо команда: состоит из нескольких последовательных плавающих вправо элементов.
Плавающий слева элемент заголовка очереди: первый элемент плавающей слева очереди также является самым левым элементом.
Плавающий справа элемент заголовка очереди: первый элемент плавающей справа очереди и самый правый элемент

Особенно,

1. В одном ряду находится не более двух плавающих команд, одна из которых — левая плавающая команда, а другая — правая плавающая команда;

2. В том же ряду плавающая команда может занимать полный ряд;

3. Если несколько непрерывно плавающих элементов не могут быть отображены в одной строке, они будут разделены на две или более плавающих групп по строкам;

5.6.2.3. Эффект float на отображении элемента

Когда элемент установлен как плавающий, это может привести к изменению значения свойства display.Конкретные правила таковы:

Сравнительная таблица изменения атрибута отображения плавающего элемента

5.6.3 Clear float (очистить свойство)

5.6.3.1 Три элемента

Очистите поплавок, чей эффект должен измениться"текущий элемент"а также"плавающий элемент предыдущего объявления"Правила компоновки по умолчанию между ними, это изменение в основном отражено в следующем: сделать перенос текущего элемента для отображения. Это предложение содержит три элемента, а именно:

Пользователь:текущий элемент (плавающий элемент или элемент уровня блока неплавающего элемента)
Объект действия (чей плавающий элемент очищается):ранее объявленный плавающий элемент
Назначение (функция):обернуть текущий элемент

В частности, почему потребитель не включает неплавающие встроенные элементы? Поскольку не плавающие встроенные элементы могут распознавать плавающие элементы, независимо от того, использовать ли clear для очистки плавающего элемента «ранее объявленного плавающего элемента», результат макета будет таким же. Заинтересованные студенты могут обратиться к:06:layout/clear/4. Неплавающие строчные элементы очищаются слева floating.html, вы можете наблюдать изменение позиции отображения закомментированного неплавающего встроенного элемента до и после clear:left в отладчике. Неплавающие элементы блочного уровня, поскольку ранее объявленный плавающий слева элемент не может быть распознан, он будет перекрываться с плавающим слева элементом (плавающий слева элемент находится сверху), поэтому неплавающий элемент блочного уровня использует clear: left, чтобы очистить предыдущие левые элементы с плавающим элементом, чтобы избежать перекрытия.

5.6.3.2 Значения и сценарии применения атрибута clear

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

Значения свойства clear — левое, правое и оба. Итак, каковы их сценарии применения?

Сценарий применения значения left таков, что объявленный ранее плавающий элемент плавает влево (float:left);

Сценарий применения права заключается в том, что объявленный ранее плавающий элемент перемещается вправо (float: right);

Сценарий применения обоих заключается в том, что заявленное ранее плавающее направление плавающего элемента неопределенно, оно может быть левым или правым (для учащихся, разобравшихся с принципом реализации clearfix, понять несложно);

Опять же, если текущий элемент хочет очистить плавающий элемент, очищается плавающий элемент ранее объявленного плавающего элемента.Значение его свойства clear не имеет ничего общего с тем, является ли текущий элемент плавающим элементом или плавающим направлением, но зависит от его фронта Плавающее направление объявленного плавающего элемента.

Например, элемент с плавающей запятой справа (float: right) имеет элемент с плавающей запятой слева (float: left) перед ним. и отобразить его в новой строке. ; Если используется clear:left, этот элемент отображается в крайнем правом углу текущей строки. Как показано ниже(06:layout/clear/4.Правый поплавок очистить левый поплавок.html):

Рисунок 1. Правый поплавок очищает левый поплавок

Рисунок 2. Очистить поплавок, плавающие вправо

Поняв значение и сценарии применения атрибута clear, мы можем использовать его, что можно резюмировать следующим образом:

Если текущий элемент является плавающим элементом или неплавающим элементом блочного уровня, а ранее объявленный элемент является левым (правым) плавающим элементом, то текущий элемент может использовать clear:left (clear:right) для очистки предыдущего левый (правый) плавающий элемент левый (правый) плавающий элемент, текущий элемент будет отображаться в новой строке; если направление плавания текущего элемента clear отличается от направления плавания предыдущего плавающего элемента, текущий элемент не будет переноситься ;

5.6.3.3 Проблема слияния маржи после очистки плавающей позиции

1) Между двумя плавающими элементами их вертикальные поля не будут сливаться, как показано на следующем рисунке:

Будет ли слияние вертикальных полей между плавающими элементами?

2) Между неплавающими элементами блочного уровня и плавающими элементами их вертикальные поля будут сливаться, как показано на следующем рисунке:

Слияние полей происходит между неплавающими элементами блочного уровня и плавающими элементами.

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

Исходные слова MDN до исправления

5.6.3.4 Специальное приложение для очистки поплавка: решить проблему коллапса высоты родительского элемента

Как мы все знаем, когда все элементы в родительском элементе являются плавающими, родительский элемент не может распознать эти плавающие дочерние элементы, что в дальнейшем приведет к проблеме коллапса высоты родительского элемента. Распространенным решением является добавление неплавающего блочного элемента размера 0 (далее именуемого элементом fix) в конце родительского элемента, а затем использование clear:both для переноса элемента fix и отображения родительского элемента. , Способен определить высоту предыдущего ряда. Это простое решение на самом деле является основным принципом clearfix.Clearfix просто использует :after для более элегантной реализации элемента fix.

Специальное примечание: Чтобы решить проблему коллапса высоты родительского элемента, этого также можно добиться, объявив родительский элемент как элемент BFC.

5.6.4 Позиционирование (свойство position)

5.6.4.1 Классификация позиционирующих элементов

В соответствии со значением атрибута положения, статического (значение по умолчанию), относительного, абсолютного, фиксированного, элементы можно разделить на элементы статического позиционирования (статическое значение), элементы относительного позиционирования (относительное значение), элементы абсолютного позиционирования (абсолютное значение) и Фиксированный позиционированный элемент (фиксированное значение).

Примечание. Значение position также фиксировано, но IE11 его не поддерживает, поэтому здесь я не буду об этом говорить.

5.6.4.2 Принцип позиционирования

Относительная система координат при позиционировании элемента статического позиционирования: четыре свойства смещения сверху, справа, снизу и слева не могут быть установлены;

Относительная система координат при позиционировании элемента относительного позиционирования: исходное положение (область) элемента в документообороте;

Относительная система координат абсолютного позиционирования элемента позиционирования: нестатическое (включая относительное, абсолютное и фиксированное) позиционирование элемента-предка, ближайшего к элементу (содержащий блок является его padding box), если нет, то это ICB (начальный содержащий блок) , то есть корень Блок, содержащий элемент html;

Относительная система координат, когда установлен фиксированный элемент позиционирования: текущий вид просмотра;

5.6.5. поле строки (поле строки)

5.6.5.1 Определения

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

5.6.5.2 Структура модели (семь строк)

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

Обозначение линейного кадра

вОбласть от верхней строки до верхней строки текстаа такжеНижняя строка в область text-bottom, также известный как полуинтервал, сумма двух полуинтервалов является интерлиньяжем;Область от верхней строки текста до нижней строки текста, называемая областью контента. Как показано ниже:

деление области линейного поля

5.6.5.3 Расчет высоты строки строки

Высота линейного блока, то есть расстояние по вертикали между верхней и нижней строкой строки, это вертикальное расстояние представляет собой сумму высоты верхнего и нижнего полупространств строки и высоты области содержимого. . Факторы, влияющие на вычисление высоты блока строки, связаны с двумя аспектами: один — это настройка собственного свойства line-height, другой — значение высоты поля поля внутреннего подэлемента встроенного уровня и установка двух свойств line-height и vertical-align. Что касается правил расчета, то конкретный список выглядит следующим образом:

1. Высота строки элемента может быть установлена свойством line-height элемента;

2. На высоту строки элемента влияет высота содержимого (расстояние по вертикали от text-top до text-bottom) подэлементов, которые нельзя заменить (span, a, label и т. д.) ( на высоту контента также влияет свойство font-size и просмотр На него влияют правила синтаксического анализа браузера, но в основном он определяется размером шрифта; тот же размер шрифта, в разных браузерах расчетная высота контента отличается, и результирующая высота строки также отличается);

3. Высота строки элемента может быть задана атрибутом line-height подэлементов, которые не могут быть заменены (span, a, label и т.д.);

4. Высота линейного блока элемента может определяться высотой поля поля и атрибутом вертикального выравнивания заменяемого встроенного элемента (например, img) или подэлементов уровня встроенного блока, атрибуты отображения которых являются встроенными. block и inline-table. , когда вертикальное выравнивание имеет значение сверху или снизу, высота линейного блока достигает минимума, который равен высоте поля поля дочернего элемента;

Рис. 1. Высота поля поля элемента img меньше высоты строки строки

Рис. 2. Высота поля поля элемента img равна высоте поля строки, а высота поля линии достигает минимума

5. При одновременном выполнении вышеперечисленных условий настройки высота поля строки принимает максимальное значение;

Дружеское напоминание: вфигура 1 Высота поля поля элемента img меньше высоты строки строки, мы увидим, что внизу от элемента img до родительского элемента будет пустое место.Почему это происходит? Учитель Чжан Синьсюй определил это как «Углубленное понимание CSS дружбы между вертикальным выравниванием и высотой строки»."призрачный пустой узел", на самом деле, в сочетании с теорией линейного блока для объяснения, этот пробел не является «призраком», и его хорошо понимают: это расстояние по вертикали от базовой линии линейного блока до нижней линии, которое может быть помещено в пределах строка для таких элементов, как img и inline-block-level Элементы, такие как «текст», при анализе браузером по умолчанию отображаются на базовой линии, а не в нижней строке строки.

Например: Расчет высоты строки строки

html:

<style>

.line-box {

background: yellow;

line-height: 32px;

font-size: 20px;

}

.span-1 {

line-height: 40px;

background: red;

}

.span-2 {

line-height: 38px;

background: green;

}

img {

width: 50px;

height: 50px;

}

</style>

<body>

<span class="span-1">span(line-height: 40px)</span>

<span class="span-2">span(line-height: 38px)</span>

</div>

<span class="span-1">span(line-height: 40px)</span>

<span class="span-2">span(line-height: 38px)</span>

</div>

</body>

Показать результаты (в хроме):

Рисунок 1. Внутри линейной коробки только незаменяемые элементы

Рисунок 2. Внутри линейного бокса также есть заменяемый элемент img

проиллюстрировать:

А. Высота строки каждой строки элемента может быть установлена свойством line-height текущего элемента (32px) или свойством line-height дочерних элементов строки (40px и 38px соответственно), но наибольшая высота строки (40 пикселей), как показано на рисунке 1;

б. В частности, если есть заменяемый элемент, такой как img (высота: 50 пикселей), который может устанавливать высоту в строке, а высота img больше, чем установленная максимальная высота строки (40 пикселей), тогда строка будет растянуто вверх, просмотр Процессор пересчитает высоту строки (конечный результат равен 63 пикселям), как показано на рис. 2;

5.6.5.4. Два важных свойства, относящиеся к линейным блокам: высота строки и выравнивание по вертикали.

Я полагаю, что у многих студентов, изучающих интерфейс, есть такое ощущение: два атрибута line-height и vertical-align всегда неразделимы, и между ними существует нечеткая взаимосвязь.

Они как-то связаны?

На самом деле связь между этими двумя атрибутами может быть отражена строковым полем и элементом встроенного уровня в линейном поле. Свойство line-height определяет высоту строчного блока, в котором находится встроенный элемент, который представляет собой вертикальный диапазон отображения встроенного элемента в строке; свойство vertical-align определяет вертикальное выравнивание встроенного элемента. элемент уровня в строке, то есть определяет конечное вертикальное положение элемента встроенного уровня в строке. Давайте подробнее рассмотрим эти два свойства:

1) атрибут высоты строки

1.1) Роль атрибута line-height

Атрибут line-height обычно используется для блочных элементов, чтобы установить высоту каждой строки внутри него, то есть высоту строки по умолчанию; атрибут line-height также можно использовать для незаменяемых элементов (таких как span, а) установить высоту строки строки, где он расположен. Другими словами, на окончательную высоту строки, рассчитанную для каждой строки, влияет как атрибут line-height родительского элемента, так и атрибут line-height дочернего элемента.

1.2) Значение атрибута line-height

Значения line-height: , , и ключевое слово normal (значение по умолчанию). в:

указывает, что высота строки задается с использованием длины с указанными единицами измерения, которые могут быть px, pt, em и rem;
указывает, что высота строки задана кратным значению размера шрифта;
указывает, что высота строки задается в процентах от значения размера шрифта;
Окончательный расчетный размер ключевого слова normal зависит от соответствующего механизма синтаксического анализа браузера и выбранного типа семейства шрифтов: браузер рассчитает подходящее значение в соответствии с выбранным типом семейства шрифтов, официально рекомендованным W3C. Используйте значение, а рекомендуемый диапазон значений составляет от 1,0 до 1,2 (но после тестирования браузер гораздо сложнее реализовать, и между разными браузерами есть различия. Единственное, в чем можно быть уверенным, так это в том, что в итоге определенно будет больше чем значение размера шрифта).

Когда мы реализуем черновик пользовательского интерфейса в виде кода страницы, мы часто подчеркиваем необходимость восстановления черновика дизайна с помощью Pixel Perfect и высокой точности. но

Мы часто сталкиваемся с такой проблемой: когда мы оборачиваем текст блочным элементом, мы обнаружим, что высота блочного элемента на самом деле больше, чем размер шрифта текста, что приводит к некоторым пробелам вверху. и внизу, что еще больше вызывает блокировку. Расстояние между текстом внутри элемента первого уровня и соседним по вертикали элементом становится больше, как показано на следующем рисунке:

значение высоты строки нормальное

Эта ошибка возникает из-за того, что значение высоты строки по умолчанию является нормальным, так что же можно сделать, чтобы решить эту проблему? Более распространенным методом является установка высоты строки блочных элементов на 1 или 100%. Результат после настройки показан на следующем рисунке:

значение высоты строки равно 1 или 100%

Это тоже немного плохо, а именно: высота контента, окончательно проанализированного браузером, может быть больше, чем размер шрифта.Когда высота строки равна размеру шрифта, текстовое содержимое будет переполнено. Мы увеличиваем шрифт до 100 пикселей, и эффект переполнения очевиден, как показано на следующем рисунке:

значение высоты строки равно 1 или 100%

1.2) Влияние атрибута line-height на высоту элемента

Мы можем глубоко понять роль атрибута line-height, поняв влияние атрибута line-height на высоту блочного элемента и незаменяемого строчного элемента, а также влияние атрибута line-height не- заменяемый дочерний элемент на высоте родительского элемента.

Чтобы помочь вам лучше понять высоту строки, я разработал следующие три небольших демонстрации:

demo1: влияние атрибута line-height на высоту самого блочного элемента

html:

</body>

// div — это одна строка

div(line-height: 32px)

</div>

// div многострочный

div(line-height: 32px)

<br>

div(line-height: 32px)

</div>

</body>

Показать результаты (в хроме):

Рисунок 1. Когда div представляет собой одну строку

Рисунок 2. Когда div многострочный

проиллюстрировать:

а) когда блочный элемент не задает высоту, а блочный элемент имеет только одну строку, то его высота в точности равна line-height;

б) когда блочный элемент не задает высоту, а блочный элемент имеет несколько строк, тогда его высота точно равна сумме строк-высот каждой строки;

demo2: влияние атрибута line-height на высоту незаменяемых встроенных элементов (таких как span)

HTML:

span(line-height: 40px;font-size: 20px)

</span>

</div>

Показать результаты:

Рисунок 1. Когда встроенный элемент представляет собой одну строку, высота составляет 28 пикселей (под хромом)

Рисунок 2. Когда встроенный элемент находится в одной строке, высота составляет 20,5 пикселей (под фаерфоксом)

проиллюстрировать:

А. Когда незаменяемый встроенный элемент представляет собой одну строку, его высота равна расстоянию от верхней строки текста до нижней строки текста, поэтому значение высоты строки не повлияет на его высоту и его высоту. определяется размером шрифта и значением по умолчанию браузера.Определяется механизм анализа (обычно >font-size, размер зависит от механизма анализа браузера, как показано на рисунках 1 и 2);

б) когда не заменяемый элемент является многострочным, его высота равна расстоянию от верхней строки текста первой строки до нижней строки текста последней строки, при этом значение строки- height повлияет на его высоту, и его высота=высота строки * количество строк - (высота строки - расстояние от каждой строки text-top строки до text-bottom), то есть высота=высота строки * количество строк строки - 2 * полузаголовок, как показано на следующем рисунке:

Рис. 3. Когда встроенный элемент многострочный (под хромом)

demo3: высота строки незаменяемых дочерних элементов (таких как span), влияние на высоту родительского элемента

html:

<span class="span-1">span(line-height: 40px)</span>

<span class="span-2">span(line-height: 38px)</span>

<br>

<span class="span-3">span(line-height: 50px)</span>

</div>

Показать результаты (в хроме):

проиллюстрировать:

А. Высота каждого ряда блочных элементов может быть разной;

б) Атрибут line-height незаменяемого встроенного дочернего элемента может определять высоту строки, в которой он расположен;

в) если родительский элемент не задает высоту, то его высота равна сумме высот всех строк;

г. Атрибут line-height подэлемента незапланированной строки представляет собой высоту родительского элемента, влияя на высоту строки.

2) атрибут вертикального выравнивания

Одна из функций выравнивания по вертикали: используется для установки вертикального выравнивания самого элемента inline-level в «прямом поле», а диапазон его управления находится в пределах одной строки. Чаще используются значения top, middle, baseline (по умолчанию) и bottom, реже используются text-top, text-bottom, sub и super и реже используются и .

Обозначение линейного кадра

Функции нескольких важных значений свойства vertical-align следующие:

Когда вертикальное выравнивание принимает верхнее значение, это означает, что край верхнего поля текущего элемента встроенного уровня прикрепляется к верхнему краю линейного фрейма;

Если для вертикального выравнивания используется нижний край, это означает, что край нижнего поля текущего элемента встроенного уровня прикрепляется к нижней части линейного фрейма;

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

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

Еще одна функция свойства vertical-align заключается в том, что элемент table-cell используется для управления вертикальным выравниванием своих внутренних подэлементов, причем типы этих подэлементов не ограничены, не только span, но и div.

Например:

HTML:

<table>

<tr>

<td class="middle">div(middle)</td>

<td class="baseline">div(baseline)</td>

<td class="bottom">div(bottom)</td>

</tr>

</table>

Показать результаты:

проиллюстрировать:

А. Элемент table-cell устанавливает вертикальное выравнивание своих дочерних элементов, устанавливая собственное свойство vertical-align;

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

5.6.6. margin

В традиционной схеме макета поле используется не только для изоляции от соседних элементов или родительских элементов (обычно не рекомендуется изолировать родительские элементы), но также играет важную роль в центрировании элементов в горизонтальном и вертикальном направлениях. Рассмотрим подробнее особенности компоновки полей.

5.6.6.1 Правила расчета для авто (используется для ширины и поля)

1) Горизонтально

Когда речь заходит о том, «как установить блочный элемент в потоке документа, чтобы он располагался по центру по горизонтали внутри родительского элемента?», я полагаю, что многие студенты сразу же подумают об этом решении: установить фиксированную ширину для элемента и использовать поля : 0 авто (горизонтальное поле автоматически)

.child {

width: 100px;

margin: 0 auto;

}

Принцип его реализации включает в себя следующие четыре основных пункта знаний:

Правила расчета горизонтального размера (outerWidth, ширина поля) блочных элементов:

externalWidth = margin-left + border-left-width + padding-left + width + padding-right + border-right + margin-right, как показано на следующем рисунке:

Начальное значение атрибута размера блочного элемента в потоке документа в горизонтальном направлении, только ширина авто, остальные 0
Свойство размера в горизонтальном направлении, только width, margin-left и margin-right могут быть установлены на автоматическое значение (вычисляется автоматически)
Элемент блочного уровня в потоке документа, его атрибут size в горизонтальном направлении, когда значение auto, означает брать оставшуюся ширину строки, в частности, когда значения margin-left и margin-right оба auto, это будет Разделить оставшуюся ширину линии

После понимания вышеуказанных четырех основных пунктов знания нам нетрудно понять принцип:

Когда для атрибута размера блочного элемента в горизонтальном направлении, за исключением полей margin-left и margin-right, установлено значение auto, остальные значения являются фиксированными, тогда margin-left и margin-right автоматически делят оставшуюся ширину пополам. родительский элемент, а затем добиться эффекта горизонтального центрирования внутри родительского элемента, как показано на следующем рисунке:

Рисунок 1. Элементы находятся на внутреннем уровне родительского элемента (половина левого и правого полей)

Рисунок 2. Деконструированная диаграмма блочной модели горизонтально центрированных элементов

Объединив вышеуказанные четыре основных пункта знаний, мы также можем сделать следующие выводы:

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

2) Вертикально

Возможно, мы все задавались этим вопросом: поскольку мы можем установить margin: 0 auto, чтобы сделать элементы уровня блока в потоке документов центрированными по горизонтали внутри родительского элемента, можем ли мы установить margin: auto 0, чтобы сделать их центрированными по вертикали?

Ответ — нет, потому что для блочных элементов в документообороте правила расчета при авто отступе в вертикальном направлении отличаются от правил расчета в горизонтальном направлении: оставшаяся высота родительского элемента не берется, но 0. Оригинальные слова стандарта W3C следующие:

«Если для «margin-top» или «margin-bottom» установлено значение «auto», их используемое значение равно 0″.

Вы спросите, а почему так устроено? Объяснения чиновник не дал, но некоторые пользователи сети дали следующие пояснения, которые приведены ниже для ознакомления (вы можете поделиться своим мнением в сообщении, я согласен с первым):

Это может быть из-за типичного вертикального потока страницы, когда размер страницы увеличивается по высоте, поэтому центрирование элемента по вертикали в его контейнере не сделает его центрированным относительно самой страницы, в отличие от того, когда это делается по горизонтали. (в большинстве случаев).

И, может быть, по этой же причине решили добавить исключение для абсолютных элементов, которые можно центрировать по вертикали по всей высоте страницы.

Это также может быть связано с эффектом коллапса полей (схлопывание полей соседних элементов), что является еще одним исключением для вертикальных полей.

В стандартной спецификации W3C, хотя margin: auto 0 нельзя использовать для достижения вертикального центрирования элементов уровня блока в обычном потоке документа внутри родительского элемента, margin: auto 0 можно использовать для достижения вертикального центрирования элементов абсолютного или фиксированного позиционирования внутри содержащий блок , поскольку поле в вертикальном направлении элемента абсолютного или фиксированного позиционирования, его auto по-прежнему будет занимать оставшуюся высоту содержащего блока.Формула расчета, приведенная в официальном документе W3C, выглядит следующим образом:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

Эквивалентная упрощенная формула:

Дочерний элемент externalHeight = содержит высоту блока - верх дочернего элемента - низ дочернего элемента

намекать:

1. externalHeight дочернего элемента относится к высоте поля поля текущего дочернего элемента;

2. Содержит высоту блока, которая может быть высотой поля заполнения, высотой ICB или высотой окна просмотра относительного позиционирующего элемента системы отсчета текущего дочернего элемента;

Чтобы использовать приведенные выше правила для достижения вертикального центрирования дочернего элемента внутри родительского элемента, вам необходимо убедиться, что:

Верхнее значение + нижнее значение дочернего элемента равно 0 (причина: сделать externalHeight дочернего элемента равным высоте содержащего блока)
Верхнее значение дочернего элемента равно 0 (причина: пусть верхний край поля дочернего элемента будет близок к верхней части содержащего блока)

Ниже приводится подробное введение через демонстрацию:

html:

<style>

.parent {

position: relative;

background: yellow;

height: 100px;

}

.child {

position: absolute;

top: 0;

bottom: 0;

background: green;

width: 140px;

height: 20px;

margin: auto 0;

text-align: center;

}

</style>

<body>

вертикально центрированный дочерний элемент

</div>

</body>

Показать результаты:

Рис. 1. Дочерний элемент вертикально центрирован внутри родительского элемента (половина верхнего и нижнего полей)

Рис. 2. Деконструированная диаграмма блочной модели для вертикально центрируемых элементов

проиллюстрировать:

А. Верх абсолютно позиционированного дочернего элемента равен 0, а верхняя граница его контура (включая поля) близка к верху области содержимого содержащего блока;

б) найти неизвестное из известного: высота содержащего блока известна, сумма верхнего и нижнего значений дочернего элемента равна 0, то есть можно получить externalHeight дочернего элемента, а поскольку высота дочернего элемента известна, остаточное значение в вертикальном направлении Высота может быть определена.Когда верхняя и нижняя границы дочернего элемента являются автоматическими, оставшаяся высота будет разделена поровну;

5.6.6.2. крах рушится

В вертикальном направлении сам элемент или соседние братья и сестры, родительский элемент, дочерние элементы margin будут объединены (примечание: родительский элемент margin будет изолирован в вертикальном направлении дочерним элементом IE6/7, а не родительским элементом и маржа слияния, IE8+ с тем же стандартным браузером), в зависимости от того, какая маржа больше, а в горизонтальном направлении — нет. Члены из следующих демонстрационных трех читалок, чтобы понять комбинированную маржу в вертикальном направлении:

1) Родительский элемент и дочерний элемент (первый дочерний элемент, последний дочерний элемент)

HTML:

первый дочерний элемент (margin-top: 20px)

Последний дочерний элемент (нижнее поле: 20 пикселей)

</div>

Показать результаты:

проиллюстрировать:

А. Верхнее поле (40 пикселей) родительского элемента (желтый) и верхнее поле (20 пикселей) первого дочернего элемента сливаются (возьмите большее 40 пикселей);

б) нижняя граница (40px) родительского элемента (желтая) и нижняя граница (20px) последнего дочернего элемента сливаются (возьмите большее 40px);

2) Вверх и вниз по соседним одноуровневым элементам (элементы одного слоя)

HTML:

первый элемент (нижнее поле: 40px)

Второй элемент (верхнее поле: 20 пикселей)

</div>

Показать результаты:

проиллюстрировать:

А. Нижняя граница (40 пикселей) первого элемента и верхняя граница (20 пикселей) второго элемента сливаются (возьмите большее значение 40 пикселей);

3) Пустые элементы блочного уровня

HTML:

Первая строка

Вторая строка

Показать результаты:

проиллюстрировать:

Пустая область между двумя строками, пустой блочный элемент;

б) верхнее поле пустого блока составляет 40 пикселей, а нижнее поле — 20 пикселей;

C. Расстояние между двумя линиями составляет 40 пикселей.Видно, что верхнее поле и нижнее поле пустого элемента блока объединены, и берется большее значение;

Здесь мы приводим три примера слияния полей в вертикальном направлении, но внимательные учащиеся могут помнить, что мы находимся вРаздел «5.6.3.3. Проблема слияния маржи после очистки поплавков»,Вот пример, когда слияние полей не происходит в вертикальном направлении: слияние полей между плавающими элементами не происходит в вертикальном направлении.

5.6.6.3 Поля дочерних элементов изолируют родительские элементы

Внимательному читателю нетрудно обнаружить, что в демонстрации «2) можно увидеть соседние одноуровневые элементы (элементы одного слоя)».

Вертикальное поле дочернего элемента (зеленый) не изолирует себя от родительского элемента (желтый) (IE6/7 делает, IE8+ нет).

Итак, при каких обстоятельствах поле дочернего элемента может быть изолировано от родительского элемента?

Первое, что следует подчеркнуть, это то, что горизонтальное поле дочернего элемента всегда может изолировать родительский элемент, однако вертикальное поле дочернего элемента изолирует родительский элемент, и я записал только следующие четыре (пожалуйста, добавьте):

case 1:Родительский элемент является элементом BFC.

HTML:

дочерний элемент (поле: 20px)

</div>

Показать результаты:

проиллюстрировать:

А. Родительский элемент (желтый) является элементом BFC, а вертикальное поле дочернего элемента (зеленое) может изолировать родительский элемент;

случай 2:родительский элемент имеет границу

HTML:

дочерний элемент (поле: 20px)

</div>

Показать результаты:

проиллюстрировать:

А. Родительский элемент (желтый) имеет границу, а вертикальное поле дочернего элемента (зеленый) может изолировать родительский элемент;

случай 3:Родительский элемент имеет отступы

HTML:

дочерний элемент (поле: 20px)

</div>

Показать результаты:

проиллюстрировать:

А. Родительский элемент (желтый) имеет отступы, а вертикальное поле дочернего элемента (зеленый) может изолировать родительский элемент;

case 4: дочерний элемент — это заменяемый элемент или элемент, отображаемый в виде встроенного блока, встроенной таблицы, заголовка таблицы.

HTML:

<style>

.parent {

background: yellow;

width: 100%;

height: 60px;

line-height: 20px;

}

.inline-block {

display: inline-block;

}

.inline-table {

display: inline-table;

}

img, .inline-block, .inline-table {

border: 1px solid green;

height: 20px;

min-width: 20px;

margin-top: 10px;

vertical-align: top;

}

</style>

<body>

<div class="inline-block">display: inline-block </div>

<div class="inline-table">display: inline-table</div>

</div>

</body>

Показать результаты:

проиллюстрировать:

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

Вот краткое изложение слияния полей и изоляции полей Я перечислил все примеры слияния полей и непроисходящего объединения полей в вертикальном направлении, а также изоляцию полей и изоляцию полей, с которыми я столкнулся (однако это всего лишь пример стандартный браузер, в IE6/7 ситуация будет иной, но, поскольку он больше не совместим с более ранними версиями IE, он не будет указан). Цель состоит не в том, чтобы все запомнили это, а в том, чтобы все избегали этого: в вертикальном направлении старайтесь не устанавливать смежные поля между одноуровневыми элементами и не используйте поля для дочерних элементов, чтобы изолировать родительские элементы, чтобы обеспечить CSS как можно больше Код имеет лучшую совместимость (согласованное отображение) в различных версиях браузеров.

7. Заключение

Эта статья начинается с пяти модулей блочной модели CSS и истории ее развития, классификации элементов и характеристик их компоновки, контекста форматирования (Formatting Context), содержащего блока, основных принципов (документооборот, плавание, очистка плавания, позиционирование, линейный блок, margin). , Система представляет основу макета внешнего интерфейса. Я надеюсь, что этот обмен даст читателям низкоуровневое и систематическое представление об основном макете внешнего интерфейса. Поскольку содержание слишком широкое, неизбежно будут ошибки, и я надеюсь простить и исправить меня.

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

Спустя полгода многие друзья все еще подписаны на мой официальный аккаунт, спасибо за вашу поддержку. Этот запоздалый обмен, я надеюсь, что он может быть вам полезен, и я сделаю все возможное, чтобы поделиться другими статьями, которые будут вам полезны позже.

Напоследок хочу поделиться еще некоторыми мыслями и опытом:

Не стоит недооценивать простые

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

Не слишком доверяйте авторитетам, но научитесь проверять, обобщать и строить свою собственную систему знаний.
Чтобы изучить технологию, смотрите официальные документы

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

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

адрес демо-кода

https://github.com/momopig/simplicity/tree/master/06:layout