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

ранее мое предположение о ширине авто работает так, как если бы его содержимое было, но теперь с небольшим знанием нет, он работает так, как если бы его полная ширина блока. Поэтому я путаю здесь с шириной 100% и шириной авто. Может ли кто-нибудь описать мне различия между ними с объяснением?

7 57
html css

7 ответов:

ширина авто

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

ширина 100%

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

чтобы визуализировать разницу смотрите эту картинку:

enter image description here

источник

87

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

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

enter image description hereenter image description here

47

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

7

пока значение width является автоматическим, элемент может иметь горизонтальное поле, заполнение и границу, не становясь шире своего контейнера (если, конечно, сумма полей-left + border-left-width + padding-left + padding-right + border-right-width + margin-right больше, чем контейнер). Ширина его поля содержимого будет тем, что осталось, когда поле, заполнение и граница были вычтены из ширины контейнера.

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

источник:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

4

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

использовать width: auto для отмены явно заданной ширины.

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

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

2

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

width : auto;
display: inline-block;
2

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

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

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

1