Как реализовать макет Святого Грааля в «Вопросах для предварительного собеседования, серия 2»?

опрос
Как реализовать макет Святого Грааля в «Вопросах для предварительного собеседования, серия 2»?

предисловие

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

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

В этой статье будет представлен принцип классической вёрстки — вёрстка Holy Grail и два метода реализации: float и flex.

Что такое макет Святого Грааля?

Макет Святого Грааля должен обсудить реализацию «жидкого макета с тремя столбцами», самая ранняя совершенная реализация - это статья, написанная Мэтью Левином в 2006 году.«В поисках Святого Грааля», который в основном рассказывает о том, как лучше всего достичь Святого Грааля на веб-страницах.

Он имеет следующие требования:

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

Далее будут представлены два метода реализации. Их конечный эффект такой же, как показано ниже:

Метод реализации 1: плавающий

Сначала код:

<div class="header">
    <h4>header</h4>
</div>

<div class="container">
    <div class="middle">
        <h4>middle</h4>
        <p>middle-content</p>
    </div>
    
    <div class="left">
        <h4>left</h4>
        <p>left-content</p>
    </div>
    
    <div class="right">
        <h4>right</h4>
        <p>right-content</p>
    </div>
</div>

<div class="footer">
    <h4>footer</h4>
</div>

.header, .footer {
    border: 1px solid #333;
    background: #ccc;
    text-align: center;
}
.footer {
    clear: both;
}

.container {
    padding:0 220px 0 200px;
    overflow: hidden;
}
.left, .middle, .right {
    position: relative;
    float: left;
    min-height: 130px;
}
.middle {
   width: 100%;
    background: blue;
}
.left {
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background: red;
}
.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: green;
}

Проанализируйте идею:

  • В html сначала определите стили верхнего и нижнего колонтитула, чтобы они заполнялись по горизонтали.
  • Три столбца в контейнере настроены на плавающее и относительное позиционирование (которое будет использоваться позже), средний должен быть помещен впереди, а нижний колонтитул должен быть очищен для плавающего положения.
  • Левый и правый столбцы трех столбцов установлены на 200 пикселей и 220 пикселей соответственно, а средняя часть заполнена на 100%.
  • Таким образом, из-за плавающих отношений середина будет занимать весь контейнер, а левая и правая области будут выдавлены.
  • Далее установите левыйmargin-left: -100%;, позвольте левому вернуться к самой левой стороне предыдущей строки
  • Но это закроет середину, поэтому в это время установите внешний контейнер.padding: 0 220px 0 200px;, чтобы освободить место для левого
  • В настоящее время левый не крайний левый, потому что относительное позиционирование было задано ранее, поэтому передайтеleft: -200px;Потяните левый назад в крайнее левое положение
  • Аналогично, для правой области установитеmargin-left: -220px;потяните право назад к первой линии
  • В этом случае пустое место справа от 220 пикселей, окончательный набор `right: -220px; ## вытянут справа от правой области на линии.

Метод реализации 2: гибкая эластичная коробка

Использовать flexbox для создания макета Holy Grail очень просто, вам нужно использовать flex layout только для средней части.

<div class="header">
    <h4>header</h4>
</div>

<div class="container">
    <div class="left">
        <h4>left</h4>
        <p>left-content</p>
    </div>
    
    <div class="middle">
        <h4>middle</h4>
        <p>middle-content</p>
    </div>
    
    <div class="right">
        <h4>right</h4>
        <p>right-content</p>
    </div>
</div>

<div class="footer">
    <h4>footer</h4>
</div>

.header, .footer {
    border: 1px solid #333;
    background: #ccc;
    text-align: center;
}

.container {
    display: flex;
}
.left {
    width: 200px;
    background: red;
}
.middle {
    flex: 1;
    background: blue;
}
.right {
    width: 220px;
    background: green;
}

Проанализируйте идею:

  • Верхний и нижний колонтитулы такие же, как и выше, полностью по горизонтали. Больше не нужно очищать и перемещать нижний колонтитул
  • Левое, среднее и правое в контейнере можно расположить последовательно, и нет необходимости размещать среднее впереди.
  • Установить гибкий макет для контейнераdisplay: flex;
  • ЛЕВАЯ и ПРАВАЯ область, средние настройкиflex: 1;Только что

Суммировать

В общем, эластичная компоновка является наиболее подходящим методом реализации макета Святого Грааля.По сравнению с плавающей структурой эластичной компоновки она более понятна и понятна, и нет необходимости беспокоиться о проблеме адаптации мобильного терминала.

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

Обновление (2019-01-17)

Спасибо @shenmo за предложение, я добавлю его сюда.

Еще одно ядро ​​макета Святого Грааля:Важный контент загружается первым. Как и в этой статье, средний находится спереди, а левый и правый - сзади.

PS: Добро пожаловать, чтобы обратить внимание на мою общедоступную учетную запись «Super Brother Front-end Small Stack», чтобы обменяться идеями и технологиями.

Категории