Dlaczego model pudełkowy W3C jest uważany za lepszy?

Question

Dlaczego większość programistów uważa model pudełkowy W3C za lepszy od modelu pudełkowego używanego przez Internet Explorer?

To bardzo frustrujące strony, które wyglądają tak, jak chcesz w Internet Explorerze, ale uważam model pudełkowy W3C za nieintuicyjny. Na przykład, jeśli marginesy, dopełnienie i obramowanie zostały uwzględnione w szerokości, można przypisać wartości szerokości do wszystkich kolumn bez obawy o liczbę kolumn i wszelkie zmiany, które wprowadzam do ich dopełnienia i marginesów.

W modelu pudełkowym W3C muszę się martwić o liczbę kolumn, które mam, i opracować coś zbliżonego do matematycznego wzoru, aby obliczyć prawidłowe wartości szerokości, modyfikując marginesy i dopełnienie. Zmiana ich wartości byłaby trudna, szczególnie w przypadku złożonych układów. Rozważmy to mała ramka-praca ja napisał:

#content { 
margin:0 auto 30px auto; 
padding:0 30px 30px 30px; 
width:900px; 
} 
    #content .column { 
     float:left; 
     margin:0 20px 20px 20px; 
    } 
    #content .first { 
     margin-left:0; 
    } 
    #content .last { 
     margin-right:0; 
    } 
     .width_1-4 {      
      width:195px;     
     }      
     .width_1-3 { 
      width:273px;     
     } 
     .width_1-2 { 
      width:430px; 
     } 
     .width_3-4 { 
      width:645px; 
     } 
     .width_1-1 { 
        width:900px; 
     } 

Wartości przypisane mi tu będzie słabnąć, chyba że istnieją trzy kolumny, a więc marże w 0+20+20+20+20+0. Trudno byłoby zmienić dopełnienie i marginesy; całe moje szerokości musiałyby zostać ponownie obliczone. Jeśli szerokość kolumny zawiera dopełnienie i marginesy, wszystko, co muszę zrobić, to zmienić szerokość i mam swój układ. Bardziej krytykuję model pudełkowy i mam nadzieję, że zrozumiem, dlaczego jest on uważany za lepszy, ponieważ trudno mi z nim pracować.

Czy robię to źle? Po prostu intuicyjne wydaje się używanie modelu pudełkowego W3C. Pewna rada byłaby naprawdę doceniana.

Dzięki!

Answer 1

Jedno słowo odpowiedź - -box-sizing

You choose how you want your box model to work.

Answer 2

Osobiście wolę - od czasu do czasu wstyd - model pudełkowy IE. Jak odnotowano w OP, numer wydaje się, aby bardziej sensownie mieć wstępnie określoną szerokość, z której margines, wypełnienie i szerokość krawędzi są odjęta, niż mieć szerokość, do której następnie są one dodane.

Z drugiej strony, mogę pracować z obiema modelami całkiem szczęśliwie, wszystko, czego naprawdę chcę, to konsystencja pomiędzy implementacjami, niezależnie od tego, która z nich zostanie wybrana.

Answer 3

Jest to nie tyle z których problemem jest lepiej lub gorzej, ale co wynika z normy zaakceptowanej organizacji, a nie który ..

Z drugiej strony waszych problemów byłby ktoś, kto chce, aby jego tekst zawinięte w pojemnik o pojemności 300 pikseli, który znajduje się w odległości 10 pikseli od następnego. Teraz musisz wykonać te same obliczenia, co Twój przykład, aby obliczyć szerokość. Jest to przypadek, w którym postrzegasz ten sam problem ..

Answer 4

Nie wszyscy uważają, że jest lepiej. Aby wyodrębnić cytat z Quirksmode.

Osobiście uważam model pudełkowy W3C za sprzeczny z intuicją. Aby zacytować:

Logicznie rzecz biorąc, pole mierzy się od granicy do granicy. Weź fizyczne pudełko, dowolne pudełko. Umieść coś, co jest wyraźnie mniejsze niż pudełko. Poproś kogokolwiek, aby zmierzył szerokość pudełka. Zmierzy odległość między bokami pudła ("granice").Nikt nie pomyśli o pomiarze zawartości pudełka.

Projektanci stron internetowych, którzy tworzą ramki do przechowywania zawartości, dbają o szerokość szerokości pudełka, o odległość od granicy do granicy. Granice, a nie treść, są wizualnymi wskazówkami dla użytkownika strony. Nikt nie jest zainteresowany szerokością treści.

Zgadzam się, model border-box ma więcej sensu (przynajmniej mi to robi). Pojawiły się spory dotyczące oryginalnego modelu pudełkowego W3C, co doprowadziło do definicji box-sizing property w CSS3.

Answer 5

Jeśli zawsze używasz wypełnienia, ramki i marginesu do ramki, model IE może wyglądać lepiej i bardziej logicznie, ale rzadko tak jest. Tak, model pudełkowy WC3 jest nieco bardziej skomplikowany, ale opłaca się pod względem możliwości i ścisłej kontroli "w pikselach" nad twoim układem. Po wykonaniu wystarczającej liczby układów przy użyciu modelu pudełkowego, przyzwyczaisz się do tego, że jest cicho, gdy tylko odkryjesz jego moc i nigdy nie będziesz chciał nawet pomyśleć o błędach IE, lepszym sposobie układania stron internetowych. Zaufaj mi, byłeś tam.

Answer 6

Podczas gdy stwierdzam, że W3C ma to prawo przez większość czasu, w tym konkretnym przypadku, muszę powiedzieć, że model pudełkowy IE jest lepszy.

Często spotykany problem, który często napotykam, polega na tym, że chcę ustawić szerokość na wartość procentową i mieć również wypełnienie pikselowe. Aby otrzymać element div, który ma rozciągnąć się do 100% i dodać dopełnienie, zmuszony jestem użyć dwóch elementów div zamiast jednego - w przeciwnym razie zastosowanie 100% na pojedynczym elemencie stanie się większe niż oczekiwane po uwzględnieniu dopełnienia. Utrudnia to pracę z układami płynów.