Самоспасение css цыплят

Байду внешний интерфейс контейнер CSS

0. Предисловие

Как фронтенд, который не любит писать стили, я столкнулся с необходимостью страниц прямой внешней активности, и сразу вылезла куча проблем:

  • Единицы используются без разбора, rem, vh, vw, px используются без разбора или даже смешиваются вместе
  • Избыточность HTML, иногда div нужен только для того, чтобы взять маржу
  • Используйте различные схемы макета для страницы, flex, float, relative+top, absolute+top, margin и pit самостоятельно
  • Всевозможные случайные, не строго по визуальному проекту Теория знакома, но пользоваться ею по-прежнему неудобно. Итак, вернитесь и искупите свою вину и просмотрите основы. Существует не так много исследований по гибкости и сетке, особенно по сетке, которая может обрабатывать многие сложные стили в одну или две строки. Если мы не знаем, для чего нужна новая технология, какие болевые точки она решает, если мы не пережили эру подсечно-огневого земледелия и у нас нет хороших навыков командной работы, запуск проекта не обязательно «слишком легко написать страницу» такого рода вещи.

1. Некоторые практические решения объясняются простым языком

1.1 padding

Когда вы видите вершину Baidu, какой план вы придумываете?

Давайте посмотрим на верхнюю часть поиска Baidu, #head вверху (окно поиска все в этой строке) фиксировано, а div рядом с ним — это вкладка. Конечно, fix не входит в текстовый поток, поэтому используйте отступы, чтобы поместить основной контент в самый низ, иначе контент будет прямо вверху.

Да, это очень простой CSS, и есть много способов его реализовать. Тогда давайте посмотрим, как достигается этот визуальный эффект:

Как вывести img+ из потока текста?Двойное позиционирование div+?

На самом деле, div+padding решается сразу, фон div равен 100%, а затем center+padding-top, текст в div естественно уйдет вниз, и тогда позиционирование будет в порядке. Кроме того, текст можно заменить псевдоэлементами.

Управление соотношением сторон

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

.scale50 {
  background: #aaa;
  width: 50%;
  height: 0;
  text-align: center;
  padding-top: 50%;
}

Часто то, что нам нужно для изображений 4:3, 16:9, можно решить таким образом.

1.2 margin

Посмотрите на правую колонку Baidu

Для левой части этого столбца использовать поля или отступы? Эта ситуация, конечно, накладная, потому что есть боковая линия 😊. Для верхней части этого столбца это отступы или поля? Собственно, в этом случае все то же самое, но с потенциальной проблемой: если есть две строки, и есть поля других блоков в вертикальном направлении, то происходит схлопывание вертикального поля (в зависимости от того, что больше); или Когда есть родительская коробка обернута, его поле выйдет наружу, чтобы повлиять на внешнюю сторону. В это время необходимо добавить код, преобразованный в bfc.

  • case1:
    image
  • case2:
    1

Осмелитесь возиться?

Например, есть эскиз проекта, который выглядит так:

Может оказаться в центре, а потом быстро написать панацею сына и отца в центре. Затем внезапно подошел дизайнер и сказал, почему это всегда кажется немного неправильным, так что взгляните на вторую половину:
На самом деле он не центрирован и не горизонтален. Тогда, в это время, недостаточно написать мертвую площадку, чтобы гарантировать, что видение не придет к вам.

🐦...Спустя много дней тест сказал, что проблема со зрением мобильника. Конечно, писать dead px — это определенно таблетка, поэтому мобильный терминал должен использовать rem для ее решения. В моем случае rem равен 50px.Тогда конвертируйте его.Отступ первого div (зеленый крючок) на картинке 176 148 0 151.Если изменить его на rem то будет 3.52 2.96 0 3.02.Пока поскольку более поздние проблемы со стилем - это не пейзаж или ipad (предпосылка отсутствия визуального проекта), это больше не ваш горшок.

отрицательная маржа

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

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

2. Начните тестировать воду

Затем подготовьтесь к использованию n методов для создания трехколоночного макета, адаптивного посередине и фиксированной ширины с обеих сторон.

абсолютное позиционирование

html:

 <div class="container">  
   <div class="m">中间</div>
  <div class="l">左边</div>
  <div class="r">右边</div>
 </div>

css:

.container{
  position: relative;
  height: 100px;
}
.l, .m, .r {
  height: 100px;
  position: absolute;
}

.l {
  background: #f00;
  width: 100px;
}

.m {
  background: #0f0;
  width: calc(100% - 150px);
  margin: 0 50px 0 100px;
}

.r {
  background: #00f;
  width: 50px;
  right: 0;
}

Анализ: независимо от порядка, структуры потока, сначала загрузите посередине, но используйте calc

"рассчитать?! Избегайте пересчета"

На данный момент вперед, т.е. блочная модель:

.m {
  background: #0f0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 50px 0 100px;
}

Взгляните на сравнение:

Святой Грааль и расположение крыльев-близнецов

все тот же html

.container {
  height: 100px;
  width: 100%;
  padding: 0 50px 0 100px;
}

.m, .l, .r {
  height: 100px;
  float:left;
}

