Работа с блоками в 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;
 }

Высота блока

К оглавлению ↑
Смотрите также:  5 ошибок оптимизации, которые держат ваш сайт на второй странице

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

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

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

0

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

Помоги проекту - подпишись на наш Яндекс.Дзен канал!

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

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