Ранее мое предположение о ширине авто работает, как будто его содержимое, но теперь с небольшим знанием нет, он работает так, как будто его блок имеет полную ширину. Поэтому я смущен здесь с шириной 100% и шириной авто. Может ли кто-нибудь рассказать мне о различиях между ними с объяснением?разница между шириной авто и шириной 100 процентов
Ширина автоматического
Начальная ширина элемента уровня блока, как DIV или р автоматически. Это заставляет его расширяться, чтобы занять все доступные горизонтальные пространства внутри своего блока. Если у него есть горизонтальная прокладка или граница, ширина этих элементов не добавляется к общей ширине элемента.
Ширина 100%
С другой стороны, если вы зададите ширина: 100%, общая ширина элемента будет 100% его содержащего блока плюс любые горизонтальные маржу, отступы и границы (если вы использовали размер коробки: border-box, и в этом случае только значения полей добавляются к 100% для изменения того, как вычисляется его общая ширина). Это может быть то, что вы хотите, но, скорее всего, это не так.
Чтобы визуализировать разницу увидеть эту картину:
Для тех, кому интересно, почему 'width: auto' ведет себя следующим образом: http://stackoverflow.com/ Вопросы/28353625/why-does-percent-width-work-even-if-no-explicit-width-value-given-for-содержать/28354270 # 28354270 –
поэтому 'auto' делает то же самое, что и' fill-available' – jiggunjer
До тех пор, пока значение ширины является автоматической, элемент может иметь горизонтальную маржу, отступы и границы, не становясь шире его контейнера (если, конечно, сумма поля margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right больше, чем контейнер). Ширина его окна содержимого будет тем, что осталось, когда маржа, заполнение и граница были вычтены из ширины контейнера.
С другой стороны, если вы укажете ширину: 100%, общая ширина элемента будет составлять 100% от содержащего его блока плюс любое горизонтальное поле, отступы и границы (если вы не использовали размер окна: рамка , и в этом случае только значения добавляются к 100% для изменения того, как вычисляется его общая ширина). Это может быть то, что вы хотите, но, скорее всего, это не так.
Источник:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
Речь идет о полях и границы. Если вы используете width: auto, добавьте границу, ваш div не станет больше, чем его контейнер. С другой стороны, если вы используете width: 100% и некоторую границу, ширина элемента будет равна 100% + граница или маржа. Для получения дополнительной информации см. this.
Начальная ширина элемента уровня блока, такого как div или p, является автоматической.
Использовать ширину: авто, чтобы отменить явно заданные ширины.
Если вы укажете ширину: 100%, общая ширина элемента будет равна 100% от содержащего его блока плюс любой горизонтальный край, отступы и граница.
Итак, в следующий раз, когда вы устанавливаете ширину элемента уровня блока на 100%, чтобы он занимал всю доступную ширину, подумайте, нужно ли то, что вы действительно хотите, установить его в auto.
Я написал углубленное сообщение о разнице на my blog.
width: auto; будет стараться как можно более стараться сохранить элемент такой же ширины, как и его родительский контейнер, когда добавляется дополнительное пространство из полей, отступов или границ.
width: 100%; сделает элемент таким же широким, как родительский контейнер. Дополнительный интервал будет добавлен к размеру элемента без учета родителя. Обычно это вызывает проблемы.
то же, что и @ C-link, но дополнительный графический интерфейс. поэтому +1 –
Использование ширина: авто; + дисплей: встроенный блок; в css дает потрясающий эффект.
width : auto;
display: inline-block;
Это не отвечает на вопрос о разнице между 100 & и авто. – JoeTidee
Да, я знаю, но я пытаюсь показать здесь примерно * width: auto и display: inline-block *. Когда мы хотим автоматически увеличить ширину любого элемента уровня блока, мы можем это использовать. И разница между 100% и авто –
Ширина 100%: Это сделает содержание 100%. margin, border, padding будут добавлены к этой ширине, и элемент будет переполняться, если какой-либо из них будет добавлен.
Ширина авто: Он будет соответствовать элементу в доступном пространстве, включая край, границу и отступы. пробел, оставшийся после корректировки поля + прокладка + граница, будет доступна ширина/высота.
Ширина 100% + коробка-калибровка: граница коробка: Это также соответствует элементу доступного пространства, включая границы, обивку (разница будет делать это переполнение контейнера).
Возможный дубликат [Ширина установки: автоматическая ведет к ширине: 100%] (http://stackoverflow.com/questions/2042645/setting-widthauto-leads-to-width100) –
В двух словах: 1) авто , parent div width/height будет представлять собой сумму его дочерних элементов. 2) 100 процентов, его ширина/высота будут его родителями. См. Статью [здесь] (http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/) –