Co to min-width: 100%; width: auto faktycznie robi?

Question

znalazłem dobry przykład na pełnym ekranie wideo na CodePen: https://codepen.io/dudleystorey/pen/knqyK

mam trudności ze zrozumieniem następujące style:

video { 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
} 

Dlaczego nie możemy po prostu podać min-width i min- wysokość? Dlaczego musimy ustawić szerokość i wysokość na auto?

Answer 1

Przetestowałem go w Chrome i działa poprawnie z usuniętymi właściwościami width: auto; i height: auto;.

Możliwe, że widzisz przykład Cargo-Cult Programming (tj. Kod, który istnieje, ponieważ programista uznał, że jest to konieczne, ale w rzeczywistości nie jest to konieczne) - lub może być dla starszego błędu przeglądarki (jeśli tak jest . na co jest dziwne, ponieważ wszystkie przeglądarki, które obsługują <video> wszelkie wsparcie układ CSS do wysokiego stopnia zgodności

Answer 2

To nie jest dobry przykład o min-width:100% nie ma dla mnie sensu.

Rozważ to:

div{ 
    width:100%; 
    min-width:600px; 
} 

W tym przypadku, jeśli szerokość strony lub kontenera div jest mniejszy niż 600px, powiedzmy 400px. W takim przypadku domyślnie szerokość div wynosi 600px i zostanie dodany pasek przewijania - który jest większy niż 100%

Answer 3

szerokość: Auto

początkowa szerokość elementu poziomie bloku jak div lub p jest auto. Ten powoduje, że rozszerza się, zajmując całą dostępną przestrzeń poziomą w obrębie swojej zawierający blok. Jeśli ma on poziomą wyściółkę lub obramowanie, szerokości tych nie zwiększają całkowitej szerokości elementu.

Szerokość 100%

Z drugiej strony, jeśli podasz szerokość: 100%, całkowity szerokość elementu wyniesie 100% jej bloku zawierającego powiększone o margines poziomy, dopełnienie i obramowanie (chyba że użyłeś rozmiaru pudełka: border-box, w którym marginesy wielkości skrzynek dodawane są do 100%, aby zmienić sposób obliczania całkowitej szerokości ). To może być to, czego chcesz, ale najprawdopodobniej tak nie jest.

Min-Szerokość:

Minimalna szerokość właściwość CSS można ustawić minimalną szerokość określonego elementu. Właściwość min-width zawsze zastępuje właściwość width , niezależnie od tego, czy po niej, czy po szerokości w deklaracji.

a niektóre linki poniżej dla dalszego odniesienia i wyjaśnienie

https://i.stack.imgur.com/9yBHP.png

https://css-tricks.com/almanac/properties/m/min-width/

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

Answer 4

min-width:100% zapewnia, że ​​element jest co najmniej tak szeroki jak jego kontener. width: auto pozwala elementowi zachować oryginalny rozmiar.

Tak więc kombinację tych dwóch można odczytać jako "niech element zajmie tyle miejsca, ile potrzebuje, chyba że jest on mniejszy niż szerokość jego kontenera, w takim przypadku należy go powiększyć do szerokości kontenera". Więc w zasadzie to, co mówi kod, brzmi: "Nie obchodzi mnie, czy to się przepełni, po prostu wypełnij stronę".

Mając na uwadze powyższe, nie ma powodu, aby dodać width:auto jak to jest wartość początkowa width, chyba zastąpić jakąś inną stylistykę CSS stosowany do elementu.

W tym przykładowym kodzie wystarczy min-width.