В последние годы, с непрерывным развитием передовых технологий, роль переднего плана становится все более и более важной, а обязанности становятся все больше и больше. Внешний интерфейс отвечает не только за простые страницы отображения контента, но и не отвечает за простые взаимодействия с формами. По мере усложнения интерфейсных технологий JavaScript занимает все более важное место в наших сердцах, и, соответственно, многие люди начинают игнорировать html и css.
"
JavaScript важен, но, оглядываясь назад, как фронтенд-работник, можем ли мы избежать работы со страницами? Ответ да, нет!
Итак, если вам дали проект дизайна, как мы это сделаем?
В этой главе основное внимание уделяется некоторым древним и практическим принципам и реализациям двух- и трехколоночного макета. Он древний, главным образом потому, что мы не будем иметь дело с волшебными макетами, такими как flex, хотя я также знаю, что flex можно использовать для легкого создания большого количества макетов.
Сделать эту статью, с одной стороны, - это сделать отчет самому себе, в качестве обзора. С другой стороны, я также надеюсь помочь новичкам, читающим эту статью, получить вдохновение и открыть путь более глубокого исследования.
макет в два столбца
Макеты с двумя столбцами очень распространены и часто существуют рядом со столбцом фиксированной ширины и адаптивным столбцом. Например:
Также очень просто реализовать макет с двумя столбцами.Далее мы представим простойfloat + marginРеализация.
Предположим, что левый столбец является фиксированным, а правый — адаптивным.
идеи
- Используйте float для перемещения левого столбца
- Правый модуль использует margin-left, чтобы удерживать блок контента для отображения контента.
выполнить
html структура контента
<body>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
内容内容内容
</body>css-правила
.left {
float: left;
width: 200px;
background-color: gray;
height: 400px;
}
.right {
margin-left: 210px;
background-color: lightgray;
height: 200px;
}Эффект
Эммм... Двойные столбцы сработали, но как поднялся остальной контент ниже? Ответ заключается в том, что мы используем поплавки.
плавать
Плавающий элемент выпадает из нормального потока документа. Элементы могут перемещаться влево или вправо, пока они не коснутся содержащего блока или других блоков. В исходном документообороте он как бы удален в исходном положении.
Следовательно, вышеупомянутое поплавок приводит к тому, что высота родительского элемента коллапса, а другие блоки содержания автоматически набираются. Решения:
-
Добавьте четкие плавающие элементы или псевдоэлементы для прозрачного плавающего, и добавьте четкие стили для связанных элементов:
clear:both;
-
BFC (контекст блочного форматирования), контекст форматирования на уровне блоков. BFC определяет, как размещаются внутренние элементы блочного уровня. Использование BFC может использоваться для содержания плавающих элементов. Обычной практикой является добавление к родительскому элементу:
overflow:hidden;
Создать BFC
Один из способов избавиться от флотации — создать BFC. Однако существует более одного способа создания BFC: «overflow:hidden;», на самом деле мы можем отобразить триггер BFC с помощью этих методов:
- Значение float не равно none.
- Значение переполнения не видно.
- Значение position не является относительным и статическим.
- Значение display может быть любым из table-cell, table-caption, inline-block.
Возвращаясь к теме, наш макет с двумя столбцами (и фактически другие макеты с плавающими элементами) решил проблему схлопывания высоты родительского элемента.Например, нам нужно только добавить стили к элементу .box:
overflow: hidden;Эффект двойной колонки после создания BFC
Макет с тремя колонками
Макет с тремя колонками также является одним из макетов, которые мы часто используем. Его основные особенности: фиксированная ширина с обеих сторон, адаптивная посередине.
пройти черезposition + marginРеализация трехколоночного макета
идеи
- Родительский элемент позиционируется относительно, а левый и правый столбцы фиксируются абсолютным позиционированием.
- Установите левое и правое поля через поле, оставив блок содержимого
выполнить
html структура контента
<div class="box">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>установить правила css
.box {
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: gray;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background-color: gray;
}
.middle {
margin-left: 210px;
margin-right: 210px;
background-color: lightgray;
height: 200px;
}Эффект
Трехколоночный макет с плавающей запятой
идеи
- Используйте float, чтобы переместить левый и правый столбцы в соответствующую позицию.
- Средний столбец растянут свойством margin
выполнить
html структура контента
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
</div>установить правила css
.box {
overflow: hidden;
}
.left {
float: left;
background-color: gray;
width: 200px;
height: 200px;
}
.right {
float: right;
background-color: gray;
width: 200px;
height: 200px;
}
.middle {
height: 200px;
background-color: lightgray;
margin-left: 210px;
margin-right: 210px;
}Эффект
недостаток
Конечно, у трехколоночной верстки, реализованной с помощью float, есть очевидный недостаток, то есть структура html-контента неверна на уровне кода, мы должны поставить элемент .middle внизу вместо средней позиции, которая генерируется плавающие, вызванные влиянием макета.
Макет Святого Грааля и макет двойного крыла
Макет Святого Грааля был впервые опубликован в 2006 году.In Search of the Holy Grail · An A List Apart Article, а схема с двойным летающим крылом заимствована у Taobao UED.
Макет Holy Grail и макет двойного летающего крыла также представляют собой трехколоночные макеты с фиксированной шириной с обеих сторон и адаптивной посередине. И средний столбец должен быть помещен в первую дочернюю позицию родительского элемента, чтобы отдать приоритет рендерингу. Поэтому некоторые скажут, что это приводит к неправильной структуре html-контента на уровне кода. Однако преимущество этого заключается в том, что более важные средние части могут быть отрисованы первыми, что может быть лучшей структурой с этой точки зрения.
Планировка Holy Grail и двухстворчатая планировка имеют как сходства, так и различия, давайте сравним их далее.
А пока взгляните на прекрасные отрицательные поля.
отрицательная маржа
Зачем говорить об отрицательной марже?
С одной стороны, отрицательная маржа — это очень полезный навык, который мы часто упускаем из виду, и он очень важен в нашем макете, с другой стороны, у этой штуки хорошая совместимость, и нам не нужно бояться проблем с совместимостью.
Говоря об отрицательных полях, мы можем думать о противоположном направлении полей, когда они являются положительными. Мы можем взглянуть.
Отрицательные поля для нормального документооборота
выполнить
html структура контента
<div class="box">
<div class="content">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容
<span class="span red">哈哈哈哈哈</span>我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
<div class="other-content">
我是另一块我是另一块我是另一块我是另一块我是另一块我是另一块我是另一块
我是另一块我是另一块我是另一块我是另一块我是另一块我是另一块我是另一块
我是另一块我是另一块我是另一块我是另一块我是另一块我是另一块我是另一块
</div>
哈哈哈哈哈哈
</div>css-правила
.box {
margin: auto;
width: 600px;
}
.content {
margin: -20px;
background-color: lightgray;
}
.span {
margin: -10px;
}
.red {
background-color: red;
}Эффект
Суммировать
Как вы можете видеть выше, мы устанавливаем поля на -20px и -10px для .content и .span, которые представляют элементы уровня блока и элементы уровня строки соответственно. Соответственно изменилась и компоновка.
- Серая коробка, содержимое прорисовывается в верхнем левом углу. .in.in.in HOTHER-Содержание текста также подходит к нему.
- Элементы в красной строке также сдвигаются влево, а элементы справа подтягиваются.
- Контент «хахахаха» без каких-либо настроек в конце по-прежнему отображается сразу после элемента .other-content.
Нетрудно видеть, что в случае отрицательных значений
- margin-top и margin-left будут влиять на их собственное смещение в указанном направлении
- margin-right и margin-bottom будут влиять на смещение соседних элементов в указанном направлении
- После смещения на отступ исходная пустая позиция не будет заполнена следующими элементами.
- Конечно, блочные элементы и встроенные элементы ведут себя немного по-разному.
В качестве альтернативы отрицательное значение поля также может влиять на ширину элемента при условии, что свойство ширины элемента имеет значение auto . Здесь также приведен подробный пример, например, мы даем элементу левое и правое поля -200px.
html структура контента
<div class="box">
<div class="container"></div>
</div>css-правила
.box {
width: 200px;
border: 1px solid black;
margin: auto;
}
.container {
margin: 0 -200px;
background-color: lightgray;
width: auto;
height: 200px;
}Эффект
Конечно, до сих пор мы находились в обычном документообороте.
Отрицательные поля вне документооборота
Абсолютное позиционирование + отрицательные поля
Предположим, мы абсолютно позиционируем элемент и задаем ему соответствующее отрицательное поле.
выполнить
html структура контента
<div class="box">
<div class="pos">
绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位
绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位绝对定位
</div>
<div class="pos2">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>css-правила
.box {
position: relative;
height: 200px;
margin: 200px;
border: 1px solid black;
}
.pos {
width: 200px;
height: 200px;
position: absolute;
margin: -20px;
border: 1px solid gray;
}
.pos2 {
width: 200px;
height: 200px;
position: absolute;
border: 1px solid red;
}визуализация
Суммировать
Из эффекта видно, что для абсолютного позиционирования отрицательные поля в верхней и левой позициях будут тянуть элемент в указанном направлении, в то время как правое и нижнее направления не имеют никакого эффекта, поскольку они отделены от обычного потока документа и не приведет к изменению других соседних элементов.
Советы: **«абсолютное позиционирование + отрицательное поле»** Мы также часто используем его для достижения центрированного макета.
"
плавающая + отрицательная маржа
Рассмотрим следующие три сценария:
- Три плавающих влево блока с отрицательными полями соответственно, что произойдет с несколькими плавающими блоками?
- Два плавающих влево блока, левый блок с левым полем, установленным на -100%, будет ли правый блок двигаться влево?
- Два левых плавающих блока, первый имеет полную ширину, а второй левый край установлен на отрицательное значение собственной ширины, что произойдет?
выполнить
html структура контента
<!-- demo1 -->
<div class="box">
<div class="float float1">1</div>
<div class="float float2">2</div>
<div class="float float3">3</div>
</div>
<!-- demo2 -->
<div class="box">
<div class="float4">1</div>
<div class="float5">2</div>
</div>
<!-- demo3 -->
<div>
<div class="row">6</div>
<div class="float6">2</div>
</div>css-правила
.box { width: 800px; height: 210px; margin: 50px auto 10px auto; border: 1px solid black; } /* 第一个demo */ .float { float: left; margin: -50px; width: 200px; height: 200px; } .float1 { background-color: gray; } .float2 { background-color: yellow; } .float3 { background-color: red; margin: 0; }/* 第二格demo */ .float4 { background-color: gray; float: left; width: 200px; height: 200px; margin-left: -200px; } .float5 { background-color: lightgray; width: 200px; height: 200px; float: left; }
/* 第三个demo */ .row { width: 100%; height: 200px; background-color: lightgray; float: left; } .float6 { background-color: gray; float: left; width: 200px; height: 200px; margin-left: -200px; }
Эффект
Суммировать
Как можно заметить:
- В demo1 для двух элементов 1 и 2 установлены все отрицательные поля, и они будут смещены влево вверх. При этом элемент 2 будет занимать половину элемента 1 по горизонтали. Элемент 3 будет сдвинут влево элементом 2, составляя четверть элемента 2.
- В demo2 элемент 1 смещен влево на собственную ширину, исходная позиция пуста, а элемент 2 заполняется сразу.
- В demo3 оба элемента перемещаются влево, а ширина элемента 6 равна 100%, когда элемент 2 смещен влево на собственную ширину, он полностью достигает предыдущей строки.
Следовательно, мы также можем видеть, что отрицательные поля оказывают такое же влияние на плавающие элементы, как и в обычном потоке документов. И элементы сзади могут также перекрывать передние элементы с отрицательными полями.
В верстке мы часто используем волшебство «плавающее + отрицательное поле».
Макет Святого Грааля
идеи
- Три элемента слева, посередине и справа перемещаются влево соответственно.
- Средний элемент занимает первую позицию и отображается первым, а ширина элемента установлена на 100%
- Левый элемент устанавливает левое поле на -100%, чтобы левый элемент поднимался на одну строку вверх и находился в крайнем левом положении, а правый элемент устанавливает левое поле на отрицательное значение собственной ширины, чтобы правый элемент поднимался вверх. одну строку и находится в крайнем правом положении.
- Установите левое и правое заполнение родительского элемента, чтобы оставить место для левого и правого элементов для отображения содержимого среднего элемента.
- Установите для левого и правого элементов относительное позиционирование, слева от левого элемента и справа от правого элемента — отрицательные значения ширины заполнения.
выполнить
html структура контента
<div class="box">
<div class="middle">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>css-правила
.box {
overflow: hidden;
padding: 0 210px;
}
.middle {
float: left;
width: 100%;
height: 200px;
background-color: lightgray;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: gray;
margin-left: -100%;
position: relative;
left: -210px;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: gray;
margin-left: -200px;
position: relative;
right: -210px;
}Эффект
Двухстворчатая компоновка
идеи
- Три элемента слева, посередине и справа перемещаются влево соответственно.
- Средний элемент занимает первую позицию и отображается первым, а ширина элемента установлена на 100%
- Левый элемент устанавливает левое поле на -100%, чтобы левый элемент поднимался на одну строку вверх и находился в крайнем левом положении, а правый элемент устанавливает левое поле на отрицательное значение собственной ширины, чтобы правый элемент поднимался вверх. одну строку и находится в крайнем правом положении.
- Установите левое и правое поля дочерних элементов среднего элемента, чтобы оставить место для левого и правого элементов для отображения содержимого среднего элемента.
выполнить
html структура контента
<div class="box">
<div class="middle">
<div class="content">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>css-правила
.box {
overflow: hidden;
}
.middle {
float: left;
width: 100%;
}
.middle .content {
margin: 0 210px;
height: 200px;
background-color: lightgray;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: gray;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: gray;
margin-left: -200px;
}Эффект
Суммировать
Реализация компоновки Holy Grail и двухстворчатой компоновки одинакова в передней части. Левый и правый столбцы также имеют фиксированную ширину, а средний столбец — адаптивный. Используйте плавающие и отрицательные поля, чтобы левый и правый столбцы располагались рядом со средним столбцом. Разница в основном заключается в способе отображения промежуточных элементов.
Макет Holy Grail использует родительский элемент для установки полей, а левый и правый элементы — для установки вспомогательных средств относительного позиционирования. Компоновка с двойным летающим крылом использует метод вложения подэлементов посередине, что отображается путем установки внешнего поля подэлементов.
Напротив, Double Flying Wing имеет на один вложенный элемент больше, чем Holy Grail, но позиционирование левого и правого элементов отсутствует.
гибкий макет
До flex, будь то макет с одним столбцом, макет с двумя столбцами или даже более сложный макет с тремя столбцами, вертикальным центрированием и т. д., мы обычно используем float, positioning, margins (margin) для реализации наших различных стилей макета, пока не наткнулись на flex.
flex (гибкая компоновка) дает нам больше возможностей с точки зрения макета, он может более легко и быстро размещать наши страницы. Мы часто можем использовать его волшебные свойства для создания желаемого макета. Более того, flex теперь поддерживается практически всеми браузерами, и о совместимости можно не слишком беспокоиться.
Дополнительные вопросы о гибкой совместимости можно просмотретьcan I use
Тем не менее, эта глава не предназначена для написания flex, а только для того, чтобы объяснить некоторые способы достижения макетов с двумя и тремя столбцами в прошлом. Что касается меня, то я предпочитаю написать отдельную главу на тему флекса, а не на эту тему. И я напишу об этой теме в будущем.
Не много ерунды, на этот раз обмен здесь, увидимся в следующий раз!