Wcześniej width: auto
zakł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?
Wcześniej width: auto
zakł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?
Odpowiedzi:
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:
width: auto
zachowuje: stackoverflow.com/questions/28353625/…
auto
działa tak samo jakfill-available
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.