Классическая компоновка Святой Грааль и двухстворчатая компоновка, какие испытательные полигоны

CSS

Макет Holy Grail и макет с двумя крыльями в основном решают проблему макета с тремя столбцами, и сначала необходимо отобразить средний столбец.В основном используются атрибуты margin и float, и в основном исследуется знакомство с margin и float.

Левое, верхнее, правое, нижнее поле задают соответствующие эффекты отрицательных значений.

  • margin-left и margin-top перемещают элемент влево и вверх

  • margin-right и margin-bottom уменьшат позицию, которую они занимают в макете, так что элемент справа или элемент ниже перемещается на себя

Макет Святого Грааля

.column{
  float: left;
}
main{
  padding: 0 200px;
}
.center{
  width: 100%;
  background: greenyellow;
}
.left,.right{
  width: 200px;
  background: yellow;
}
<main class="clearfix">
    <div class="column center">center</div>
    <div class="column left">left</div>
    <div class="column right">right</div>
</main>

image.png

.left{
  margin-left: -100%;
}

image.png

Почему margin-left -100% может достичь такого эффекта? 100% - это ширина родителя, он будет двигаться влево, ширина родителя,

Почему он движется вверх, когда мы иногда движемся прямо до упора влево, скрываясь из поля зрения?

float делает их на одной строке, но центр занимает одну строку и сжимает две другие, поэтому, когда используется отрицательное поле, оно отображается обратно, например, diable:flex; flex-wrap:wrap также будет отображаться тот же эффект

.left{
    position: relative;
    left: -200px; // 这个就不说了， 我相信大家知道
    margin-left: -100%;
}
.right{
  margin-right: -200px;
}

image.png

margin-right: -200px; я хочу, чтобы было эквивалентно исчезновению собственной ширины (не совсем исчезновение, но относительно других элементов, считается бесширинным), чтобы я мог вернуться к первой строке, рядом с центр

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

Категории