Интервьюер: Сколько трехколоночных макетов вы знаете?

CSS опрос
Интервьюер: Сколько трехколоночных макетов вы знаете?

Шесть способов реализовать трехколоночный макет

Хотя немного немного, упор делается на накопление

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

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

三栏布局

Реализуйте трехколоночный макет (известная высота), левая и правая ширина 300px, средний адаптивный, у вас есть несколько способов

  • floatплавающий макет

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

    <section class="layout">
    <article class="float">
        <div class="float_left"></div>
        <div class="float_right"></div>
        <div class="float_center">
            <h1>使用浮动实现解决三栏布局</h1>
        </div>
    </article>
</section>

/* float */
.layout article div {
    min-height: 100px;
}
  
.float_left {
    float: left;
    width: 300px;
    background-color: yellowgreen;
}
  
.float_right {
    float: right;
    width: 300px;
    background-color: yellowgreen;
}
  
.float_center {
    background-color: tomato;
}

  • макет позиционирования позиции

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

    <article class="position">
    <div class="position_left"></div>
    <div class="position_right"></div>
    <div class="position_center">
        <h1>使用绝对定位实现解决三栏布局</h1>
    </div>
</article>

    /* position 定位布局 */
.layout .position div {
    position: absolute;
    min-height: 100px;
}
  
.layout .position .position_left {
    left: 0;
    width: 300px;
    background-color: violet;
}
  
.layout .position .position_right {
    right: 0;
    width: 300px;
    background-color: violet;
}
  
.layout .position .position_center {
    right: 300px;
    left: 300px;
    background-color: yellow
}

  • Макет Flex-box

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

    <section class="layout">
        <article class="flex">
            <div class="flex_left"></div>
            <div class="flex_center">
                <h1>使用flexBox实现解决三栏布局</h1>
            </div>
            <div class="flex_right"></div>
        </article>
    </section>

    /* flex 定位布局 */
.layout .flex {
    display: flex;
    min-height: 100px;
}
  
.flex_left {
    width: 300px;
    background-color: tomato;
}
  
.flex_right {
    width: 300px;
    background-color: tomato;
}
  
.flex_center {
    flex: 1;
    background-color: violet;
}

  • макет таблицы

    Макет таблицы — это макет, который был исключен. Чтобы использовать макет таблицы, вам нужно определить внешний блокdisplay:table, определение внутреннего блокаdiplay:table-cell, а затем давать левую и правую ширины отдельно, а средний можно сделать адаптивным.Обобщим, почему он был устранен, его преимущества и недостатки, а теперь посмотрим, как этого добиться.

    <section class="layout">
    <article class="table">
        <div class="table_left"></div>
        <div class="table_center">
            <h1>使用table实现解决三栏布局</h1>
        </div>
        <div class="table_right"></div>
    </article>
</section>

    /* table布局 */
.layout .table {
    display: table;
    width: 100%;
    height: 100px;
}
  
.layout .table div {
    display: table-cell;
}
  
.table_left {
    width: 300px;
    background-color: violet;
}
  
.table_right {
    width: 300px;
    background: blue;
}
  
.table_center {
    background: turquoise;
}

  • Макет сетки

    Что касается макета сетки, я также написал статью ранее.Как двухмерный макет, причина, по которой сетка в настоящее время недостаточно популярна, заключается в том, что ее совместимость не так хороша, как временная гибкая компоновка, и flex теперь способен абсолютно все.Большинства раскладок больше нет. Лично я считаю, что мы можем попытаться внедрить его в некоторые текущие проекты.В качестве стандарта макета следующего поколения CSS3 макет сетки очень волшебен и перспективен во многих местах.Проект Electron может полностью использовать функцию сетки CSS. (личное предложение взглянуть на это, если вы не имеете к этому никакого отношения, это удивительно и интересно), не говорите чушь, просто перейдите к коду

    <section class="layout">
    <article class="grid">
        <div class="grid_left"></div>
        <div class="grid_center">
            <h1>使用grid实现解决三栏布局</h1>
        </div>
        <div class="grid_right"></div>
    </article>
</section>

    /* grid布局 */
.layout .grid {
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
}
  
.grid_left {
    background-color: #cf54cf;
}
  
.grid_right {
    background: #0202bb;
}
  
.grid_center {
    background: #0fdf43;
}

фактический эффект

三栏布局的实现

