Rekruterzy dzwonią do Ciebie i chcą jak najszybciej sprawdzić Twoje umiejętności. O co pytają? To raczej proste pytania, ale w niektórych przypadkach znają te podchwytliwe.
Więc o co pytają?
Pytanie: (CSS)
Box model
Czy znasz box model? Proszę wymienić elementy box model.
To jest najbardziej fundamentalna wiedza o DOM i CSS. Elementy box model:
-
margin
-
padding
-
border
-
content
Więc gdy masz box opisany w CSS:
.box {
width: 100px;
height: 200px;
border: 10px solid #000;
margin: 20px;
padding: 30px;
}
jaka jest całkowita szerokość i całkowita wysokość boxa?
total_width = width + border_left + border_right + padding_left + padding_right + margin_left + margin_right
więc w tym przypadku to
total_width = 100 + 10 + 10 + 20 + 20 + 30 + 30 = 220 (px)
total_height = height + border_top + border_bottom + padding_top + padding_bottom + margin_top + margin_bottom
więc w tym przypadku to:
total_height = 200 + 10 + 10 + 20 + 20 + 30 + 30 = 320 (px)
Jak możemy ominąć problem liczenia całkowitej szerokości i wysokości? Użyj box-sizing w CSS.
Pytanie: (CSS)
Clearfix
Czym jest clearfix?
To jest głównie związane z elementami pływającymi w HTML / CSS. W przypadku gdy masz kontener z pływającymi elementami, musisz wyczyścić pływanie w ostatnim elemencie dzieci tego kontenera. W oldschoolowy sposób:
Kod HTML:
<div class="container">
<div class="floating"></div>
<div class="floating"></div>
<div class="clearboth"></div>
</div>
CSS
.container {}
.floating { width: 100px; height: 100px; float: left; }
.clearboth { clear: both }
Teraz gdy masz pseudoelementy :before i :after, nie musisz marnować dodatkowego tagu w HTML do czyszczenia floatów. Wystarczy dodać CSS do kontenera:
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
lub stworzyć standardowy, wielokrotnego użytku clearfix w ten sam sposób:
.container:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
