Стоит ли создавать макеты HTML и CSS, используя в основном поля / отступы или позиционирование?

Question

При создании дизайнов HTML5 и CSS3 лучше в первую очередь использовать отступы и отступы для своих проектов, а не позиционирование или наоборот?

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

HTML

<div> <ul> <li><span>1</span></li> <li><span>2</span></li> </ul> </div>

Пример CSS 1 - Использование поля с отступом

div{
    width:1000px;
    margin:auto;
    }
ul{
    margin-left:10px;
    width:100px;
    }
li{
    height:30px;
    }
span{
    margin-top:10px;
    }

Пример CSS 2 - Использование только позиционирования (кроме поля: auto ..)

div, ul, span{
    position:absolute;
    }   

div{
    width:1000px;
    margin:auto;
    }
ul{
    left:10px;
    width:100px;
    }
li{
    height:30px;
    }
span{
     top:10px;
    }

Answer 1

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

Общая тема состоит в том, чтобы получить клиентскую среду и затем проектировать на основе отношения к их видимой области.*

См. Эту ссылку https://stackoverflow.com/a/8857735/1026459 для javascript, чтобы получить размер экрана клиента (совместимый с браузером).

Answer 2

Для типичного макета страницы Пример 1 намного чище, и вам следует выбрать его, если есть выбор.

Пример 2 плох, потому что как только вы начнете устанавливать position: absolute на все, любая гибкость вашего дизайна может выйти из окна. Вы должны установить явные размеры для всего.

В общем случае (есть исключения), избегайте position: absolute для основного макета, если только это не единственный способ сделать это.

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

Answer 3

практическое правило, position правила являются наиболее подходящими, как следует из их названия.

margin s не очень надежны из-за несоответствия их моделей во всех браузерах, поэтому они менее приспособлены для этой цели.

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