О CSS Margin, некоторые очки, которые делают вас размытыми

JavaScript CSS

оригинал:Woohoo.smashing magazine.com/2019/07/ругаться…

Переводчик: Front-end Xiaozhi

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Когда мы изучаем CSS, первое, что большинство из нас изучает, — это детали различных частей блока в CSS, которые называются блоками CSS, моделями. Одним из элементов «коробочной модели» являетсяmargin, прозрачная область вокруг блока, которая отодвигает другие элементы от содержимого блока.

описано в CSS1margin-top,margin-right,margin-bottomа такжеmargin-leftсвойства и сокращение для одновременной установки всех четырех свойствmargin.

marginКазалось бы, довольно простая вещь, но в этой статье мы рассмотрим некоторые изmargin一些让人迷惑有有趣的事情。 особенно,marginКак взаимодействие между иmargin

Чтобы читать больше качественных статей, пожалуйстаПосетите блог GitHub

Блочная модель CSS

Блочная модель CSS относится к частям блока —content,padding,borderа такжеmargin, как они были выложены и взаимодействовали друг с другом раньше, следующим образом:

коробка из четырехmarginсвойства иmaringВсе сокращения определены в CSS1.

Спецификация CSS2.1 содержит иллюстрацию, демонстрирующую блочную модель, а также определяет термины, используемые для описания различных боксов, в том числеcontent box,наполнятьpadding box,border boxа такжеmargin box.

теперь естьLevel 3 Box Model specificationчерновик. Эта спецификация ссылается на CSS2 как на блочную модель иmargin, поэтому в большей части этой статьи мы будем использовать определение CSS2.

перекрытие полей

Спецификация CSS1 определяетmargin, который также определяет вертикальmarginперекрытие. Если учесть, что в первые дни в качестве языка форматирования документов использовался CSS, тоmarginmarginmargin

Когда двоеmargin发生重叠时，它们将组合在一起，两个元素之间的空间取较大的一个。 меньшеmarginВ большей внутри.

  • соседние братья и сестры
  • Полностью пустая коробка
  • Родительский элемент и первый или последний дочерний элемент

Обратите внимание, чтобы посмотреть на эти сцены.

соседние братья и сестры

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

В приведенном ниже примере ниже есть триdivэлемент. Первыйdivверх и низmarginобе50px. второйdivВерх и низmarginобе20px. Третийdivверх и низmarginобе3em.前两个元素之间的marginда50px, потому что меньшая вершинаmarginс большим дномmarginОбъединить. Поле между вторым элементом и третьим элементом равно3em,потому что3emбольше основания второго элементаmargin20 пикселей.

html

<div class="wrapper">

<div class="box example1">
  margin-top: 50px; margin-bottom: 50px;
</div>

<div class="box example2">
  margin-top: 20px; margin-bottom: 20px;
</div>

<div class="box example3">
  margin-top: 3em; margin-bottom: 3em;
</div>
  
</div>

css

.wrapper {
  border: 5px dotted black;
}

.example1 {
  margin: 50px 0 50px 0;
}

.example2 {
  margin: 20px 0 20px 0;
}

.example3 {
  margin: 3em 0 3em 0;
}

body {
  font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  margin: 2em 3em;
}

.box {
  background-color: rgb(55,55,110);
  color: white;
  padding: 20px;
  border-radius: .5em;
}

текущий результат:

совершенно пустая коробка

Если коробка пуста, то ее верх и низmarginмогут перекрывать друг друга. В приведенном ниже примереclassдляemptyверх и низ элементаmarginкаждый для50px, но между первым и третьим срокамиmarginнет100px, но50px.这是由于两个marginmarginсливаться.

html

div class="wrapper">

<div class="box">
  A box
</div>

<div class="box empty"></div>

<div class="box">
  Another box
</div>
  
</div>

css

.wrapper {
  border: 5px dotted black;
}

body {
  font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  margin: 2em 3em;
}

.box {
  background-color: rgb(55,55,110);
  color: white;
  border-radius: .5em;
}

.empty {
  margin: 50px 0 50px 0;
}

текущий результат:

Родительский элемент и первый или последний дочерний элемент

Перекрывающиеся поля могут удивить, потому что иногда это не очень интуитивно понятно. В приведенном ниже примере есть класс с именемwrapperизdivoutline

этоdivТри дочерних элемента внутриmarginобе50px. Но вы обнаружите, что фактический эффект заключается в том, что первый и последний элементы связаны с родительским элементом.marginЗаподлицо, как будто дочерний элемент находится не между элементами, а родительскими элементами50pxизmarginТакой же.

html

<div class="wrapper">

<div class="box">
  Item 1
</div>

<div class="box">
  Item 2
</div>

<div class="box">
  Item 3
</div>
  
</div>

css

.wrapper {
  outline: 1px solid red;
}

.box {
  margin: 50px;
}

body {
  font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  margin: 2em 3em;
}

.box {
  background-color: rgb(55,55,110);
  color: white;
  padding: 20px;
  border-radius: .5em;
}

