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

103

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?

html css Navin Rauniyar
źródło
możliwy duplikat Ustawienie width: auto prowadzi do szerokości: 100%
Adriano Repetti
W skrócie: 1) auto, szerokość / wysokość elementu nadrzędnego div będzie sumą jego dzieci. 2) 100 procent, jego szerokość / wysokość będzie odpowiadać jego rodzicom. Zobacz artykuł tutaj
Alan Dong,

Odpowiedzi:

146

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:

wprowadź opis obrazu tutaj

Źródło

Bhojendra Rauniyar
źródło
3
Dla tych, którzy są ciekawi, dlaczego tak się width: autozachowuje: stackoverflow.com/questions/28353625/…
Hashem Qolami
1
więc autodziała tak samo jakfill-available
jiggunjer
2
Więc zasadniczo nie ma to nic wspólnego z rozmiarem zawartości elementów, ale całkowicie odnosi się do szerokości rodzica?
haemse
85

  • 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.

wprowadź opis obrazu tutaj wprowadź opis obrazu tutaj

Ian Jennings
źródło
2
to samo, co @ C-link, ale dodatkowo bardziej graficzny interfejs. więc +1
Navin Rauniyar
8

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 .

Mateusz
źródło
4

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/

Gokul Gopala Krishnan
źródło
3

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.

Michael Unterthurner
źródło
3

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).

Nishant Baranwal
źródło
1

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

width : auto;
display: inline-block;
Mohammed Javed
źródło
2
To nie odpowiada na pytanie o różnicę między 100 & a auto.
JoeTidee
1
Tak, wiem, ale próbuję pokazać tutaj szerokość: auto i display: inline-block . Jeśli chcemy automatycznie zwiększyć szerokość dowolnego elementu na poziomie bloku, możemy tego użyć. I różnica między 100% a auto
Mohammed Javed
0

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.

Santosh Kadam
źródło