CSS Prawidłowe rozmieszczanie elementów na stronie


(krzysio574) #1

Cześć! Zacząłem niedawno naukę CSS, ale mam jeden problem... Kiedy już okoduję stronę w html'u i zacznę zabawę w stylizacje wizualną, to jak prawidłowo określić rozmiar poszczególnych elementów w CSS'ie? Jedyny sposób to rzucić przykładowy wymiar np 40 px paddingu i odświeżyć stronę, czy może istnieje jakiś inny sposób na wcześniejsze dokładne obliczenie poszczególnych elementów? Bo np. jeśli wrzucę w diva 500px cztery divy po 125px, to nie uwzględni mi odstępów, a wymagalne będą np odstępy po 20px z każdej strony i teraz pytanie... Jak prawidłowo wszystko obliczyć? Biorę div'a, dla przykładu 500px i chcę zrobić cztery równe kwadraty w tym divie, daje im wymiar 125px i muszę doliczyć jeszcze, dla przykładu po 10px odstępu z każdej strony, to daje im wymiar 165px? Jak to tak szybko obliczać, co brać pod uwagę? Po prostu w tym prawidłowym obliczaniu rozmieszczenia poszczególnych elementów się gubię.

 

 


#2

<!DOCTYPE html>

<html>

<head>

<meta charset=“utf-8”>

<title></title>

 

<style>

#glowny {

width: 500px;

overflow: hidden;

box-sizing: border-box;

}

#glowny .main {

width: 125px;

float: left;

box-sizing: border-box;

height: 125px;

text-align: center;

padding: 35px;

 

}

#glowny .jeden {background: #ccc;}

#glowny .dwa {background: #ff9900;}

#glowny .trzy {background: #767676;}

#glowny .cztery {background: #ff0000;}

</style>

 

</head>

<body>

<div id=“glowny”>

<div class=“main jeden”><p>jeden</p></div>

<div class=“main dwa”><p>dwa</p></div>

<div class=“main trzy”><p>trzy</p></div>

<div class=“main cztery”><p>cztery</p></div>

</div>

 

</body>

</html>

 

 

 

Co daje taki kod. Masz jeden ogólny div o szerokości 500px a w nim 4 div’y każdy po 125px.  Opcja “ box-sizing: border-box “ sprawia że gdy w jednym z 4 div’ów dasz padding (tak jak ten text wnętrz 4 div’ów) to nie powiększy on jego rozmiaru. Jak tak zawsze robię. Skopiuj ten text i zapisz jako plik html i go obejrzyj. Z ciekawości usuń opcję “ box-sizing: border-box “ a zobaczysz co daje ta opcja.