текущий результат:

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

Только блок-элемент Margis перекрывается

В CSS2 указывается только вертикальное направление.marginПерекрытие, верхнее и нижнее поля элемента. Таким образом, левое и правое поля выше не перекрываются.

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

Предотвратить перекрывающуюся маржу

Если элемент имеет абсолютное позиционирование или плавающий, то онmargin

Например, полностью пустая коробка, если он имеетborderилиpaddingmarginНе пересекайтесь. В следующем примере пустая коробка для добавления 1PXpadding.现在这个空盒子的的上方和下方都有一个50pxизmargin.

html

<div class="wrapper">

<div class="box">
  A box
</div>

<div class="box empty"></div>

<div class="box">
  Another box
</div>
  
</div>

css

.wrapper {
  border: 5px dotted black;
}

body {
  font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  margin: 2em 3em;
}

.box {
  background-color: rgb(55,55,110);
  color: white;
  border-radius: .5em;
}

.empty {
  margin: 50px 0 50px 0;
  padding: 1px;
}

текущий результат:

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

Для родительского элемента и первого или последнего дочернего элемента поля перекрываются, если мы добавим к родительскомуborder, то на ребенкаmarginМы останемся внутри.

...
.wrapper {
  border: 5px dotted black;
}
...

margin.当web主要是文本时，这很有意义。当我们使用元素来布局设计时，它的重叠行为就没有多大的意义了。

, — это режим рендеринга CSS макета блочной модели на веб-странице, который относится к независимой области рендеринга или изолированному независимому контейнеру.

BFC предотвращает наложение полей. Если мы снова посмотрим на пример родительского элемента и первого или последнего дочернего элемента, мы можем добавить элемент-оболочкуdisplay: flow-rootсоздаст новый BFC, предотвращаяmarginсливаться

...
.wrapper {
  outline: 1px solid red;
  display: flow-root;
}
...

display: flow-root— это новое свойство в CSS3 для создания BFC без побочных эффектов. БудуoverflowЗначение свойства установлено вautoБудет иметь тот же эффект, поскольку это также создает новый BFC, хотя также может создавать некоторые полосы прокрутки, которые не нужны в некоторых сценах.

гибкие и сеточные контейнеры

flexа такжеgridКонтейнер создается для своих дочерних элементовflexа такжеgridФорматирование контекстов, чтобы они также предотвращалиmarginперекрытие.

Или возьмите приведенный выше пример в качестве примера, измените оболочку, чтобы использовать flex layout:

...
.wrapper {
  outline: 1px solid red;
  display: flex;
  flex-direction: column;
}
...

маржинальная стратегия сайта

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

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

display: flow-rootoverflowСоздайтеBFCflexpaddingрешать.

процентная маржа

Когда вы используете процент в CSS, он должен быть процентом элемента. Margin (или прокладки), использующие процентную настройку, всегда является процентом встроенного размера родительского элемента (ширина в горизонтальном режиме записи). Это означает, что при использовании процента элементы вокругpaddingРазмеры все одинаковы.

В приведенном ниже примере есть d шириной 200 пикселей, когда внутри находится класс с именемboxизdiv,этоmarginзначение10%, то есть,20px(200 * 10%).

html

 <div class="wrapper">
  <div class="box">
    I have a margin of 10%.
  </div>
</div>

css

 * {
  box-sizing: border-box;
}

.wrapper {
  border: 5px dotted black;
  width: 200px;
}

.box {
  background-color: rgb(55,55,110);
  color: white;
  padding: 20px;
  border-radius: .5em;
  margin: 10%;
}

body {
  font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  margin: 2em 3em;
}

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

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

  • margin-top = margin-block-start
  • margin-right = margin-inline-end
  • margin-bottom = margin-block-end
  • margin-left = margin-inline-start

Есть также две новые комбинации клавиш для установки двух блоков или двух встроенных блоков одновременно.

  • margin-block
  • margin-inline

В приведенном ниже примере, используя эти ключевые слова, связанные с потоком, а затем изменяя режим записи поля, вы можете увидетьmarginкак следовать направлению текста:

html

<div class="wrapper horizontal-tb">
  <div class="box">
    A box with a horizontal-tb writing mode.
  </div>
</div>

<div class="wrapper vertical-rl">
  <div class="box">
    A box with a vertical-rl writing mode.
  </div>
</div>

css

* {
  box-sizing: border-box;
}

.wrapper {
  border: 5px dotted black;
  inline-size: 200px;
}

.horizontal-tb {
  writing-mode: horizontal-tb;
  margin-bottom: 1em;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.box {
  background-color: rgb(55,55,110);
  color: white;
  padding: 20px;
  border-radius: .5em;
  margin-block-start: 30px;
  margin-block-end: 10px;
  margin-inline-start: 2em;
  margin-inline-end: 5%;
}

body {
  font: 1.4em/1.3 "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  margin: 2em 3em;
}

Нужно знать больше, вы можете прочитать оMDNДополнительные сведения о логических свойствах и значениях.

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

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете. )

Категории