анализировать

  • Преимущества и недостатки поплавка

    преимуществоПростой, как один из первых методов компоновки, его совместимость несомненна, а компоновка проста.

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

  • макет позиционирования позиции

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

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

  • гибкий макет

    преимуществоМакет felxbox является новым в CSS3 и идеально подходит для устранения недостатков двух вышеупомянутых методов. В настоящее время макет мобильного терминала также использует flexbox. Также мой личный любимый макет

    недостатокНе совместим с браузерами IE8 и ниже.

  • раскладка стола

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

    недостатокНедостатки табличной компоновки по-прежнему очевидны. Она эквивалентна другим компоновкам. Относительно громоздка в использовании, объем кода большой, а также есть дефекты. Когда сетка ячейки превышает высоту, две стороны будут срабатывать вместе и вместе становиться выше Это явно не то, что мы хотим видеть.

  • Макет сетки

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

    недостатокВ настоящее время совместимость не достигла точки широкого распространения, и в таких браузерах, как chrome и Firefox, все еще есть ошибки, которые не были исправлены.

расширять

Если вы внимательно прочитали эту статью, я полагаю, что у вас есть относительно глубокое понимание базовой трехколоночной верстки.Изучение этих пяти способов письма также поможет вам по-новому мыслить при верстке, но это не так. Достаточно. Мы Что следует учитывать, так это то, что текущей теме задана известная высота. Если высота также неизвестна, как ее достичь? Если верх и низ фиксированы, то середина адаптивная, макет двухколоночный, а верхняя, нижняя, левая и правая смешанная компоновка — все это следует изучить Да, все знают базовую компоновку, но если вы хотите углубиться, я считаю, что вам нужно присмотреться.

Вот некоторые интересные, но редко используемые знания CSS для вас.

  • Caret-colorВы можете изменить цвет курсора.Вы можете попробовать добавить этот атрибут к вводу, чтобы увидеть

  • shape-outsideФорму коробки можно изменить, тем самым изменив компоновку.

  • display: flow-rootТип плавающего BFC, обычно используемый, как правило,clear:both overflower:hidden

  • text-size-adjustРешите проблему, что браузер позволяет установить минимальный шрифт 12 пикселей, есть проблема совместимости, вы можете использовать масштаб, чтобы уменьшить проблему

  • margin:autoЭто свойство не является чем-то необычным, но оно удивительно, когда вы используете его с flex, внешним блоком.display:flex, все коробки во внутреннем слоеmaegin:autoЭто свойство эквивалентно*justify-content*: space-around;*align-items*: center;

  • justify-content*: space-evenlyотличный отspace-aroundЭто полное равномерное распределение подбоксов, что очень удобно в некоторых сценариях

  • flex-growКогда сумма flex-grow меньше 1, пропорционально может быть выделена только часть оставшегося пространства, а не все

  • input宽度Ширина ввода не изменяется присваиванием после блока, его ширина зависит от значения size

  • positionПри абсолютном позиционировании и фиксированном позиционировании одновременное задание левого и правого положения эквивалентно неявному заданию ширины.

  • position:stickyЛипкое позиционирование, позиционирование на определенной высоте, некоторым домам очень удобно доставать до верха окна

  • rgbaКогда необходимо установить прозрачный фон, фон может напрямую устанавливать rgba, что эквивалентно фону + непрозрачности.

  • transparentУказывает, что прозрачный цвет эквивалентен rgba(0,0,0,0), например, при написании треугольника установите прозрачный цвет для трехсторонней границы и задайте цвет, чтобы получился треугольник

  • text-indentОтступ, вы можете установить отрицательное значение, чтобы скрыть текст, используйтеfong-size:0pxВы также можете скрыть текстовое содержимое

  • background:concic-gradient(red 0 30%,green 30% 60%,blue 60% 100%)Угловой градиент может использовать CSS для рисования круговой диаграммы

  • background-attachmentУказывает, как фон прикрепляется к контейнеру.Фон может быть фиксированным и не сдвигаться по высоте окна.

  • outlineВ отличие от бордюра не занимает места, что равносильно перекрытию и не увеличивает ширину и высоту коробки, может быть внутри и снаружи.

  • animation-delayЛенивая загрузка анимаций, позволяющая добиться множества перекрестных эффектов.

  • object-fit:coverПосле того, как изображение установлено на фиксированную ширину и высоту, пропорции могут быть сохранены через него, а кино также может быть

  • cursor:not-allowedУстановите состояние отключения мыши, не забудьте добавить его, когда кнопка отключена

  • filter:blur(10px)Размытое размытие фона, иногда удобно

  • fill-availableширина набивки,

Это может быть добавлено позже, различные полезные, но не часто используемые свойства css, если есть какие-либо проблемы, добро пожаловать, чтобы исправить это.

Категории