CSS3: 56 pytań

left i transition: która z właściwości robi reflow? (chodzi o performance animacji)

senior

Napisz na kartce kod strony, który odzwierciedli wygląd szablonu. Użyj flexboxa.

mid
<div class="wrapper">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>
.wrapper {
 width: 240px;
}
.box {
 width: 50px;
 padding: 10px;
 margin: 5px;
 border: 2px;
 float: left;
}
  1. Jak będą wyświetlone elementy wewnątrz elementu .wrapper?
  2. Jaką wysokość będzie miał element .wrapper?
junior
<div id="wrapper">
	<p class="text"></p>
</div>
#wrapper {
 color: green;
}
.text {
 color: red;
}
#wrapper .text {
 color: yellow;
}
html > body .text {
 color: blue;
}

Jaki kolor będzie miał tekst w tagu p?

junior

Jaki kolor zostanie zaaplikowany?

// plik CSS
.menu h1 {
 color: red !important
}
// plik HTML
<div class="menu"> 
	<h1 style="color:blue;">Home</h1>
</div>
junior

Jak wyśrodkować element w pionie? (omów kilka różnych technik)

junior

W jaki sposób można zamienić 2 elementy <div> miejscami nie używając float. Podaj klika sposobów.

mid

Na co uważać przy float, gdy mamy np. 3 divy i na środkowy damy float: right ?

junior

Czym różni się display: inline, inline-block i block?

junior

Co w Bootstrapie oznacza pushowanie kolumn?

junior

Względem czego pozycjonuje się element, jeśli nie znajdzie rodzica o pozycji relatywnej?

junior

Container vs container-fluid (biblioteka Bootstrap) - jakie są różnice?

junior

Dodawanie czcionek poprzez link vs poprzez import. Co wybierzesz?

junior

Stylowanie elementów w CSS vs JavaScript. Co wybierzesz?

junior

Po co stosujemy normalizację CSS?

junior

Jaki kod (kolory) wyświetli powyższy mixin?

$color: #f00;

@mixin button($color: #fff) {
  font-size: 1.6rem;
  text-decoration: none;
  color: $color;
  @content;
}

.button-error {
  @include button {
    background-color: $color;
  }
}
mid

SASS: Jakie są różnice między @mixin, @function i @extends?

mid

Czy właściowości CSS margin-bottom i margin-top mają wpływ na inline element?

junior

Czegoś brakuje? Możesz dodać własne pytania!