Ранее мое предположение о ширине авто работает так, как если бы его содержимое было, но теперь с небольшим знанием нет, он работает так, как будто его полный блок. Поэтому я смущен здесь с шириной 100% и шириной авто. Может ли кто-нибудь объяснить мне о различиях между ними с объяснением?
Разница между шириной и шириной 100%
Ответ 1
Ширина авто
Исходная ширина элемента уровня блока, такого как div или p, является автоматической. Это заставляет его расширяться, чтобы занять все доступные горизонтальные пространства внутри своего блока. Если у него есть горизонтальная прокладка или граница, ширина этих элементов не добавляется к общей ширине элемента.
Ширина 100%
С другой стороны, если вы укажете ширину: 100%, общая ширина элементов будет составлять 100% от содержащего ее блока плюс любой горизонтальный край, отступы и границы (если вы не использовали размер коробки: border-box, в котором только квоты добавляются к 100% для изменения того, как вычисляется его общая ширина). Это может быть то, что вы хотите, но, скорее всего, это не так.
Чтобы визуализировать разницу, см. это изображение:
Ответ 2
Я написал подробное сообщение о различии моего блога.
width: auto; будет стараться как можно труднее сохранить элемент той же ширины, что и его родительский контейнер, когда добавляется дополнительное пространство из полей, отступов или границ.
width: 100%; сделает элемент таким же широким, как родительский контейнер. Дополнительный интервал будет добавлен к размеру элемента без учета родителя. Это обычно вызывает проблемы.
Ответ 3
Это о границах и границе. Если вы используете width: auto, затем добавьте границу, ваш div не станет больше, чем его контейнер. С другой стороны, если вы используете width: 100% и некоторую границу, ширина элемента будет равна 100% + границе или поля. Для получения дополнительной информации см. this.
Ответ 4
Пока значение ширины автоматически, элемент может иметь горизонтальный край, отступы и границу, не становясь более широкими, чем его контейнер (если, конечно, сумма поля-левая + граница-левая-ширина + заполнение-левая + padding-right + border-right-width + margin-right больше, чем контейнер). Ширина его окна содержимого будет тем, что осталось, когда маржа, заполнение и граница были вычтены из ширины контейнеров.
С другой стороны, если вы укажете ширину: 100%, общая ширина элементов будет составлять 100% от содержащего ее блока плюс любой горизонтальный край, отступы и границы (если вы не использовали размер коробки: border-box, в котором только квоты добавляются к 100% для изменения того, как вычисляется его общая ширина). Это может быть то, что вы хотите, но, скорее всего, это не так.
Источник:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
Ответ 5
Исходная ширина элемента уровня блока, такого как div или p, является автоматической.
Использовать ширину: авто, чтобы отменить явно заданные ширины.
если вы укажете ширину: 100%, общая ширина элементов будет равна 100% от содержащего его блока плюс любой горизонтальный край, отступы и граница.
Итак, в следующий раз, когда вы обнаружите, что ширина элемента уровня блока равна 100%, чтобы он занимал всю доступную ширину, подумайте, нужно ли это сделать, чтобы оно было автоматически.
Ответ 6
Использование width: auto; + дисплей: встроенный блок; в css дает потрясающий эффект.
width : auto;
display: inline-block;