Last active
September 25, 2021 11:21
-
-
Save sb-bilal-dev/a99ce7a90de5d138dade97df0ff80ffd to your computer and use it in GitHub Desktop.
Вопросы по CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Вопросы по CSS</title> | |
</head> | |
<style> | |
.question { | |
position: relative; | |
} | |
.centered-container { | |
background: silver; | |
height: 200px; | |
} | |
.centered-container__bluebox { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
height: 20px; | |
width: 20px; | |
background: blue; | |
} | |
.centered-flexbox { | |
background: silver; | |
height: 200px; | |
display: flex; | |
justify-content: space-around; | |
align-content: center; | |
} | |
.centered-flexbox__bluebox { | |
height: 20px; | |
width: 20px; | |
background: blue; | |
} | |
.red { | |
color: red; | |
} | |
</style> | |
<body> | |
<div class="question"> | |
<h1>Questions</h1> | |
<p class="red"> | |
Important!: Не писать ответы прямо в Гист. Зделайте форк и отправте | |
ссылку на ответы. | |
</p> | |
<p> | |
Ссылка на Sandbox: https://codesandbox.io/s/1f0dv?file=/index.html | |
</p> | |
<h2>1. Сenter Blue Div</h2> | |
<p> | |
Исправь ошибку и зацентрируй голубой див елемент по вертикали и по | |
горизонтали по серому контейнеру.<br /> | |
</p> | |
<div class="centered-container"> | |
<div class="centered-container__bluebox"></div> | |
</div> | |
</div> | |
<div class="question"> | |
<h2>1. Сenter Blue Div 2</h2> | |
<p> | |
Здесь голубой див должен быть зацентрирован по вертикали.<br /> | |
Какая здесь была ошибка? | |
</p> | |
<div class="centered-flexbox"> | |
<div class="centered-flexbox__bluebox"></div> | |
</div> | |
</div> | |
<div class="question"> | |
<h2>2. Сenter Blue Div 2</h2> | |
<p> | |
Здесь голубой див должен быть зацентрирован по вертикали и | |
горизонтали.<br /> | |
Какая здесь была ошибка? | |
</p> | |
<div class="centered-flexbox"> | |
<div class="centered-flexbox__bluebox"></div> | |
</div> | |
</div> | |
<div class="question"> | |
<h2>3. Сenter Blue Div 3</h2> | |
<p> | |
1. Какие варианты центрирования елемента по горизонтали еще знаете? | |
<br />2. Какие варианты центрирования елемента по вертикали еще знаете? | |
</p> | |
</div> | |
<div class="question"> | |
<h2>1. Сenter Blue Div 3</h2> | |
<p> | |
В чем разница между <code>display: block;</code> и | |
<code>display: inline;</code>? | |
</p> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Строго просим не писать ответы прямо в этот Гисть. (Можно форкать)