Робота з Блочними Елементами
Блочні елементи можна ідентифікувати як прямокутні, і вони накладаються один на одного. Вони не дають іншим елементам ділити з ними один рядок. Така поведінка досягається застосуванням властивості CSS:
![blcok level elements example](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/block-level+elements.png)
Основні міркування при роботі з блочними елементами:
- За замовчуванням вони мають значення
display: block
. - Їх
width
охоплює всю ширину, дозволену батьківським елементом. - Висота
height
спочатку визначається вмістом, але її можна налаштувати за допомогою CSS. - Кожен елемент блоку починається з нового рядка.
- Властивості
border
,margin
,padding
,width
іheight
можна налаштувати.
Тепер давайте розглянемо приклад, де ми маніпулюємо width
, height
і margin
:
index.html
index.css
index.js
Давайте розглянемо, як можна відцентрувати елемент всередині його батька.
index.html
index.css
index.js
Все було зрозуміло?
Зміст курсу
Основи CSS
Основи CSS
Робота з Блочними Елементами
Блочні елементи можна ідентифікувати як прямокутні, і вони накладаються один на одного. Вони не дають іншим елементам ділити з ними один рядок. Така поведінка досягається застосуванням властивості CSS:
![blcok level elements example](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/block-level+elements.png)
Основні міркування при роботі з блочними елементами:
- За замовчуванням вони мають значення
display: block
. - Їх
width
охоплює всю ширину, дозволену батьківським елементом. - Висота
height
спочатку визначається вмістом, але її можна налаштувати за допомогою CSS. - Кожен елемент блоку починається з нового рядка.
- Властивості
border
,margin
,padding
,width
іheight
можна налаштувати.
Тепер давайте розглянемо приклад, де ми маніпулюємо width
, height
і margin
:
index.html
index.css
index.js
Давайте розглянемо, як можна відцентрувати елемент всередині його батька.
index.html
index.css
index.js
Все було зрозуміло?