.m {
  background: #f00;
  width: 100%;
}

.l {
  background: #0f0;
  width: 100px;
  margin-left: -100%;
  position: relative;
  left: -100px;
}

.r {
  background: #00f;
  width: 50px;
  margin-right: -50px;
}

Многие говорят, что это сложно понять, но на самом деле мы можем сделать это шаг за шагом: сначала поместите контейнер и установите ширину и высоту фона, а три блока div — в порядке млр. Затем float, очевидно, m занимает одну строку, а два других занимают одну строку.

Далее, используя отрицательное поле, сначала сдвиньте левый на одну строку, что составляет -100%, и сдвиньте на одну позицию вправо -50px — это нормально, и теперь это визуально 3 столбца. Наконец, средняя часть вначале маскируется и занимает 100% ширины линии. Тогда мы можем использовать только отступ контейнера или собственное поле, чтобы нажимать на себя.

Если используется заполнение контейнера, левая и правая стороны освобождаются, а два элемента div lr просто помещаются. В конце концов, l и r все еще находятся в m, поэтому нам нужно немного сдвинуть его, и относительное значение в порядке. Это макет Святого Грааля

Если вы нажимаете на себя собственным полем, вам нужен еще один div, чтобы обернуть себя. Как и в предыдущих шагах, div, который оборачивает сам себя, занимает всю строку, но имеет собственное поле, что является идеальным решением. Это двухстворчатая компоновка. Диаграмма в основном такая же, как и выше, за исключением того, что самый внешний слой — это не контейнер, а m, а средняя часть, которая действительно отображается, — это div внутри m. Кроме того, l и r не обязательно должны быть относительными.

<div class="m">
  <div class="margin-setting">
  中间
  </div>
</div>

Это лучшее решение для традиционного css+div, но нас беспокоит высокая проблема, и нам нужно установить ее самостоятельно.

float+calc

  <div class="container">
    <div class="l">左边</div>
    <div class="m">这是中间内容</div>
    <div class="r">右边</div>
  </div>

На этот раз html нельзя писать в обратном порядке

.container {
  height: 100px;
  width: 100%;
}

.m, .l, .r {
  height: 100px;
  float: left;
}

.m {
  background: #f00;
  width: calc(100% - 150px);
}

.l {
  background: #0f0;
  width: 100px;
}

.r {
  background: #00f;
  width: 50px;
}

Как и в предыдущей абсолютной схеме, calc можно заменить блоком ie.

встроенный элемент

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

  <div class="l">左边</div><!--
  --><div class="m">中间</div><!--
  --><div class="r">右边</div>

CSS:

.l, .m, .r {
  height: 100px;
  display: inline-block;
}

.l {
  background: #f00;
  width: 50px;
}

.m {
  background: #0f0;
  width: calc(100% - 150px);
}

.r {
  background: #00f;
  width: 100px;
}

Особенности: Стиль крайне хрупок, содержимое ломается сразу после обтекания, а лучше может быть только когда нет текста. calc - все тот же метод, поле ie отлично решено

Два div реализуют три столбца

  <div class="container" l="左边">中间</div>
  <div class="r">右边</div>

Содержимое слева захвачено с помощью attr

.container {
  float: left;
  height: 100px;
  background: #f00;
}

.container::before {
  content: attr(l);
  display: block;
  width: 100px;
  float: left;
  height: 100px;
  background: #0f0;
}

.r {
  height: 100px;
  width: 50px;
  float: left;
  background: #00f;
  margin-right: -100%;
}

Контент, созданный с помощью контента, больше не может размещать элементы html слева.

флекс и сетка

html все еще в порядке:

<div class="container">
    <div class="l">左边</div>
    <div class="m">这是中间内容
    </div>
    <div class="r">右边</div>
</div>

Все знают реализацию flex:

.container {
  display: flex;
  height: 100px;
}

.l {
  background: #f00;
  min-width: 100px;
}

.m {
  background: #0f0;
}

.r {
  background: #00f;
  min-width: 50px;
}

Тем не менее, я более оптимистично отношусь к сетке, которая соответствует мышлению программиста, одной конфигурации, двум строкам кода и в основном обрабатывает большинство сценариев.

.container {
  display: grid;
  grid-template-columns: 100px auto 50px;
  grid-template-rows: 100px;
}

.container div:nth-of-type(1) {
  background: #f00;
}

.container div:nth-of-type(2) {
  background: #0f0;
}

.container div:nth-of-type(3) {
  background: #00f;
}

Реализация div

css:

div {
  background: #f00;
  height: 100px;
  margin: 0 50px 0 100px;
  position: relative;
}

div::before {
  content: '左边';
  display: block;
  background: #0f0;
  height: 100px;
  width: 100px;
  position: absolute;
  left: -100px;
}

div::after {
  content: '右边';
  display: block;
  background: #00f;
  height: 100px;
  width: 50px;
  position: absolute;
  right: -50px;
  top: 0;
}

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

Я опять балуюсь, успокойся сначала

Мой блог будет синхронизирован с Tencent Cloud + Community, и я приглашаю всех присоединиться:cloud.Tencent.com/developer/ это…

Категории