Пятница, 29 марта, 2024

Работа с блоками в CSS. Высота и ширина, выравнивание.

Софт и игры
Вячеслав Питель
Вячеслав Питель
Редактор сайта, опыт работы 10 лет, пишу на тему гаджетов, новостей в мире технологий, игр и софта admin@uspei.com, VK, OK, сот. 89132476241

Как задать высоту и ширину блока

Здравствуйте, уважаемые читатели сайта Uspei.com. Продолжим работу с блоками. Мы уже познакомились с их структурой и теперь наша задача научиться изменять их размеры. Запомните, если вы не задаете блоку конкретные размеры то по ширине он будет занимать все доступное пространство. По высоте – столько сколько нужно для размещения контента. Ширина блока задается уже знакомым нам свойством “width” и ее размеры можно указывать как в пикселях, так и в процентах. Чаще используются пиксели. Давайте, например, зададим ширину нашему блоку с заголовком Н1 с id=”header“.

#header {
 text-align: center;
 border: 4px solid #faa21a;
 padding: 40px;
 margin: 20px;
 width: 550px;
 }

Зададим ширину нашему блоку с заголовком Н1

При этом обратите внимание, что ширина задается ТОЛЬКО для места под контент (содержимое) и сюда не входят внутренний и внешний отступы, а также толщина самой рамки.

Ширина блока

Обратите внимание также на то, что так как место для контента составляет у нас теперь всего 550px и контент не умещается в одну строчку, то текст перенесся на вторую строку. И если мы добавим еще текста (например еще раз скопируем этот же), то мы увидим, что наш блок автоматически увеличивается по высоте, в то время как его ширина остается жестко фиксированной.

Блок в тексте

Теперь давайте попробуем задать высоту нашему блоку, и что же с ним будет? Высота задается свойством “height”, но кроме этого мы несколько раз скопируем и вставим текст нашего заголовка, чтобы текст НЕ помещался в нашем блоке.

#header {
 text-align: center;
 border: 4px solid #faa21a;
 padding: 40px;
 margin: 20px;
 width: 550px;
 height: 300px;
 }

Высота блока

Расположение текста внутри блока

Так как мы задали фиксированную высоту блоку, то он уже не имеет право увеличиваться по высоте. Это, согласитесь, некрасиво и в CSS есть правило отвечающее за поведение текста внутри блока. Называется это свойство “overflow” и с помощью него мы можем указывать тексту как себя вести: “hidden” – спрятать контент, который не помещается в блок, “auto” – создать полосу прокрутки для текста и еще одно значение, используемое браузером ПО УМОЛЧАНИЮ, это “visible” – оставить как есть.

#header {
 text-align: center;
 border: 4px solid #faa21a;
 padding: 40px;
 margin: 20px;
 width: 550px;
 height: 300px;
 overflow: hidden;
 }

overflow

#header {
 text-align: center;
 border: 4px solid #faa21a;
 padding: 40px;
 margin: 20px;
 width: 550px;
 height: 300px;
 overflow: auto;
 }

overflow: auto

Выравнивание блока по центру

Давайте теперь выровним наш блок по центру с помощью нашего свойства “margin” дополнив ему значение “auto”. Это скажет браузеру, что нужно подобрать одинаковое значение справа и слева. В то же время мы оставим внешние отступы сверху и снизу по 20px. Если не поняли почему, что, как и зачем – не расстраивайтесь, на практике мы разберем это подробнее.

#header {
 text-align: center;
 border: 4px solid #faa21a;
 padding: 40px;
 margin: 20px auto;
 width: 550px;
 height: 300px;
 overflow: auto;
 }

Выравнивание блока по центру

Давайте последним моментом разберем такой вопрос, что тег “body” по своей сути также является блоком и также можно задавать его размеры и положение.

body {
 font: 14px Tahoma;
 color: #333333;
 border: 2px solid #111111;
 padding: 0;
 margin: 0 auto;
 width: 700px;
 }

Положение тега body можно задавать

Таким образом создаются одностраничные сайты, о которых мы поговорим позже и даже создадим один из них сами.

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

Оставьте комментарий

Пожалуйста, введите Ваш комментарий
Пожалуйста, введите Ваше имя здесь

Гаджеты

Как выбрать Pod-систему

Если вы решили перейти с сигарет на вейпинг и выбираете свою первую Pod-систему, есть несколько важных аспектов, на которые...

Также на эту тему