Поля CSS (margin) перекрываются и предотвращают методы

внешний интерфейс CSS

Поля CSS (margin) перекрываются и предотвращают методы

Цзо Пэнфэй 2017.09.21

1. Что такое перекрытие полей

Перекрытие полей — это когда смежные границы (без какого-либо непустого содержимого, заполнения, границ) двух или более блоков (которые могут быть смежными или могут быть вложенными) перекрываются вместе, образуя единую границу.

2. Проблема перекрытия соседних полей

2.1 Пример

<style>
    *{
        margin:0;
        padding: 0;
    }
    .divout{
        width: 100px;
        height: 100px;
        background: yellow;
        margin-bottom: 50px;
        border: 1px solid black;
    }
    .divout1{
        width:50px;
        height: 50px;
        background: yellow;
        margin-top: 80px;
            /*float:left;*/
        /*position:absolute;*/
        border: 1px solid black;
    }
</style>
<body>
    <div class="divout">        
    </div>
    <div class="divout1">        
    </div>
</body>

скопировать код

2.2 Метод расчета пересечения маржина

  • Все позитивны, в зависимости от того, что является величайшим;

  • Если не все положительные значения, возьмите абсолютное значение, а затем вычтите максимальное значение абсолютного значения из максимального значения положительного значения;

  • Если положительного значения нет, берется абсолютное значение, а затем максимальное значение вычитается из 0.

2.3 Решения

  • Нижний элемент имеет значение float float:left;

  • Значение позиции нижнего элемента является абсолютным/фиксированным

  • Установите вверх или вниз равномерно при установке значений margin-top/bottom

3. Проблема элемента и родительского элемента

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

3.1 Пример

<style>
    *{
        margin:0;
        padding: 0;
        color: black;
    }
    #parrent{
        width:300px;
        height:150px;
        margin-top: 20px;
        background:teal;
    }
    #box1{
        width:100px;
        height:100px;
        background:aqua;
        margin:100px 0;
    }
</style>
<body>
    <div id="parrent">
        <div id="box1">
        我是box1
        </div>
        我是内容
    </div>
</body>
скопировать код

3.2 Решения

  • Добавьте отступы к внешним элементам
  • Переполнение внешнего элемента: скрыто;
  • Прозрачная граница внешнего элемента: 1px сплошная прозрачная;
  • Абсолютное позиционирование внутренних элементов position:absolute:
  • Внутренние элементы добавляют float:left или display:inline-block;

4. Похожие статьи

Категории