різниця між шириною авто та шириною 100 відсотків

Раніше моє припущення про width: autoте, що ширина встановлена ​​на ширину вмісту. Тепер я бачу, що це займає всю ширину батьківської.

Хто-небудь може описати різницю між ними?

Ширина авто

Початкова ширина елемента рівня блоку, такого як div або p, є автоматичною. Це змушує його розширюватись, займаючи весь наявний горизонтальний простір у своєму блоці, що містить. Якщо він має будь-яку горизонтальну прокладку або межу, ширина цих не додається до загальної ширини елемента.

Ширина 100%

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

Для візуалізації різниці див. Цю картинку:

Джерело

• width: auto; намагатиметься якомога сильніше зберегти елемент такої ж ширини, що і його батьківський контейнер, коли додається додатковий простір із полів, відступів або меж.

• width: 100%;зробить елемент таким широким, як батьківський контейнер. До розміру елемента буде додано додатковий інтервал без урахування батьківського. Це зазвичай спричиняє проблеми.

Йдеться про поля та межі. Якщо ви використовуєте width: auto, то додайте межу, ваш div не стане більшим, ніж його контейнер. З іншого боку, якщо ви використовуєте width: 100%та деяку межу, ширина елемента становитиме 100% + межа чи поле. Для отримання додаткової інформації дивіться це .

Поки значення ширини є автоматичним, елемент може мати горизонтальне поле, заповнення та межу, не стаючи ширшим за контейнер (якщо, звичайно, сума margin-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_bet Between_widthauto_and_width100/

Початкова ширина елемента рівня блоку, такого як div або p, є автоматичною.

Використовуйте width: auto, щоб скасувати явно вказані ширини.

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

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

Ширина 100%: це забезпечить вміст на 100%. margin, border, padding будуть додані до цієї ширини, і елемент переповнюватиметься, якщо буде додано щось із них.

Ширина автоматично: Він буде відповідати елементу в доступному просторі, включаючи поля, межі та відступи. вільний простір, що залишився після регулювання поля + відступ + межа, буде доступний ширина / висота.

Ширина 100% + розмір коробки: border box: Він також поміщатиме елемент у вільний простір, включаючи рамку, заповнення (поле заповнить контейнер).

Використання ширини: авто; + дисплей: вбудований блок; в css дає чудовий ефект.

width : auto;
display: inline-block;

Коли ми говоримо

width:auto;

width ніколи не перевищуватиме загальної ширини батьківського елемента. Максимальна ширина - це батьківська ширина. Навіть якщо ми додамо межу, відступ та поля, вміст самого елемента стане меншим, щоб дати простір для меж, відступів та полів. У тому випадку, якщо простір, необхідний для межі + заповнення + поля, перевищує загальну ширину батьківського елемента, тоді ширина вмісту стане нульовою.

Коли ми говоримо

width:100%;

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