CSS. Работа с блоками (Урок 5)

Оглавление:

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

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

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

}css блоки

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

css блок

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

css

 

Теперь давайте попробуем задать высоту нашему блоку, и что же с ним будет? Высота задается свойством «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;
}

css

 

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

css

К оглавлению ↑

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

Давайте теперь выровним наш блок по центру с помощью нашего свойства «margin» дополнив ему значение «auto», что скажет браузеру, что нужно подобрать одинаковое значение справа и слева. В тоже время мы оставим внешние отступ сверху и снизу по 20px (если не поняли почему, что, как и зачем — не расстраивайтесь, на практике мы разберем это подробнее 🙂 ).

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

css

 

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

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

css

 

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

На этом урок закончим и займемся более «живой» темой — установкой фонового цвета и изображений.

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


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

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

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

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