CSS3 box-size: margin-box; Dlaczego nie?

Dlaczego nie mamy box-sizing: margin-box;? Zazwyczaj, kiedy umieszczamy box-sizing: border-box;w naszych arkuszach stylów, naprawdę mamy na myśli ten pierwszy.

Przykład:

Powiedzmy, że mam układ strony z 2 kolumnami. Obie kolumny mają szerokość 50%, ale wyglądają trochę brzydko, ponieważ nie ma rynny (luka w środku); Poniżej znajduje się CSS:

.col2 {
    width: 50%;
    float: left;
}

Aby zastosować rynnę, możesz pomyśleć, że możemy po prostu ustawić prawy margines na pierwszej z 2 kolumn; coś takiego:

.col2:first-child {
    margin-right: 24px;
}

Ale to spowodowałoby zawinięcie drugiej kolumny do nowego wiersza, ponieważ jest prawdziwe:

50% + 50% + 24px > 100%

box-sizing: margin-box;rozwiązałoby ten problem poprzez uwzględnienie marginesu w obliczonej szerokości elementu. Uważam to za bardzo przydatne, jeśli nie bardziej przydatne niż box-sizing: border-box;.

Nie mógłbyś użyć width: calc(50% - 24px);dla swoich cols? Następnie ustaw marginesy.

Myślę, że moglibyśmy mieć box-sizing: margin-box . Model css box pokazuje dokładnie, jakie są pozycje marginesów ramek.

Występują drobne problemy - na przykład pola marginesów mogą się nakładać - ale nie są one trudne do rozwiązania.

Myślę, że sytuacja jest taka sama, jak widać z kombinacjami overflow-x& overflow-y, z absolutnie pozycjonowanymi elementami div w komórkach tabeli, z kombinacją min | max-width | height z wielkością pudełka i tak dalej.

Istnieją funkcje, naprawdę proste funkcje, których programiści przeglądarek po prostu nie rozwijają.

IMHO, box-sizing: margin-boxbyły bardzo przydatną funkcją. Inną przydatną funkcją był box-sizing: padding-box, który istnieje przynajmniej w standardzie, ale nie został zaimplementowany w żadnej z głównych przeglądarek. Nawet w najnowszym chrome!

Uwaga: komentarz @Oriol: Firefox zaimplementował box-sizing: padding-box. Ale inni tego nie zrobili i został usunięty ze specyfikacji. Firefox usunie go w wersji 50. Smutne.

Facet na górze pyta o dodanie marginesu do całkowitej szerokości, w tym dopełnienia i obramowania. Chodzi o to, że margines jest stosowany poza ramką, a dopełnienie i obramowanie nie, gdy używaszborder-box .

Próbowałem zrealizować ten border-marginpomysł. Odkryłem, że używając marginesu, możesz dodać klasę .lastdo ostatniego elementu (z marginesem, a następnie zastosować margines zerowy lub użyć:last-child/:last-of-type ). Lub dodaj równe marginesy dookoła (podobnie jak w powyższej wersji wypełnienia).

Zobacz przykłady tutaj: http://codepen.io/mofeenster/pen/Anidc

border-boxoblicza szerokość elementu + jego wypełnienie + jego obramowanie jako całkowitą szerokość. Więc jeśli masz 2 divsekundy, które mają 50% szerokości, będą sąsiadować. Jeśli dodasz 8pxdo nich wypełnienie, będziesz miał rynnę 16px. Połącz to z elementem do owijania - który również ma wyściółkę 8px- otrzymasz ładnie ułożoną kratkę z równymi rynnami dookoła.

Zobacz ten przykład tutaj: http://codepen.io/mofeenster/pen/vGgje

Ta ostatnia to moja ulubiona metoda.

