Ранее мое предположение о width: auto что ширина установлена равной ширине содержимого. Теперь я вижу, что он занимает всю ширину родительского элемента.
Может ли кто-нибудь описать различия между ними?
Ответы:
Ширина авто
Начальная ширина элемента уровня блока, такого как div или p, - auto. Это заставляет его расширяться, чтобы занять все доступное горизонтальное пространство внутри содержащего его блока. Если у него есть какие-либо горизонтальные отступы или границы, их ширина не прибавляется к общей ширине элемента.
Ширина 100%
С другой стороны, если вы укажете width: 100%, общая ширина элемента будет составлять 100% от его содержащего блока плюс любые горизонтальные поля, отступы и граница (если вы не использовали box-sizing: border-box, и в этом случае к 100% добавляются только поля, чтобы изменить способ расчета общей ширины). Это может быть то, что вы хотите, но, скорее всего, это не так.
Чтобы увидеть разницу, посмотрите на эту картинку:
width: autoсебя ведет: stackoverflow.com/questions/28353625/…
autoделает то же самоеfill-available
width: auto; будет стараться как можно сильнее сохранить элемент той же ширины, что и его родительский контейнер, когда дополнительное пространство добавляется из полей, отступов или границ.
width: 100%;сделает элемент такой же шириной, как родительский контейнер. Дополнительный интервал будет добавлен к размеру элемента безотносительно к родительскому элементу. Обычно это вызывает проблемы.
Речь идет о полях и границах. Если вы используете width: auto, затем добавьте границу, ваш div не станет больше, чем его контейнер. С другой стороны, если вы используете width: 100%и некоторую границу, ширина элемента будет 100% + граница или поле. Для получения дополнительной информации см. Это .
Пока значение width равно auto, элемент может иметь горизонтальные поля, отступы и границу, не становясь шире, чем его контейнер (если, конечно, сумма margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right больше контейнера). Ширина его поля содержимого будет такой, какая останется после вычитания полей, отступов и границ из ширины контейнера.
С другой стороны, если вы укажете width: 100%, общая ширина элемента будет составлять 100% от его содержащего блока плюс любые горизонтальные поля, отступы и граница (если вы не использовали box-sizing: border-box, и в этом случае к 100% добавляются только поля, чтобы изменить способ расчета общей ширины). Это может быть то, что вы хотите, но, скорее всего, это не так.
Источник:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
Ширина 100%: будет заполнено 100%. margin, border, padding будут добавлены к этой ширине, и элемент будет переполняться, если что-либо из этого добавлено.
Авто по ширине: он поместит элемент в доступное пространство, включая поля, границу и отступы. пространство, оставшееся после настройки поля + отступа + границы, будет доступно по ширине / высоте.
Ширина 100% + box-sizing: border box: он также будет соответствовать элементу в доступном пространстве, включая границу, отступы (маржа заставит его переполнять контейнер).
Начальная ширина элемента уровня блока, такого как div или p, - auto.
Используйте width: auto, чтобы отменить явно заданную ширину.
если вы укажете width: 100%, общая ширина элемента будет равна 100% содержащего его блока плюс любые горизонтальные поля, отступы и границы.
Итак, в следующий раз, когда вы обнаружите, что устанавливаете ширину элемента уровня блока на 100%, чтобы он занимал всю доступную ширину, подумайте, действительно ли вы хотите установить для него значение auto.
Использование ширины: авто; + отображение: встроенный блок; в css дает потрясающий эффект.
width : auto;
display: inline-block;
Когда мы говорим
width:auto;
ширина никогда не будет превышать общую ширину родительского элемента. Максимальная ширина - это родительская ширина. Даже если мы добавим границу, отступы и поля, содержимое самого элемента станет меньше, чтобы освободить место для границы, отступов и полей. В случае, если пространство, необходимое для границы + заполнения + поля, больше, чем общая ширина родительского элемента, ширина содержимого станет нулевой.
Когда мы говорим
width:100%;
ширина содержимого элемента станет 100% родительского элемента, и с этого момента, если мы добавим границу, отступ или маржу, это приведет к тому, что дочерний элемент будет превышать ширину родительского элемента, и он начнет выходить за пределы родительского элемента.