Dzień dobry, zrobiłem sobie szachownice za pomocą html i css, następnie chciałem sprawdzić jak będzie zachował się element gdy dodam właściwość box-sizing:border-box. Niestety całość się rozwaliła, domyślam się, że musiałbym dodać do szerokości planszy 6px, ponieważ przy border-box border wchodzi w skład wysokości elementu. Natomiast nie rozumiem co jest powodem rozwalania się całej planszy. Poniżej link do kodu:
0
1
Tak obwódki powiększają elementy o ich grubość, i w dodatku nie nachodzą na siebie, dlatego przy zrobieniu tego w prosty sposób, zewnętrzne krawędzie pola będą miały grubość o połowę mniejszą niż wewnętrzna siatka. Musiałbyś robić specjalne klasy z grubszą obwódką dla kratek zewnętrznych. Tych klas musiałoby być dokładnie 8 (4 rogi, plus 4 boki). Podobnie gdybyś to chciał zrobić dla kratek wewnętrznych.
Chyba, że jest jakiś trik/dyrektywa w CSS, która powoduje nakładanie na siebie obwódek, ale wątpię. Jeżeli jest to sam chętnie bym się z tym zaznajomił.
1
Chyba, że jest jakiś trik/dyrektywa w CSS, która powoduje nakładanie na siebie obwódek, ale wątpię. Jeżeli jest to sam chętnie bym się z tym zaznajomił.
Nie wiem, czy można to nazwać triikiem, ale można do tego wykorzystać table oraz border-collapse: collapse.
https://developer.mozilla.org/pl/docs/Web/CSS/border-collapse
Drugim sposobem jest display: table i pochodne:
Zapożyczone demo: http://jsfiddle.net/R8eCr/5/
Źródło: https://stackoverflow.com/a/17915911/16880863
Trzeci sposób - ujemny margines:
Zapożyczone demo: http://jsfiddle.net/6eGdN
Źródło: https://stackoverflow.com/a/22647869/16880863
I czwarty sposób, który już można śmiało nazywać trikiem - wykorzystanie box-shadow:
Zapożyczone demo: https://codepen.io/savehansson/pen/DmxyEP
Źródło: https://stackoverflow.com/a/28807765/16880863
No i na koniec źródło wszystkich źródeł:
https://stackoverflow.com/questions/17915865/how-to-make-borders-collapse-on-a-div
2
Żadne z odpowiedzi wyżej nie odpowiadają na faktyczny problem.
jasper93 napisał(a):
Dzień dobry, zrobiłem sobie szachownice za pomocą html i css, następnie chciałem sprawdzić jak będzie zachował się element gdy dodam właściwość
box-sizing:border-box. Niestety całość się rozwaliła, domyślam się, że musiałbym dodać do szerokości planszy6px, ponieważ przyborder-boxborder wchodzi w skład wysokości elementu. Natomiast nie rozumiem co jest powodem rozwalania się całej planszy. Poniżej link do kodu:
Powodem rozwalenia się planszy jest to, że jak masz szerokość 400px, to po odjęciu 6px na dzieci zostaje Ci 394px, i w nich zmieści się 4 dzieci, a nie 5 (bo na 5 potrzebujesz mieć 5*80px = 400px), więc dzieci po prostu się wrapują (zawijają) i przechodzą do nowej linii (podobnie jak tekst, jak wpiszesz zbyt dużo znaków w edytor, to nowe znaki pokażą się poniżej).
Jeśli koniecznie chcesz mieć width: 400px, to musisz zmienić rozmiar dzieciom, tak żeby ich pięcioro zmieściło się w jednej linii. Masz 400px szerokości, odejmij po 3px na każdej ramce, masz do dyspozycji 394px, na pięcioro dzieci masz maksymalnie 78px, chociaż wtedy żeby było równo to musiałbyś mieć 5*78px=390px, czyli szerokość powinna być wtedy width: 396px (bo 5*78px + 2*3px).
Więc, jakie wyjścia masz:
- Użyj
box-sizing: border-box, i zwiększ całościowy rozmiar parenta - Użyj
box-sizing: border-boxi zmniejsz rozmiary dzieci - Nie używaj
border-box.
0
Dziękuje za solidną odpowiedź. Zmieniłem rozmiar dzieci na 78 px, rzeczywiście problem się rozwiązuje, ale występuje przerwa po prawej stronie kwadratów(Przy prawej ramce), na pewno to kwestia tego, że tak naprawdę rozmiar powinien być 78.8px, ale chyba tak się nie podaje rozmiarów.
1
jasper93 napisał(a):
Dziękuje za solidną odpowiedź. Zmieniłem rozmiar dzieci na 78 px, rzeczywiście problem się rozwiązuje, ale występuje przerwa po prawej stronie kwadratów(Przy prawej ramce), na pewno to kwestia tego, że tak naprawdę rozmiar powinien być 78.8px, ale chyba tak się nie podaje rozmiarów.
Pisałem o tym:
Riddle napisał(a):
Masz
400pxszerokości, odejmij po3pxna każdej ramce, masz do dyspozycji394px, na pięcioro dzieci masz maksymalnie78px, chociaż wtedy żeby było równo to musiałbyś mieć5*78px=390px, czyli szerokość powinna być wtedywidth: 396px(bo5*78px+2*3px).
...że musisz nadać szerokość podzielną przez 5 (po odjęciu tych 6px).
Jeśli ustawisz box-sizing: border-box; i chcesz mieć dzieci dobrze ułożone to masz takie wyjścia:
- Dzieci
76px, rodzic386px - Dzieci
77px, rodzic391px, - Dzieci
78px, rodzic396px - Dzieci
79px, rodzic401px - Dzieci
80px, rodzic406px - Dzieci
81px, rodzic411px
...i tak dalej.
Rozmiar rodzica to musi być: ilość dzieci * szerokość dzieci + 2*szerokość ramki.