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


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

Здравствуйте, уважаемые читатели сайта 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 и основы блочного моделирования

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

Так как мы задали фиксированную высоту блоку, то он уже не имеет право увеличиваться по высоте. Это, согласитесь, некрасиво и в 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 можно задавать

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

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях

Вам также понравится...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *