Как задать высоту и ширину блока
Здравствуйте, уважаемые читатели сайта Uspei.com. Продолжим работу с блоками. Мы уже познакомились с их структурой и теперь наша задача научиться изменять их размеры. Запомните, если вы не задаете блоку конкретные размеры то по ширине он будет занимать все доступное пространство. По высоте – столько сколько нужно для размещения контента. Ширина блока задается уже знакомым нам свойством “width” и ее размеры можно указывать как в пикселях, так и в процентах. Чаще используются пиксели. Давайте, например, зададим ширину нашему блоку с заголовком Н1 с id=”header“.
#header { text-align: center; border: 4px solid #faa21a; padding: 40px; margin: 20px; width: 550px; }
При этом обратите внимание, что ширина задается ТОЛЬКО для места под контент (содержимое) и сюда не входят внутренний и внешний отступы, а также толщина самой рамки.
Обратите внимание также на то, что так как место для контента составляет у нас теперь всего 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; }
#header { text-align: center; border: 4px solid #faa21a; padding: 40px; margin: 20px; width: 550px; height: 300px; 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; }
Таким образом создаются одностраничные сайты, о которых мы поговорим позже и даже создадим один из них сами.