CSS — Урок 8. Блоки
В HTML все элементы можно разделить на два типа: блочные и строчные.
Блочные элементы визуально создают самостоятельную структурную единицу — блок. К ним можно отнести, например, элементы H1-H6, P, DIV. Такие элементы отделяются от других абзацными отступами.
Строчные элементы выводятся линейной строкой. К ним можно отнести, например, элементы I, B, U, S и другие.
В CSS модель документа представляется блоком. Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Причем, есть блоки, структурно отделенные от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков.
Блок имеет прямоугольную форму:
Итак, у блока есть содержимое, например, для элемента p — это текст. Вокруг содержимого есть отступы (padding), они служат для того, чтобы текст не примыкал вплотную к границе блока. Фон отступов такой же, как и у содержимого.
Затем идет граница блока (border), которая может быть как видимой, так и невидимой.
Также блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока. Фон полей прозрачный, т.е. сквозь него просвечивает фон родительского элемента.
Размер блока, т.е. его ширина (width) и высота (height), определяются содержимым. И это надо запомнить: поля и отступы не учитываются в размере блока.
Способы задания всех этих свойств мы рассмотрим позже, а пока, чтобы стало понятнее, приведем пример. Пусть у нас есть html-страница с двумя абзацами:
Как сделать блоки в css
Нередко встречается ситуация, когда к вложенным в обтекающий блок элементам также применяется обтекание. Например, блок основного содержимого может включать блок собственно содержимого и блок меню. В принципе к таким блокам будут применяться все те же правила, что были рассмотрены ранее.
Определим сначала последовательно все блоки веб-страницы:
Блочная верстка в HTML5 div < margin: 10px; border: 1px solid black; font-size: 20px; height: 80px; >#header < background-color: #ccc; >#sidebar < background-color: #bbb; float: right; width: 150px; >#main < background-color: #fafafa; height: 200px; margin-right: 170px; >#menu < background-color: #ddd; >#content < background-color: #eee; >#footerШапка сайтаПравый сайдбарМенюОсновное содержимоеФутер
Опять же в главном блоке вложенные блоки идут последовательно: сначала блок меню, а потом блок основного текста.
Теперь применим обтекание к блоку меню:
#menu < background-color: #ddd; float: left; width: 160px; >#content
Опять же у плавающего элемента, коим является блок меню, устанавливаются свойства float и width . А у обтекающего его блока content устанавливается отступ слева.
Аналогично можно сделать блок меню справа:
#menu < background-color: #ddd; float: right; width: 160px; >#content
Как сделать блоки в css
25 ФЕВРАЛЯ 2022
CSS-класс для блоков
В настройках блоков появилась возможность задавать CSS-класс. Эта функция позволит удобнее работать с модификациями: вы задаёте класс блоку и указываете его название в html-коде.
Примеры и пошаговая инструкция, как применить новую функцию.
Градиент на текстовом блоке
Renner Yoga offers unique yoga classes for people of all skill levels. We will introduce you to a new way of life and feelings.
Как сделать
1 шаг
Добавьте блок с большим текстом, например, AB501.
- Откройте настройки блока, нажмите Добавить CSS Class Name;
- Задайте название класса, например, uc-about.
- Добавьте блок T123 HTML-код;
- Скопируйте код ниже и вставьте его в блок T123.
.uc-about .t-title → Сохраните изменения и опубликуйте страницу
Скруглённые фотографии
Some Words About Us
We are an interior design studio based in Wales. We work in three contemporary design styles: functional minimalism, eco, and modernist nouveau. We have a database of designers and architects inside and outside the company.
Как сделать блоки внутри блока?
Внутри родительского блока сделать отступ дочернего блока сверху автоматически
Здравствуйте, как с помощью css внутри родительского блока сделать отступ дочернего блока сверху.
Как сделать два косых блока (один внутри второго)?
Добрый вечер. Не выходит сделать подобное. Пытался так: https://codepen.io/vlad-spesiwec/pen/oKeZvY.
Как сделать отступы внутри блока с обеих сторон для текста?
Как сделать отступы внутри блока div с обеих сторон для текста?
565 / 464 / 183
Регистрация: 14.10.2017
Сообщений: 1,259
63 / 55 / 10
Регистрация: 12.02.2019
Сообщений: 303
klopp, Забыл указать что без гридов надо сделать))
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
Anvean, так вам и скинули на flex а не на грид(ы)
Сделайте на float
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
div class="box"> div class="item"> div class="content"> img src="https://www.placehold.it/24" alt=""> h4>Hello/h4> p>some text about some fish/p> /div> /div> div class="item">img src="https://www.placehold.it/240" alt="">/div> div class="item"> div class="content"> img src="https://www.placehold.it/24" alt=""> h4>Hello/h4> p>some text about some fish/p> /div> /div> div class="item">img src="https://www.placehold.it/240" alt="">/div> div class="item">img src="https://www.placehold.it/240" alt="">/div> div class="item"> div class="content"> img src="https://www.placehold.it/24" alt=""> h4>Hello/h4> p>some text about some fish/p> /div> /div> div class="item">img src="https://www.placehold.it/240" alt="">/div> div class="item"> div class="content"> img src="https://www.placehold.it/24" alt=""> h4>Hello/h4> p>some text about some fish/p> /div> /div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; } .box { font: 16px/24px Arial, sans-serif; margin: 10px auto; max-width: 960px; padding: 0 20px; } .box:after { conttent: ' '; display: block; clear: both; } .box .item { width: 25%; float: left; height: 200px; background-color: #fff; } .box .item > img { display: block; width: 100%; height: 100%; object-fit: cover; } .box .item .content { text-align: center; padding: 49px 20px; }
63 / 55 / 10
Регистрация: 12.02.2019
Сообщений: 303
novichek_1905, box прилипает к верху Хэдэра, как это исправить? ксс код прилагается.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
.body{ font-size: 16px; } .row:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .row{ display: inline-block; } * html.row{ height: 15%; } .row{ display: block; } .header{ } .in-header{ height: 400px; background-color: #DE2B24; } * { margin: 0; padding: 0; box-sizing: border-box; } .box { margin-top: auto; font: 16px/24px Arial, sans-serif; margin: auto; max-width: 860px; padding: 0 20px; } .box:after { content: ' '; display: block; clear: both; } .box .item { width: 25%; float: left; height: 150px; background-color: #fff; } .box .item > img { display: block; width: 100%; height: 100%; object-fit: cover; } .box .item .Head-content { text-align: center; padding: 49px 20px; } .content{ width: 100%; float: left; background-color:#1286BF; } .in-content{ height: 400px; } .footer{ } .in-footer{ background-color: #2A2A2A; height: 200px; }
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
Сообщение от Anvean 
Хэдэра, как это исправить?
.header{margin-bottom: 100px;}
63 / 55 / 10
Регистрация: 12.02.2019
Сообщений: 303
novichek_1905, Если вам не сложно, подскажите как должен выглядеть этот же макет только уже с css Grid, насколько я понимаю нужно добавить в хэдэр свойство грид, и в нем сделать 2 строки по 4 колонки, вопрос как это все разместить по центру и как управлять отдельно каждой ячейкой?
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
Anvean, я не оч понял, вам нужно переделать мой код, который я присылал ранее под грид, или какой макет?
63 / 55 / 10
Регистрация: 12.02.2019
Сообщений: 303
novichek_1905, да, код остаётся тот же, если у вас нет времени код не обязательно, главное на правильную мысль натолкните:)
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
Сообщение было отмечено Anvean как решение
Решение
Anvean, сделайте вот так типа:
1 2 3 4 5 6 7 8 9 10
div class="box"> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
* { margin: 0; padding: 0; box-sizing: border-box; } .box { max-width: 960px; margin: 0 auto; display: grid; grid-template: repeat(2, 1fr)/repeat(4, 1fr); } .box .item { height: 200px; background-color: darkred; } .box .item:nth-child(-n + 4):nth-child(odd), .box .item:nth-child(n + 5):nth-child(-n + 8):nth-child(even) { background: gray; }
стили для «шахматки» это просто пример для лучшего визуального восприятия.
63 / 55 / 10
Регистрация: 12.02.2019
Сообщений: 303
novichek_1905, Cпасибо большое, осталось немного непонятно как завернуть этот бокс в два класса, допустим в wrapper и header, покрутил попробовал, но не работает
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
Сообщение от Anvean
как завернуть этот бокс в два класса, допустим в wrapper и header
боюсь не понимаю о чем идёт речь.
63 / 55 / 10
Регистрация: 12.02.2019
Сообщений: 303
novichek_1905, div с классом box поместить еще в два diva с классами wrapper и header
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
Anvean, а зачем так? Почему они должны находиться в такой вложенности?
63 / 55 / 10
Регистрация: 12.02.2019
Сообщений: 303
novichek_1905, Нуу, разбить страницу на аспекты, типо хэдэра контента футера, и работать с ними по отдельности, или Grid позволяет как-то уйти от этого?
Вот так выглядит вся страница, для понятности
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
Сообщение от Anvean
на аспекты, типо хэдэра контента футера
там нет header
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
section class="section"> div class="container"> div class="section-title text-center"> h1>Some title/h1> div class="text">Some text/div> /div> div class="box"> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> div class="item">/div> /div> /div> /section>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
* { margin: 0; padding: 0; box-sizing: border-box; } .section-title { font-family: Arial; text-align: center; margin-bottom: 40px; color: #fff; } .section { background-color: darkgreen; padding: 50px 0; } .container { max-width: 960px; margin: 0 auto; } .box { display: grid; grid-template: repeat(2, 1fr)/repeat(4, 1fr); } .box .item { height: 200px; background-color: darkred; } .box .item:nth-child(-n + 4):nth-child(odd), .box .item:nth-child(n + 5):nth-child(-n + 8):nth-child(even) { background: gray; }
63 / 55 / 10
Регистрация: 12.02.2019
Сообщений: 303
novichek_1905, Спасибо, подскажите еще — можно ли каким-то свойством Grid ограничить максимальный размер ячейки?
Добавлено через 6 минут
novichek_1905, Уже разобрался, еще раз спасибо:)
63 / 55 / 10
Регистрация: 12.02.2019
Сообщений: 303
novichek_1905, Если позволите)..
Еще вопросик как выравнивать этот grid вот это
Должно быть вот так..
Код прилагается, как не крутил не хочет выравниваться и все, а если и выравнивает то сильно обрезает длинну..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
section class="Ssection"> div class="Cconteiner"> div class="section-title text-center"> h1>Some title/h1> div class="text">Some text/div> /div> div> div class="round">p>✓/p> /div> div class="geom"> /div> /div> div class="formcontainer"> p class="text1">Sit down with pur experts to receive a free customixes marketing plan for your business + Learn How To Use Google and Facebook to get 5000% ROI or more/p> form> input class="iteminp" type="text" name="username" placeholder="Your Name"> input class="iteminp" type="number" name="number" placeholder="Contact Number"> input class="iteminp" type="text" name="company" placeholder="Company Name"> br> input class="itemsubmit" type="submin" name="submit" value="SUBMIT NOW"> /form> /div> /div> /section>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
.Ssection{ background-color:#1286BF; height: 850px; padding: 50px 0; } .round { color: white; width: 2.5em; height: 2.5em; border: 2px solid white; border-radius: 50%; line-height: 2.5em; text-align: center; background: #1286BF; margin-top: 10px; margin-left: auto; margin-right: auto; } .round :hover{ -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); } .geom{ width: 30px; margin: auto; border: 30px solid transparent; border-bottom: 30px solid white; } .formcontainer{ margin: auto auto auto auto; background-color: white; height: 450px; width: 680px; padding-right: 50px; padding-left: 50px; border-radius: 2%; } form{ display: grid; align-items: center; align-self: center; grid-template-columns: 480px; grid-gap: 16px; } form .iteminp{ height: 50px; font-size: 18px; margin-top: 10px; border-radius: 4px; padding-left: 10px; background-color: #f1f1f1; } form .itemsubmit { text-align: center; font-weight: 600; width: auto; height: 50px; background-color: red; color: white; padding: 13px,20px; border-radius: 4px; margin: auto; } .itemsubmit:hover{ transform: scale(1.07); color: lightcyan; } .text1{ font-size: 16px; text-align: center; padding-top: 55px; padding-bottom: 30px; color: lightgray; }