Jestem pewien, że to wszystko jest oczywiste, ale i tak to napiszę, ponieważ ... cóż, potrzebuję ćwiczenia. Czy następujący wynik nie byłby tak skuteczny, jak box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingsłuży do kontrolowania, od którego punktu wypełnienie i obramowanie są oceniane w stosunku do całkowitego rozmiaru elementu. Więc chociaż nie jest koszerne dołączanie pxmarginesów o %szerokości (jak to zwykle bywa), łatwiej jest obliczyć, jaka powinna być względna wartość procentowa, ponieważ nie musisz uwzględniać dopełnienia i obramowań na zdefiniowanej szerokości.

Dzieje się tak, ponieważ atrybut box-sizing odnosi się do rozmiaru elementu po obliczeniu podanych wartości specyficznych dla wymiaru (dopełnienie, obramowanie). "box-sizing: border-box" ustawia wysokość / szerokość elementu i bierze pod uwagę dopełnienie oraz szerokość obramowania. Zakres marginesu elementu jest większy niż sam element, co oznacza, że ​​modyfikuje przepływ strony i otaczających ją elementów, a tym samym bezpośrednio zmienia sposób, w jaki element pasuje do jego elementu nadrzędnego w stosunku do elementów siostrzanych. Ostatecznie wartość atrybutu „margin-box” spowodowałaby poważne problemy i jest zasadniczo taka sama, jak bezpośrednie ustawienie wysokości / szerokości elementów.

W Codrops jest kilka dobrych artykułów na temat wpływu marginesów i wymuszonego przepełnienia wiersza. Sugerują użycie jednostki rem lub em z normalizatorem css ustawiającym rozmiar czcionki na 100% dla wszystkich przeglądarek, a następnie po ustawieniu szerokości i marginesów łatwo jest śledzić wpływ na szerokość wiersza, po prostu robiąc notatkę w komentarzach dla całkowita szerokość. Konwersja 16px na 1 em to sposób na obliczenie łącznej liczby wyświetlanych obszarów docelowych.

Pracując w ten sposób przynajmniej na etapie deweloperskim, a następnie, jeśli potrzebujesz „responsywnych” szablonów, możesz przekonwertować szerokości na%, w tym szerokości marginesów.

Innym i często prostszym sposobem radzenia sobie z rynnami jest użycie pseudo po i content: '';na każdej z twoich kolumn, które, jak uważam, działają naprawdę dobrze. Jeśli ustawisz klasę div, która jest zdefiniowaną jako ostatnia kolumna, na przykład end, możesz tak ustawić klasę, aby nie miała po niej pseudo, lub aby miała szerszą; który kiedykolwiek najlepiej pasuje do Twojego układu.

Dodatkową zaletą korzystania z tej metody pseudoelementu jest to, że daje ona również cel dla cieni, które mogą dać efekt 3D i większą głębię płaskiemu obrazowi na monitorze czytnika. W tej chwili eksperymentuję z tym efektem, zwiększając efekty używane na przyciskach, „poprawiając” gradienty i indeks Z.

Wymiary blokowych, niewymienionych elementów w normalnym przepływie muszą spełniać

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = szerokość zawierającego bloku

W przypadku nadmiernego ograniczenia przeglądarki muszą dostosować lewy lub prawy margines. Myślę, że oznacza to, że szerokość pola marginesu musi być równa szerokości bloku zawierającego (tj. 100%).

W Twoim przypadku przezroczyste obramowania box-sizing: border-boxmogą działać podobnie jak marginesy .

Być może ustaw obramowanie na 0% krycia za pomocą RGBA i użyj obramowania jako marginesu.

Ciekawa sytuacja występuje przy używaniu rozmiaru pudełka w treści ciała

no content no border box nie daje żadnej wartości na lewym-prawym marginesie% recount of this two box recount algoritms

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

Wersje przeglądarki Firefox starsze niż 57 również obsługiwały wartość padding-box dla rozmiaru pola, chociaż ta wartość została usunięta ze specyfikacji i późniejszych wersji przeglądarki.

Więc margines nawet nie jest planowany ...