предисловие
Внезапно в один прекрасный день у меня в голове выскочило слово "Double Flying Wings". Это трехколоночная схема оптимизации макета, предложенная Taobao давным-давно. ) Почему вы хотите предложить именно этот макет? Вчера был вопрос запустил на СФ,но долго никто не отвечал.К счастью,Кто такой @王能全?Напоминаю, я наконец-то вспомнил полное значение «Двойных летающих крыльев». Я хотел бы поделиться этим путешествием с вами в этой статье.
Святой Грааль и Двойные Крылья
Когда дело доходит до «Double Flying Wings», мы должны упомянуть «Святой Грааль», оба из которых являются оптимизированными решениями для макета с тремя столбцами, как показано ниже.
Обычно наша рамка макета записывается следующим образом, сверху вниз и слева направо.
<header>header</header>
<section>
<aside>left</aside>
<section>main</section>
<aside>right</aside>
</section>
<footer>footer</footer>Проблема не проблема, однако, если мы хотим, чтобы центральная основная часть отображалась первой, мы можем сделать оптимизацию макета.
Поскольку движок рендеринга браузера строит и рендерит дерево рендеринга асинхронно (кто бы ни построил его первым, тот и отобразит его первым), тогда<section>main</section>Части могут быть вынесены заранее заранее.
<header>header</header>
<section>
<section>main</section>
<aside>left</aside>
<aside>right</aside>
</section>
<footer>footer</footer>Итак, иностранные предшественники выдвинули «священную букву», и цель состоит в том, чтобы сотрудничать с структурой DOM в CSS, оптимизировать рендеринг DOM.
Кратко рассмотрим раскладку «Святой Грааль», не в этом дело.
Макет Святого Грааля
<template>
<header>header</header>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>
<style>
/* 以下为简码，仅保留关键部分 */
header,footer {height: 50px;}
.wrapper {padding: 0 100px 0 100px; overflow:hidden;}
.col {position: relative; float: left;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
</style>использовалrelative 相对定位,float(если необходимо, пожалуйста, плавайте, используйте здесьoverflow:hidden;Методы и负值 margin, "устанавливает" левую и правую части вwrapperС обеих сторон, как имя «Святой Грааль». Конкретные идеи повторять не буду, пояснения есть везде в интернете.
Проблемы со Святым Граалем
Конечно, в нормальных условиях проблем не возникает, но в особых случаях недостатки такого решения обнажаются: если браузер сузить по беспроводной сети, то «Святой Грааль» будет «сломан». Как показано, когдаmainШирина детали меньшеleftПроисходит частичная путаница макета.
Поэтому Taobao Soft оптимизировала недостатки «Святого Грааля» и предложила компоновку «Двойное летающее крыло».
Двухстворчатая компоновка
Точно так же давайте посмотрим на шорткод
<template>
<header>header</header>
<section class="wrapper">
<section class="col main">
<section class="main-wrap">main</section>
</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>
<style>
/* 以下为简码，仅保留关键部分 */
header,footer {height: 50px;}
.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
</style>также используетсяfloatа также负值 margin, разница в том, что он не используетсяrelative 相对定位Вместо этого добавляется структура dom, добавляющая уровень. Действительно устраняет недостатки макета Святого Грааля.
Зачем проектировать макет «Двойное летающее крыло»
Компоновка двойного летающего крыла выглядит превосходно на первый взгляд, но если подумать, зачем добавлять дополнительный слой узлов дерева dom, разве это не увеличивает количество вычислений при объединении таблицы правил стиля CSS и дерева dom в единое целое? дерево компоновки?
Кажется, что абсолютное позиционирование также может решить эту проблему.
Подумайте об этом, мы можем использовать абсолютную компоновку, чтобы расположить левую и правую боковые панели с обеих сторон? Вроде с раскладкой Holy Grail проблем не будет?
<template>
<header>header</header>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
<footer>footer</footer>
</template>
<style>
/* 以下为简码，仅保留关键部分 */
header,footer { height: 50px;}
.wrapper { position: relative;}
.main { height: 200px; margin:0 100px;}
.left, .right{ width: 100px; height: 200px; position: absolute; top: 0;}
.left{ left: 0;}
.right{ right: 0;}
</style>не использовалfloat(не нужно плавать, пожалуйста) ни负值 margin, используя толькоabsolute 绝对定位, кажется лучше?
Но подумайте об этом внимательно, есть проблема с чистым абсолютным позиционированием, «крайне неуправляемым», мы предполагаем, что еслиleftВысота секции вышеmain,не так лиleftнеспособность удержать целоеwrapper?
"Четыре из четырех"~~!
Тогда давайте посмотрим на ситуацию с двойными крыльями и Святым Граалем.
Все на фото ниже.
"Должен быть зарезан"~~!
Так что похоже, что все программы имеют те или иные проблемы в большей или меньшей степени. В совокупности независимо отleft, main, rightРазмер "Double Flying Wings" может отображаться нормально, гм~ Это действительно превосходно.
молоток и гвозди
Подводя итог, компоновка "Double Flying Wings" еще лучше. Однако это проблема «молотка и гвоздей», мы должны искать молоток с гвоздем, а не гвоздь с молотком, потому что, когда у вас есть самый большой молоток, все, что вы видите, это гвоздь.
О~, я снова притворяюсь. \(￣︶￣)/
Грубо говоря, то есть нет лучшего решения, есть только самое подходящее. Что касается трехколоночной верстки, я помогу вам составить сравнительную таблицу, чтобы вы могли быстро выбрать.
| преимущество | недостаток | |
|---|---|---|
| Святой Грааль | Простая структура, без лишних слоев dom | Макет перепутался, когда ширина средней части меньше, чем левая сторона |
| абсолютное позиционирование | Простая структура и нет необходимости очищать поплавок | Высота с обеих сторон не может поддерживать общую высоту |
| Летающее крыло | Поддержка различных изменений ширины и высоты, высокая универсальность | Дополнительный слой структуры dom увеличивает количество вычислений генерации дерева рендеринга. |
Вышеизложенное является моим личным пониманием.Если что-то не так или что-то, что можно добавить, пожалуйста, дайте указатели.
Кроме того, про схему вёрстки CSS и раздел оптимизации производительности фронтенда переместите в статью
Сводная информация о многострочных и многоколоночных схемах компоновки классов
Сводка по оптимизации производительности внешнего интерфейса
Перепечатка с указанием источника
автор:деревянное перо
Первый адрес:GitHub.com/как будет/блог…