Хотя css прост, в нем много деталей и навыков, поэтому его легко освоить, но трудно освоить.
Как добиться фиксированного левого и правого 300 пикселей, адаптивной средней ширины?
имеет следующую структуру
<div class="wrapper">
<div class="item left">左</div>
<div class="item right">右</div>
<div class="item center">中</div>
</div>Общедоступный стиль, установите высоту, установите фиксированную ширину слева и справа на 300 пикселей, слева и справа — красные, а посередине — желтые .
.item {
height: 400px;
}
.left,
.right {
width: 300px;
background: #f00;
}
.center {
background: yellow;
}1. Метод двойного плавания
.left {
float: left;
}
.right {
float: right;
}Принцип: float не будет полностью отрываться от документооборота, а будет занимать исходное место
Официальное объяснение MDN: этот элемент удален из обычного потока (потока документа) веб-страницы, хотя он по-прежнему сохраняет частичный поток (в отличие от абсолютного позиционирования).
В: Почему центр должен располагаться после левого и правого?
О:
Браузер загружает страницы в порядке сверху вниз,
левый уже перемещается влево, а правый перемещается вправо. При рендеринге центра браузер игнорирует выделенные из потока документа левое и правое, а центральный элемент будет занимать всю строку с начала, но обнаруживается, что левое по-прежнему занимает 300px, а правое право занимает еще 300 пикселей, поэтому ширина центра находится между левой и правой адаптивной шириной
2. Метод абсолютного позиционирования
<style>
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.center {
margin: 0 300px;
}
</style>
<div class="wrapper">
<div class="item left">左</div>
<div class="item center">中</div>
<div class="item right">右</div>
</div>Принцип: левое и правое абсолютное позиционирование вне документооборота. Ширина посередине не устанавливается, устанавливаются только левое и правое поля, а оставшееся пространство строки блочных элементов заполняется автоматически.
3. Эластичная коробка
.wrapper {
display: flex;
}
.center {
flex: 1;
}Установите display: flex в родительском контейнере, установите 300px слева и справа и установите flex на 1 в центре.Реализован ли эффект?
При запуске браузера вроде правильно, но по факту после уменьшения экрана лево и право не фиксируются на 300px, а ширина сжимается.
Вам также необходимо добавить следующие стили:
.left,.right {
flex-shrink: 0; /*等同flex:0 0 auto */
}Принцип: flex: 1 на самом деле является сокращением для трех атрибутов, flex:1; которые эквивалентны flex:1 1 auto;.
Проще говоря, они представляют собой: минимальную ширину степени сжатия, когда оставшееся пространство контейнера уменьшается. Для получения более подробной информации см.: MDN -- Elastic Box Из этого мы знаем, что
центральная настройка (автоматически заполняет оставшуюся ширину контейнера, коэффициент сжатия по умолчанию и минимальная ширина по умолчанию) левая и правая настройки , и flex-shrink — второй атрибут в аббревиатуре flex, эквивалентный (без настройки на автоматическое заполнение оставшейся ширины контейнера, 0 не сжимает минимальную ширину, по умолчанию — auto)flex：1;flex:1 1 auto;flex-shrink: 0;flex:0 0 auto;
В : Почему настройки левого и правого каналов flex-shrink: 0;равны flex:0 0 auto, а минимальная ширина установлена автоматически, но ширина по-прежнему фиксирована и составляет 300 пикселей ? конкретные элементы. Если установлено , то минимальная ширина слева и справа составляет 400 пикселей, а приоритет выше, чем ширина, установленная элементом.flex:0 0 400px
4. Сетка компоновки сетки
Простейшая сетка
.wrapper {
display: grid;
grid-template-columns: 300px 1fr 300px;
} Быстрое понимание: grid-template-columns — это атрибут родительского контейнера, он означает не верх, право, низ и лево, а ширину трех подэлементов (300 пикселей автоматически заполняет одно оставшееся пространство в 300 пикселей). , Если написано, это означает, что ширина четырех подэлементов составляет grid-template-columns: 300px 1fr 2fr 100px;соответственно 300 пикселей 1/3 оставшегося места 2/3 оставшегося места 100 пикселей
5. Схема таблицы
.wrapper {
width: 100%;
display: table;
}
.wrapper>.item:not(.center) {
display: table-cell;
}Просто установите левый и правый элементы как ячейки, но когда экран сжимается, левый и правый фиксированные 300 пикселей будут сжаты.Вопрос
: Зачем вам нужно установить ширину на 100%?
Ответ: display:table похож на таблицу элемент, но на самом деле это встроенный элемент уровня блока, а не элементы уровня блока.
Таблицы не реагируют автоматически: когда вы используете правильный контейнер макета (например<header>,<section>,<article>, или<div>универсальный контейнер потокового содержимого, который не влияет на содержимое или макет без CSS.")), они Ширина таблицы по умолчанию составляет 100 % от родительского элемента. Размер таблицы по умолчанию зависит от ее содержимого. Поэтому необходимо предпринять дополнительные шаги, чтобы стиль макета таблицы работал эффективно на различных устройствах.
6. расчет css, расчет JS
① расчет расчета
.wrapper {
white-space: nowrap;
font-size: 0;
-webkit-text-size-adjust: none;
}
.item {
display: inline-block;
}
.center {
width: calc(100vw - 300px * 2);
}Принцип: Просто поместите div на ту же строку и используйте calc для расчета ширины, font-size: 0;-webkit-text-size-adjust: none;чтобы устранить разрыв между строчными блоками.Также доступны другие методы
②расчет js
.wrapper {
white-space: nowrap;
font-size: 0;
-webkit-text-size-adjust: none;
}
.item {
display: inline-block;
transition: 0.4s;
}
<script>
window.onload = function() {
function computed() {
const oCenter = document.querySelector(".wrapper .center")
oCenter.style.width =
innerWidth - 300 * 2 < 0 ? 0 + "px" : innerWidth - 300 * 2 + "px"
}
computed()
var timer = null
window.addEventListener("resize", () => {
clearTimeout(timer)
timer = setTimeout(computed, 300)
})
}
</script>В соответствии с calc, вы можете рассчитать относительную ширину
Резюме :
метод абсолютного позиционирования отделен от потока документов, что может вызвать проблемы с макетом.
Макет сетки прост и мощен, а мобильный терминал имеет хорошую совместимость.Метод
js универсален, но его непросто поддерживать.Рекомендуется
использовать flex и grid.