różnica między szerokością automatyczną a szerokością 100 procent

Wcześniej width: autozakładałem, że szerokość jest ustawiona na szerokość zawartości. Teraz widzę, że zajmuje całą szerokość rodzica.

Czy ktoś może opisać różnice między nimi?

Szerokość auto

Początkowa szerokość elementu blokowego, takiego jak div lub p, to auto. To sprawia, że ​​rozszerza się, aby zająć całą dostępną przestrzeń poziomą w swoim bloku zawierającym. Jeśli ma jakiekolwiek poziome wypełnienie lub obramowanie, szerokości tych elementów nie dodają się do całkowitej szerokości elementu.

Szerokość 100%

Z drugiej strony, jeśli określisz szerokość: 100%, całkowita szerokość elementu będzie równa 100% zawierającego go bloku plus margines poziomy, dopełnienie i obramowanie (chyba że użyłeś box-sizing: border-box, w takim przypadku tylko marginesy są dodawane do 100%, aby zmienić sposób obliczania jego całkowitej szerokości). Może tego chcesz, ale najprawdopodobniej tak nie jest.

Aby zwizualizować różnicę, zobacz to zdjęcie:

Źródło

• width: auto; postara się jak najbardziej, aby zachować taką samą szerokość elementu, jak jego kontener nadrzędny, gdy zostanie dodana dodatkowa przestrzeń z marginesów, dopełnienia lub obramowań.

• width: 100%;sprawi, że element będzie tak szeroki jak kontener nadrzędny. Dodatkowe odstępy zostaną dodane do rozmiaru elementu bez względu na rodzica. Zwykle powoduje to problemy.

Chodzi o marginesy i granicę. Jeśli użyjesz width: auto, a następnie dodasz obramowanie, twój div nie będzie większy niż jego kontener. Z drugiej strony, jeśli użyjesz width: 100%i trochę obramowania, szerokość elementu będzie wynosić 100% + obramowanie lub margines. Aby uzyskać więcej informacji, zobacz to .

Dopóki wartość szerokości jest auto, element może mieć poziomy margines, dopełnienie i obramowanie bez rozszerzania się jego kontenera (chyba że oczywiście suma margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right jest większe niż kontener). Szerokość pola zawartości będzie taka sama, jak pozostanie po odjęciu marginesu, dopełnienia i obramowania od szerokości kontenera.

Z drugiej strony, jeśli określisz szerokość: 100%, całkowita szerokość elementu będzie równa 100% zawierającego go bloku plus margines poziomy, dopełnienie i obramowanie (chyba że użyłeś box-sizing: border-box, w takim przypadku tylko marginesy są dodawane do 100%, aby zmienić sposób obliczania jego całkowitej szerokości). Może tego chcesz, ale najprawdopodobniej tak nie jest.

Źródło:

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

Początkowa szerokość elementu blokowego, takiego jak div lub p, to auto.

Użyj width: auto, aby cofnąć jawnie określone szerokości.

jeśli określisz szerokość: 100%, całkowita szerokość elementu wyniesie 100% zawierającego go bloku plus margines poziomy, dopełnienie i obramowanie.

Więc następnym razem, gdy zorientujesz się, że ustawiasz szerokość elementu blokowego na 100%, aby zajmował całą dostępną szerokość, zastanów się, czy naprawdę chcesz ustawić go na auto.

Szerokość 100%: zawartość będzie równa 100%. margin, border, padding zostaną dodane do tej szerokości, a element zostanie przepełniony, jeśli którykolwiek z nich zostanie dodany.

Szerokość auto: Dopasuje element do dostępnej przestrzeni, w tym marginesu, obramowania i dopełnienia. przestrzeń pozostała po dostosowaniu marginesu + dopełnienia + obramowania będzie dostępna szerokość / wysokość.

Szerokość 100% + box-size: border box: Dopasuje również element do dostępnej przestrzeni, w tym obramowanie, wypełnienie (margines sprawi, że przepełni kontener).

Korzystanie z szerokości: auto; + wyświetlacz: inline-block; w css dając niesamowity efekt.

width : auto;
display: inline-block;

Kiedy mówimy

width:auto;

szerokość nigdy nie przekroczy całkowitej szerokości elementu nadrzędnego. Maksymalna szerokość to szerokość nadrzędna. Nawet jeśli dodamy obramowanie, dopełnienie i margines, zawartość samego elementu zmniejszy się, aby zrobić miejsce na obramowanie, dopełnienie i margines. W przypadku, gdy miejsce wymagane na obramowanie + dopełnienie + margines jest większe niż całkowita szerokość elementu nadrzędnego, szerokość treści wyniesie zero.

Kiedy mówimy

width:100%;

szerokość zawartości elementu wyniesie 100% elementu nadrzędnego i od teraz, jeśli dodamy obramowanie, dopełnienie lub margines, spowoduje to, że element potomny przekroczy szerokość elementu nadrzędnego i zacznie wylewać się z elementu nadrzędnego.