предисловие
Недавно, когда я был занят и перезаряжался, я обнаружил, что макет в моем сознании был очень беспорядочным и запутанным, поэтому я потратил некоторое время на разбор некоторых часто используемых макетов и методов их реализации, и здесь я поделюсь ими с вами.
макет с одной колонкой
Макет с одним столбцом является наиболее часто используемым макетом.Как правило, элемент используется в качестве контейнера, устанавливается фиксированная ширина и выравнивание по центру по горизонтали.
Обычно существует две формы одноколоночного макета:
(Источник изображения:blog.CSDN.net/ace_arm/art…)
макет в одну колонку
Макет в один столбец с одинаковой шириной заголовка, содержимого и нижней части.
визуализация
Код
html
<header></header>
<main></main>
<footer></footer>
css
header,footer{
width: 1200px;
height: 100px;
margin: 0 auto;
background: black;
}
main{
width: 1200px;
height: 600px;
background: red;
margin: 0 auto;
}
Макет в одну колонку (баннер)
Одноколоночный макет (пустой столбец) имеет одинаковую ширину вверху и внизу, заполняя всю страницу, а средняя область контента меньше и не занимает экран.
визуализация
Код
html
<header></header>
<main></main>
<footer></footer>
css
header,footer{
width: 100%;
height: 100px;
background: black;
}
main{
width: 1200px;
height: 600px;
background: red;
margin: 0 auto;
}
Одноколоночный макет является самым простым и простым, методы реализации не ограничиваются двумя вышеперечисленными, вы можете играть свободно и найти больше способов добиться этого.
макет в 2 колонки
Частота использования двухколоночного макета также очень высока, и эффект его реализации в основном заключается в разделении страницы на два столбца с неравной шириной слева и справа. Как правило, столбец с меньшей шириной будет установлен на фиксированную ширину в качестве боковой панели или т.п., в то время как другой столбец будет заполнен оставшейся шириной в качестве области содержимого.
Он широко используется в системах фонового управления и документах API.
визуализация
Давайте сначала посмотрим на эффект:
Код
Есть много способов реализовать двухколоночный макет, вот два основных метода.
функция вычисления
Функция calc() используется для динамического вычисления значения длины. Идея реализации очень проста.Ширина сайдбара фиксированная, и задано абсолютное позиционирование, чтобы вынести его из потока документа.Область контента вычисляет оставшуюся ширину и задает ширину через функцию calc() плюс левое поле, которое является шириной боковой панели.
код показывает, как показано ниже:
html
<div class="slider"></div>
<div class="main"></div>
css
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
.slider,.main{
height: 100%;
}
.slider{
position: absolute;
left: 0;
top: 0;
width: 100px;
background: black;
}
.main{
width: calc(100% - 100px);
background: red;
margin-left: 100px;
}
гибкое свойство
Идея реализовать через свойство flex тоже очень проста, установить родительский элемент на flex, ширину сайдбара зафиксировать, а область контента задатьflex:1чтобы заполнить оставшуюся площадь.
код показывает, как показано ниже:
html
<div class="slider"></div>
<div class="main"></div>
css
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
body{
display: flex;
}
.slider,.main{
height: 100%;
}
.slider{
width: 100px;
background: black;
}
.main{
flex: 1;
background: red;
}
макет в 3 колонки
Трехколоночный макет также часто используется в ежедневной разработке.Он расположен в порядке слева, посередине и справа.Обычно средний столбец является самым широким, а левый и правый столбцы - вторыми. Левая и правая стороны фиксированы по ширине, а средняя — адаптивная, которая может реагировать в зависимости от размера экрана.
визуализация
Давайте сначала посмотрим на визуализацию
Код
Существует также много способов реализации трехколоночного макета, здесь в основном два типа (макет с двойным летающим крылом, макет Святого Грааля, гибкий макет).
Прежде чем представить схему двойного летающего крыла и схему Святого Грааля, давайте поговорим о роли поля, задающего отрицательные значения:
Когда для значения margin установлено отрицательное значение, элемент будет двигаться в соответствующем направлении, например, если margin-left отрицательное значение, элемент будет двигаться влево.
Двухстворчатая компоновка
код показывает, как показано ниже:
html
<div class="main">
<div class="middle">
<div class="content">
中间
</div>
</div>
<div class="left">
左边
</div>
<div class="right">
右边
</div>
</div>
css
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
div{
height: 100%;
}
.main>div {
float: left;
}
.left {
width: 200px;
background: red;
margin-left: -100%;
}
.right {
width: 200px;
background: blue;
margin-left: -200px;
}
.middle {
width: 100%;
background: yellow;
}
.content {
margin-left: 200px;
margin-right: 200px;
}
Макет Святого Грааля
код показывает, как показано ниже: HTML
<div class="main">
<div class="center">中间中间中间中间中间中间中间后</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
css
* {
margin: 0;
padding: 0;
}
.main {
height: 200px;
padding: 0 150px 0 200px;
background: greenyellow;
*zoom: 1;
}
.left,
.center,
.right {
float: left;
}
.center {
width: 100%;
height: 200px;
background: red;
}
.left {
width: 200px;
height: 200px;
background: yellow;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 150px;
height: 200px;
background: gainsboro;
margin-left: -150px;
position: relative;
left: 150px;
}
Суть двухстворчатого макета фактически такая же, как у макета Святого Грааля. Расположение элементов достигается за счет установки отрицательных полей. Разница заключается в структуре html. Задайте его левое и правое поля, а не отступы Святого Грааля. макет, чтобы исключить охват элементов с обеих сторон. Таким образом, два принципа компоновки в основном одинаковы.Ключ заключается в навыках установки отрицательных полей и навыках относительного позиционирования плавающих элементов.
гибкий макет
код показывает, как показано ниже: HTML
<div class="main">
<div id="left">左边定宽</div>
<div id="main">中间自适应</div>
<div id="right">右边定宽</div>
</div>
css
* {
padding: 0px;
margin: 0px;
}
body,html{
width: 100%;
height: 100%;
}
body{
display: flex;
}
#left,
#right {
width: 100px;
background-color: #0FC;
}
#main {
flex: 1;
background-color: #999;
}
Если вы не учитываете проблемы совместимости браузеров, проще всего использовать гибкий макет.
Вертикальное расположение (липкий нижний колонтитул)
Этот макет делит страницу на три части: верхнюю, среднюю и нижнюю, причем верхняя и нижняя части имеют фиксированную высоту, а средняя часть — переменную высоту. Когда высота страницы меньше высоты браузера, нижняя часть должна быть закреплена внизу экрана, когда высота страницы превышает высоту браузера, нижняя часть должна быть растянута со средней часть и отображается внизу страницы.
Этот макет также называетсяsticky footer, что означает, что нижняя часть приклеена к нижней части экрана.
Код
Сначала создадим простой HTML-код
<body>
<div class="content"></div>
<div class="footer"></div>
</body>
Где контент — это наша область контента. Начнем с решения.
Добавьте минимальную высоту в область содержимого
Этот метод в основном использует vh (высота точки обзора) для расчета высоты всего окна просмотра (1vh равен 1% высоты окна просмотра), а затем вычитает высоту нижнего нижнего колонтитула, чтобы получить минимальную высоту области содержимого. . Например, мы можем добавить следующие стили:
.content{
min-height:calc(100vh-footer的高度);
box-sizing:border-box;
}
Итак, эта проблема решена, но что делать, если высота нижнего колонтитула страницы разная?Пересчитывать каждую страницу очень хлопотно, поэтому этот способ прост, но не рекомендуется.
Используйте гибкий макет
Этот метод заключается в использовании гибкого макета для разделения высоты области просмотра. Гибкость нижнего колонтитула установлена на 0, так что нижний колонтитул получает свою собственную высоту; гибкость содержимого установлена на 1, так что он будет заполнять остальную часть нижнего колонтитула.
код показывает, как показано ниже:
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer{
flex: 0;
}
Этот макет прост в использовании и рекомендуется.
Обертка может быть добавлена вне содержимого
Этот метод заключается в добавлении пакета вне содержимого и изменении html-кода на это:
<body>
<div class="wrapper">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
Затем добавьте следующие стили:
html, body, .wrapper {
height: 100%;
}
body > .wrapper {
height: auto;
min-height: 100%;
}
.content {
padding-bottom: 150px; /* 必须使用和footer相同的高度 */
}
.footer {
position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
clear:both;
}
Кроме того, для обеспечения совместимости в оболочку необходимо добавить класс clearfix. Его код выглядит следующим образом:
<body>
<div class="wrapper clearfix">
<div class="content"></div>
</div>
<div class="footer"></div>
</body>
.clearfix{
display: inline-block;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
ладно, ладно, готово, этот метод тоже рекомендуется, но он добавляет много кода, а также изменяет структуру html-документа.
липкий макет
Что такое липкий макет? Давайте сначала посмотрим на демонстрацию эффекта
Да, на самом деле, это держать элемент (вот заголовок) над видом страницы, когда страница прокручивается, что является эффектом поглощения, который мы часто наблюдаем.
Строка заголовка имеет заданный цвет фона. Если цвет фона не задан (фон прозрачен), текст обычного документооборота будет отображаться с наложением на текст строки заголовка.
Элементы, расположенные с помощью sticky, будут скрывать «нормальный» поток документов от прокрутки; липкие элементы сзади будут закрывать липкие элементы спереди, как слои стикеров, разве это не круто~~.
Код
Реализация липкого макета в основном зависит отpositionизstickyАтрибуты.
position: sticky;
Давайте сначала посмотрим на совместимость:
отCan I useИз приведенного выше запроса видно, что совместимость sticky не очень хорошая, поэтому каждый должен внимательно отнестись к его использованию.Если совместимость не требуется, вполне удобно использовать это.
Ниже приведен простой пример.
html:
<main>
<header>标题一</header>
<div class="content">
</div>
<header>标题二</header>
<div class="content">
</div>
<header>标题三</header>
<div class="content">
</div>
<header>标题四</header>
<div class="content">
</div>
</main>
js (не хочу писать слишком много тегов p, поэтому используйте js для генерации, поленитесь):
let num = 20
let html = ''
for (var i = 0; i < num; i++) {
html += `<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
item.innerHTML = html
})
css:
main {
width: 400px;
height: 300px;
margin: 200px auto;
overflow: auto;
}
header {
position: sticky;
top: 0;
height: 30px;
background-color: blanchedalmond;
}
Я обезьянософт, и ваши [Три ссылки] - самая большая мотивация для создания обезьянософта. Если в этой статье есть какие-либо ошибки или предложения, пожалуйста, оставьте сообщение!