разница между шириной авто и шириной 100 процентов

104

Ранее мое предположение о width: auto что ширина установлена ​​равной ширине содержимого. Теперь я вижу, что он занимает всю ширину родительского элемента.

Может ли кто-нибудь описать различия между ними?

html css Навин Раунияр
источник
возможный дубликат настройки ширины: авто приводит к ширине: 100%
Адриано Репетти
Вкратце: 1) auto, ширина / высота родительского div будет суммой его дочерних элементов. 2) 100 процентов, его ширина / высота будут его родительскими. См. Статью здесь
Алан Донг

Ответы:

147

Ширина авто

Начальная ширина элемента уровня блока, такого как div или p, - auto. Это заставляет его расширяться, чтобы занять все доступное горизонтальное пространство внутри содержащего его блока. Если у него есть какие-либо горизонтальные отступы или границы, их ширина не прибавляется к общей ширине элемента.

Ширина 100%

С другой стороны, если вы укажете width: 100%, общая ширина элемента будет составлять 100% от его содержащего блока плюс любые горизонтальные поля, отступы и граница (если вы не использовали box-sizing: border-box, и в этом случае к 100% добавляются только поля, чтобы изменить способ расчета общей ширины). Это может быть то, что вы хотите, но, скорее всего, это не так.

Чтобы увидеть разницу, посмотрите на эту картинку:

введите описание изображения здесь

Источник

Бходжендра Раунияр
источник
3
Для тех, кому интересно, почему так width: autoсебя ведет: stackoverflow.com/questions/28353625/…
Хашем Колами,
1
так autoделает то же самоеfill-available
jiggunjer
2
Таким образом, в основном это не имеет ничего общего с размером содержимого элементов, но полностью относится к родительской ширине?
haemse
87

  • width: auto; будет стараться как можно сильнее сохранить элемент той же ширины, что и его родительский контейнер, когда дополнительное пространство добавляется из полей, отступов или границ.

  • width: 100%;сделает элемент такой же шириной, как родительский контейнер. Дополнительный интервал будет добавлен к размеру элемента безотносительно к родительскому элементу. Обычно это вызывает проблемы.

введите описание изображения здесь введите описание изображения здесь

Ян Дженнингс
источник
2
то же самое, что и @ C-link, но с дополнительным графическим интерфейсом. so +1
Navin Rauniyar
8

Речь идет о полях и границах. Если вы используете width: auto, затем добавьте границу, ваш div не станет больше, чем его контейнер. С другой стороны, если вы используете width: 100%и некоторую границу, ширина элемента будет 100% + граница или поле. Для получения дополнительной информации см. Это .

Матеуш
источник
4

Пока значение 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/

Гокул Гопала Кришнан
источник
4

Ширина 100%: будет заполнено 100%. margin, border, padding будут добавлены к этой ширине, и элемент будет переполняться, если что-либо из этого добавлено.

Авто по ширине: он поместит элемент в доступное пространство, включая поля, границу и отступы. пространство, оставшееся после настройки поля + отступа + границы, будет доступно по ширине / высоте.

Ширина 100% + box-sizing: border box: он также будет соответствовать элементу в доступном пространстве, включая границу, отступы (маржа заставит его переполнять контейнер).

Нишант Баранвал
источник
3

Начальная ширина элемента уровня блока, такого как div или p, - auto.

Используйте width: auto, чтобы отменить явно заданную ширину.

если вы укажете width: 100%, общая ширина элемента будет равна 100% содержащего его блока плюс любые горизонтальные поля, отступы и границы.

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

Майкл Унтертурнер
источник
1

Использование ширины: авто; + отображение: встроенный блок; в css дает потрясающий эффект.

width : auto;
display: inline-block;
Мохаммед Джавед
источник
2
Это не отвечает на вопрос о разнице между 100 & и auto.
JoeTidee 07
1
Да, я знаю, но я пытаюсь показать здесь width: auto и display: inline-block . Когда мы хотим автоматически увеличить ширину любого элемента уровня блока, мы можем использовать это. И разница между 100% и авто
Мохаммед Джавед
0

Когда мы говорим 

width:auto;

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

Когда мы говорим

width:100%;

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

Сантош Кадам
источник