Параметры css width и height для задания размеров элементов html страницы. Блочная верстка плавающих блоков DIV Clear FIX Из чего выбрать или методы
В современной верстке, на веб-страницах часто можно встретить блоки, которые занимают 100% ширины страницы.
Это выглядит вот так:
Давайте разберемся, каким образом можно добиться такого эффекта.
Для примера, давайте рассмотрим следующую ситуацию.
Смотрим на результат, который получился.
В целом хорошо, но по бокам блока видны небольшие отступы, которые портят всю картину. Хотелось бы их убрать.
Первое, что приходит на ум, это присвоить блоку свойство width:100%. Но, это никак не изменит ситуацию. Можете сами в этом убедиться.
Поэтому свойство width:100% можете смело убирать.
В чем же реальная причина таких отступов?
Дело в том, что блок div, ширину которого мы хотим сделать 100% хранится в двух родительских элементах body и html. По умолчанию, браузеры задают им определенные значения для свойств padding и margin.
Для того, чтобы решить проблему, нужно всего-лишь обнулить эти отступы. Сделать это очень просто:
Смотрим, как выглядит блок теперь.
Все отлично, пространство, которое было по бокам, было убрано.
Возможно, вам будут интересна моя услуга верстки посадочных страниц. Тогда, нажмите на ссылку ниже, чтобы узнать об этом подробнее.
Услуга верстки посадочных страниц.
На сегодня представлено достаточно большое количество экранов, которые имеют различные разрешения, а значит и сайты на них отображаются по-своему. Это обязательно нужно учитывать при написании кода и соблюдать правила верстки для разных экранов
.
В предыдущей статье, мы уже рассмотрели, как можно выполнить верстку для разных браузеров, здесь же речь пойдет о разных экранах и их разрешениях.
Одним из способов «борьбы» с различными разрешениями является использование резиновой верстки. При этом сайт будет растягиваться и сжиматься под разные разрешения, это можно увидеть на сайтах при изменении ширины браузера. На моем сайте напротив, используется статическая верстка.
Чтобы применить верстку для разных экранов, поможет правило стилей @media . Например,
@media (max-width:1024px;) {
All {padding: 10px;}
Данная запись говорит о том, что для класса all будет применены отступы в 10px в том случае, когда разрешение экрана будет до 1024px .
Если требуется указать правило для промежуточных экранов, то запись будет следующая:
@media (min-width:1024px;) and (max-width:1640px) {
.all {padding: 10px;}
table {width:80%}
}
В этом случае свойства стилей будут применены для экранов, которые используют разрешения от 1024 до 1640px.
В том случае, если для определенного разрешения будет большое количество различных стилей, то рациональнее будет вынести их в отдельный файл. Для этого, при указании пути из основной страницы сайта, нужно выполнить такую запись в пределах :
Когда нужно указать правила только для мобильных устройств (планшеты, смартфоны), то в данном случае применяется запись max-device-width или min-device-width для обозначения максимального и минимального разрешений соответственно.
Также можно обозначать использование правил только для экранов мониторов, при этом применяется атрибут — screen . Запись будет иметь вид:
@media screen (max-width:1380px) { … }
Она обозначает, что стили будут применены только к настольным компьютерам, с шириной экрана до 1380px.
Таким же образом, вместо screen, можно указывать handheld (мобильные устройства), print (принтеры), projection (проекторы), tv (телевизоры).
Если Вы хотите уведомлять своих посетителей о последних новинках, сообщать последние новости, то можете заказать рассылку по электронной почте, которая реализовывается с помощью специального сервиса. Он поможет вам без забот вести удобную и качественную рассылку.
width в процентах%
Процент это единица измерения элемента относительно содержащего его блока. Это здорово работает для изображений: здесь мы устанавливаем габариты для изображения, ширина которого всегда равна 50% от ширины контейнера. Попробуйте сузить размер окна браузера, чтобы увидеть что происходит!
Вы даже можете использовать и что бы ограничить максимальный и минимальный размер картинки!
percent width layout
Вы можете использовать процент для создания шаблона, однако такой подход потребует больше работы. В этом примере, содержание элемента начинает обволакиваться неприятным образом, когда окно браузера слишком узкое. Все зависит от того, что лучше работает с вашим контентом.
Когда макет слишком узкий, элемент сплющивается. Хуже того, вы не можете использовать для nav чтобы это исправить, потому как данное свойство не удержит от наступления колонку справа.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
Высота div равная ширине на CSS
Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
Адаптируем страницу под размер окна браузера
В настоящее врямя существует множество цифровых устройств с различными размерами экранов, от смартфонов до телевизоров с диагональю 42 дюйма и выше. Как полагается, на всех этих устройствах различные разрешения (примерно от 320х240 до 1920х1200) и под каждое из этих разрешений часто бывает необходимо адаптировать веб-страницу. Делается это при помощи media queries — части спецификации CSS3, позволяющей задать область действия селектора. Media queries представляет собой блок с указанием параметров устройства вывода, такие как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве. Начинается всё с правила @media , следом за которым записываются типы устройств, логические операторы и медиа-функции. В списке ниже отметим все 3 логических оператора.
- and — логическое «И», применяется для объединения нескольких условий;
- not — логическое «НЕ», применяется для отрицания какого-либо условия;
- , — логическое «ИЛИ», если хотя бы одно из условий соблюдается, тогда стиль будет применён.
Теперь рассмотрим медиа-функции. С их помощью задаются технические характеристики устройств (например размер окна браузера). Их 12 штук в настоящее время.
- aspect-ratio (min-aspect-ratio, max-aspect-ratio) — определяет соотношение ширины к высоте отображаемой области. Обозначается 2/3 например, то есть 2 числа, разделённые знаком «/»;
- color (min-color, max-color) — определяет количество бит на один канал цвета. Значение min-color:2 обозначает, что каждый из трёх каналов цветовой системы RGB может отображать 2 2 оттенков и все вместе 4*4*4=64 различных цвета. Если значение не указано вообще, тогда проверяется цветное оно или нет;
- color-index (min-color-index, max-color-index) — определяет количество цветов, которое поддерживает устройство;
- device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) — определяет соотношение сторон экрана устройства (2 числа через слэш, например 4/3);
- device-height (min-device-height, max-device-height) — определяет всю доступную высоту экрана устройства или печатной страницы;
- device-width (min-device-width, max-device-width) — определяет всю доступную ширину экрана устройства или печатной страницы;
- grid — определяет, что это устройство с фиксированным размером символов (терминал или телефон);
- height (min-height, max-height) — задаёт высоту отображаемой области;
- monochrome (min-monochrome, max-monochrome) — определяет, что устройство монохромное, в случае присвоения какого-либо значения, обозначается количество бит на на один пиксель. Например, значение 8 равнозначно 2 8 оттенкам цвета монохромного дисплея;
- orientation — определяет, что устройство находится в альбомном режиме, значение landscape или портретном значение portrait ;
- resolution (min-resolution, max-resolution) — определяет разрешение устройства в dpi (точек на дюйм) или dpcm (точек на сантиметр);
- scan — определяет тип развертки телевизора - череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, в прогрессивной развёртке кадр передаётся и показывается целиком;
- width (min-width, max-width) — задаёт ширину отображаемой области;
А теперь пример.
Размеры блочных элементов в CSS
Создадим веб-страницу, а стиль для неё зададим при помощи media queries.
Теперь задаём таблицу стилей:
#main {
font-size:14px;
}
@media screen and (max-width:800px){
#header{
background:#ff6633;
width:100%;
height:10%;
}
#topmenu{
text-align:center;
background-color:#ffcc66;
width:100%;
height:12%;
}
#topmenu a{
color:blue;
text-decoration:none;
}
#topmenu a:hover{
color:blue;
text-decoration:underline;
}
#content{
background-color:#ffccff;
float:left;
width:80%;
height:68%;
}
#sidebar{
float:left;
background-color:#ff9966;
width:20%;
height:68%;
}
#sidebar a{
display:block;
padding-bottom:3px;
color:blue;
text-decoration:none;
}
#sidebar a:hover{
color:blue;
text-decoration:underline;
}
#footer{
clear:both;
background-color:#ffff33;
width:100%;
height:10%;
}
}
@media screen and (min-width:800px){
#main {
width:800px;
margin:0 auto;
}
#header{
background:#ff6633;
width:800px;
height:100px;
}
#topmenu{
text-align:center;
background-color:#ffcc66;
width:800px;
height:30px;
}
#topmenu a{
color:blue;
text-decoration:none;
}
#topmenu a:hover{
color:blue;
text-decoration:underline;
}
#content{
background-color:#ffccff;
float:left;
width:650px;
height:400px;
}
#sidebar{
float:left;
background-color:#ff9966;
width:150px;
height:400px;
}
#sidebar a{
display:block;
padding-bottom:3px;
color:blue;
text-decoration:none;
}
#sidebar a:hover{
color:blue;
text-decoration:underline;
}
#footer{
clear:both;
background-color:#ffff33;
width:800px;
height:50px;
}
}
Рассмотрим теперь сам код. С html-документом всё понятно, подключаем к нему стиль mediastyle.css . В таблице стилей сначала задаём размер шрифта. Далее говорим, что если ширина экрана (окна браузера) меньше, чем 800 пикселей, тогда для него будут выполняться следующие правила и задаём размеры всех блоков в процентах от ширины окна. Если же ширина экрана больше, чем 800 пикселей, задаём размеры всех блоков в пикселях и устанавливаем местоположение содержимого по центру страницы, при помощи значения свойства margin:0 auto; . Здесь используем для позиционирования плавающие блоки. На этом закончим изучение CSS. Пример созданной нами страницы можно увидеть здесь. Более подробно изучить каскадные таблицы стилей можно при помощи различной литературы и всемирной паутины.
<<Предыдущая | В раздел
Казалось бы что сложного в вёрстке. HTML и CSS даже не языки программирования. HTML страница это просто блоки размещённые в нужном месте. На самом деле всё не так просто. Садиться за вёрстку не разобравшись в нюансах блочной модели значит убить много времени на подгон результатов методом тыка каждый раз удивляясь неожиданным результатам или их отсутствию. В сайтостроении как и в строительстве, если хотите построить что-нибудь посерьёзней забора нужно знать тонкости.
css свойства для определения высоты и ширины блока.
По умолчанию блок в ширину занимает всё доступное ему пространство и ограничивается шириной родительского блока. Высота блока определяется его содержимым.
Размеры блока можно менять использую свойства height и width.
Как задавать в css размер блока
Эти свойства задаются не для всего блока а для его содержимого. Это нужно помнить потому что кроме содержимого на размер блока оказывают влияние ещё два свойства — border и padding. По названию можно понять что border определяет границу. На картинке граница обозначена красной линией. Пространство между границей и содержимым определяют с помощью свойства padding. Если его не задать то текст на картинке ниже вплотную прижмётся к границе.
Таким образом высчитывая размер блока кроме width и height нужно учитывать padding и border. Для примера посчитаем размер блока для которого заданны следующие значения
- border:5pxsolidred;
- padding:10px;
- width:200px;
Ширина блока 200px+10px*2+5px*2=230px
Чтобы не забивать голову арифметикой и всегда точно знать размер блока есть свойство box-sizing. Принимает три значения.
- content-box — Значение заданные в width и height относятся только к содержимому.
- padding-box — Значение заданные в width и height определяют размер содержимого плюс размер отступа(padding).
- border-box — Значение заданные в width и height определяют размер содержимого плюс отступ(padding) плюс граница(border)
Если в пример выше добавить строчку
размер блока будет заявленные 200px, а ширина содержимого уменьшится до 200px-10px*2-5px*2=170px.
margin как правильно задать расстояние между блоками.
Говорить о блоках и не упомянуть о margin будет неправильно тем более рассказать есть что. Для тех кто не в курсе margin определяет свободное пространство вокруг блока. В отличии от padding здесь не всё так очевидно. Рассмотрим два блока один вложен в другой. Задаём вложенному блоку margin: 10%. Сразу возникает вопрос от чего отсчитывать эти проценты. Проценты берутся от ширины родительского элемента. При этом не важно определяем мы горизонтальные или вертикальные отступы. Ответ, прямо скажем, не очевиден, но если посмотреть объяснения становиться ясно отчего выбран именно такой вариант.
Сюрпризы на этом не заканчиваются. margin добавленный к нашей картинке даст такой неожиданный результат.
Серым на картинке обозначен родительский блок. Вопреки нашим ожиданиям margin примененный к дочернему блоку не раздвинул сверху и снизу границы родительского. Произошло это потому что у родительского блока не от чего отталкиваться. В таких случаях margin выносится на ружу и отталкивается от соседнего блока или границ блока расположенного уровнем выше. Чтобы блок отталкивался от родительского нужно чтобы у родительского блока были заданны padding или border или свойство overflow с любым значением кроме visible.
Ещё одна особенность отступов это схлапывание. Смысл в том что если у двух соседних элементов задан margin то расстояние между ними будет равно наибольшему значению.
margin может принимать отрицательные значения. В этом случае один блок будет перекрывать другой. То насколько один блок наползёт на другой определяется
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры
,
Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (, например).
Запрещено добавлять внутрь встроенных элементов блочные (пример 1).
Пример 1. Использование блочных элементов
В данном примере абзац (тег
) вставляется внутрь контейнера
. Кстати, ошибкой будет поступить наоборот — добавить в контейнер (Ut wisi
), поскольку тег не относится к блочным элементам.
Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними.
К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.
Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег
в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.
Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width), отступов (margin), полей (padding) и границ (border). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример 2. Ширина слоя
В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width.
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto, это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег
). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется свойство width, поэтому оно определяется по умолчанию — auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.
Высота
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Результат данного примера продемонстрирован на рис. 3.
Рис. 3. Высота блока в разных браузерах
Видно, что браузер оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.
Цвет фона
Цвет фона элемента проще всего устанавливать через универсальное свойство background. Фоном при этом заливается область, которая определяется значениями width, height и padding (рис. 4).
Параметры для блоков в CSS
Область слоя, которая заполняется фоновым цветом
Таким образом, margin не принимает участия в формировании цветной области.
Границы
Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.
а. Internet Explorer 7
б. Firefox, Internet Explorer 8+
Рис. 5. Отображение рамки в браузерах
В примере 5 показано, как создать код для получения подобной границы.
Пример 5. Пунктирная рамка
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.
Резюме
Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width, но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height, поскольку по умолчанию браузер применяет аргумент auto, который заставляет настраивать размеры элемента автоматически.
О преимуществах div"ной верстки перед табличной - никому наверное рассказывать не надо. Все это уже давно поняли и перешли на них с таблиц. Ну а те кто не перешел - вскоре поймут свои ошибки и это сделают. Но как и в любом занятии - тут также есть свои подводные камни. То дивы ведут себя не так как надо, то не получается сверстать какую нибудь определенную структуру, преград много, а верстальщик всегда один…
Данный пост предназначен скорее для начинающих, но вдруг и профи найдут тут что-то интересненькое. Так что давайте приступим уже к делу!
Об этом стоит всегда помнить
Существует один подход в верстке, которого нужно придерживаться как можно чаще и вернее. Это минерализация дерева DOM. Имеет это несколько вполне обоснованных преимуществ: упрощает сам процесс верстки, сводит количество потенциальных ошибок к минимуму, улучшает прозрачность кода. Об этом надо помнить всегда, и в моменте планирования структуры обращать на это особо много внимания. Основные принципы таковы: для отступов используем только padding и margin (в зависимости от потребности) - делать отдельный 20 пиксельный div вовсе не обязательно, ограничиваем вложенность до минимума, не переусердствуем с position:relative и последующими смещениями блока (при неправильном использовании может привести к получасовой правке целого кода), активно пользуемся z-index для достижения нужного эффекта.
FAQ
- Как выставлять div"ы друг за другом?
А для этого используется свойство - float: left (или right, в зависимости от потребности), чтобы следующий div после таких поочередных стоял под ними, задаем ему свойство clear (например clear:left). - Как выровнять div по центру?
Одно из решений выглядит следующим способом - задаем margin-left и margin-right как auto (или еще проще - margin:0 auto;)
- Как позиционировать элементы находящиеся в div по вертикали?
Зависит от элемента, например для текста хватит всего лишь указания vertical-align:middle, а для картинки нужно прописать line-height:Npx.
- Делать отступы при помощи margin или padding?
В основном - margin служит для отступов между блоками, это отступ «наружу», так как padding - отступ «внутрь» и чаще всего применяется для организации отступа вокруг текста к примеру. Вроде бы простая вещь, а иногда файрбагом можно такие перлы встретить, что я не мог тут об этом не упомянуть.
- Смещать блок при помощи margin или position:relative в связке со смещениями по горизонтали и вертикали?
Конечно же в данных случаях надо использовать margin. Правда как и везде - все зависит от конкретного случая, но в основном следует пользоваться все таки margin.
- Как растянуть div по содержимому блока?
Для этого надо прописать height: auto;
Как растянуть div по высоте родителя, который в свою очередь растягивается по высоте содержимого div"a находящегося внутри него, рядом с первым div"ом?
Div"у с контентом задаем height: auto, двум остальным дивам height: 100% и display: table;
- Как сделать div невидимым?
При помощи манипуляций свойством display. Для невидимости выставляем его на none.
- Как сделать прокрутку контента в div со статической высотой?
Прописываем в свойствах overflow:scroll.
- Как отобразить (к примеру) тэг «a» как div (блок)?
В свойствах задать высоту и ширину и выставить display:block;
Вот и все, что нужно знать чтобы безболезненно верстать на div"ах. На самом деле. Ну если всплывут еще какие нибудь вопросы, тогда тут сразу же появятся и ответы! А вообще-то тут нечего боятся - пол часа тренировок и вы уже профи! Так что отставляйте эти устаревшие table - и переходите на новую ступень эволюции!
Теги:
faq, div, верстка, самоучитель
Clearfix хак популярный способ правильного отображения плавающих блоков, позволяющий не прибегать к помощи таблиц при верстке. Необходимость в нем возникает когда вы начинаете замечать, что высота родительского блока DIV не соответствует содержимому наследников. К примеру вы задумали такую организацию блоков у себя на сайте (для наглядности родительский блок выделен желтым цветом, а дочерние — зеленым и красным
):
Для чего написали такую HTML страницу:
Clear-FIX
DIV Left
DIV Right
и к ней соответствующий CSS файл стилей:
Div-main {
margin: 0 auto;
padding: 20px;
background: #eeee33;
width: 320px;
}
.div-left {
padding: 20px;
background: #339933;
float: left;
width: 100px;
}
.div-right {
padding: 20px;
background: #cc0033;
float: right;
width: 100px;
}
Однако в реальности вы получите такую картинку:
Родительский DIV не обнимает дочерние. То есть не растягивается по высоте входящих в него блоков. И никакой ошибки тут нет, просто в верстке используют плавающие блоки (свойство FLOAT). Плавающие элементы вырываются из текущего потока и создают в родительском контексте между собой собственный. При этом для внешнего потока они не будут иметь размеров. И чтобы родительский DIV учитывал их размер и растягивался по их содержимому необходима небольшая хитрость.
Два способа как растянуть размер родительского DIV по содержимому входящих в него блоков
Раньше я использовал такой дополнительный блок перед закрывающим тегом родительского DIV:
После чего внешний вид страницы соответствовал задуманному:
Второй способ как заставить родительский div растягиваться по высоте дочернего
Можно сделать «самоочищающийся» контейнер через псевдокласс after:
Clear-fix:before, .clear-fix:after {
content: " ";
display: table;
}
.clear-fix:after {
clear: both;
}
/* Костыли для ослика (Internet Explorer 6 и 7) */
.clear-fix {
*zoom: 1;
}
А родительскому блоку добавить соответствующий класс:
Внешний вид страницы так же будет соответствовать задуманной верстке:
Оба способа хорошо работают. И позволяют решить проблему плавающих блоков, чтобы родительский DIV растягивался по высоте содержимого дочерних.
На какие типы делятся элементы
Дело в том, что не все фрагменты на веб-странице – блоки. Элементы вообще делятся на блочные и строчные. Вторые могут спокойно записываться в одну строку и при этом им не нужно ничего дополнительно прописывать. Простой пример строчного элемента – ссылка. На одной строке может быть сколько угодно ссылок, пока они будут помещаться на ней.
Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.
Рис. 1. Основные свойства, которые помогают задать размер
Простые свойства для размеров
Самые простые свойства, которыми можно записать размеры – это width и height. Означают они, соответственно, ширину и высоту. К ним также можно дописывать префиксы min- и max-. В таком случае будет задаваться минимальная и максимальная ширина или высота соответственно.
Значения можно записывать в пикселях или в процентах. Иногда еще используется относительная единица em (высота шрифта), но обычно с ее помощью определяется величина текста. По умолчанию все сетки (главные структурные блоки шаблона), в которых размеры определяются в процентах, называют резиновыми. Также процентная запись помогает легко адаптировать шаблон, что тоже очень важно.
Размер в пикселях
В пикселях записывают так называемые абсолютные значения. Например, весь сайт должен находиться в контейнере шириной 1000 пикселей. Создается этот блок и ему пишется ширина.
#container{
width: 1000px;
}
#container{
width
:
1000px
;
Если записано так, то ширина контейнера не будет меняться ни под каким предлогом. При изменении масштаба или уменьшении окна она будет оставаться прежней. Размер сайта не уменьшится и при необходимости появится горизонтальная полоса прокрутки.
Это так называемые фиксированные шаблоны. Сегодня все еще много сайтов работают таким образом. Например, социальная сеть Вконтакте. Попробуйте на компьютере уменьшить размеры окна и вы увидите, что шаблон никак не меняется. Конечно, у Вконтакте есть отдельные версии для планшетов и смартфонов, поэтому они решили оставить фиксированный шаблон.
И все же умение сетки сайта адаптироваться под новые экраны имеет сегодня огромную роль, потому что мобильный трафик растет. В связи с этим последние годы все чаще главный контейнер для каркаса сайта получает не жесткую ширину. Например, так:
#container{
max-width: 1320px;
}
#container{
max
-
width
:
1320px
;
И что это значит? А то, что при необходимости блок будет уменьшаться. Если сжать окно, то он тоже уменьшится. В то же время, если разрешение экрана позволяет, ширина будет составлять 1320 пикселей ровно. Уменьшая окно вы не увидите горизонтальный скролл.
Однако тут же можно задать еще и минимальную ширину. Если блоку записать это свойство, то он не будет становиться уже, чем указанное значение. Например:
#container{
min-width: 600px;
}
#container{
min
-
width
:
600px
;
Если ширина окна станет меньше 600 пикселей, то блок перестанет сжиматься и появиться та самая горизонтальная полоса прокрутки.
Размер в процентах
Задавать величину в процентах становится все более популярным. При грамотном использовании это может принести отличное отображение сайта на разных устройствах.
К примеру, вы захотели на своем сайте сделать слева боковую колонку, а справа – область с основным содержимым, где будет выводиться основная текстовая информация. Например, статья, каталог товаров или темы на форуме. Для начала нужно определить, какие размеры вы хотите дать примерно этим контейнерам.
#sidebar{
float: left;
width: 28%;
}
#content{
float: right;
width: 62%;
}
#sidebar{
float
:
left
;
width
:
28
%
;
#content{
float
:
right
;
width
:
62
%
;
В итоге сайдбар получит 28% ширины родительского элемента (а в нашем случае это общий контейнер), а основной блок – 62%. Их общая ширина составит 90%. Остальные 10 оставим на различные внешние и внутренние отступы, рамки и т.д.
Рис. 2. Резиновые блоки изменяют свои размеры при уменьшении окна в браузере
Как влияют отступы на размеры блоков
Когда вы задаете ширину какому-то блоку с помощью свойства width, это может быть далеко не окончательное значение. Дело в том, что так мы определяем ширину только той части, в которй непосредственно есть содержимое. Нужно помнить, что в css padding увеличивает размер блока, так же, как и рамка (border).
Допустим, возьмем боковую колонку. Мы дали ей 28% от всей ширины контейнера. Но чтобы содержимое в сайдбаре не прилипало к краям, ем нужно дать кое-какие отступы. Также, возможно, вы захотите добавить боковой колонке рамочку.
#sidebar{
padding: 10px 20px;
border: 2px solid black;
}
#sidebar{
padding
:
10px
20px
;
border
:
2px
solid
black
;
Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о том, как можно задавать размеры для области контента с помощью height и width и как настроить отображение этого контента в случае, если его будет больше, нежели сможет поместиться в отведенное для него место (css правило overflow со значениями hidden, scroll, auto).
Текст первого абзаца
Текст второго
Т.к. width и height для этих параграфов не заданы, то по умолчанию браузер сам рассчитывает их исходя из своего собственного понимания значения Auto. В результате абзацы занимают по ширине все доступное им место, а по высоте соответствуют высоте заключенного в них контента.
Давайте теперь внесем первое изменение и зададим жестко широту первого абзаца (width:50px):
Текст первого
Текст второго
В общем-то произошло ожидаемое — размер по горизонтали уменьшился до заданной в width:50px величины, ну, а высота параграфа по-прежнему формируется благодаря height:auto (умолчательному значению). В результате она стала такой, чтобы вместить в себя весь текст.
Но давайте теперь ограничим и высоту контейнера с помощью height:15px.
В результате мы получили, что текст в наш маленький контейнер абзаца уже не влазит и поэтому он благополучно наехал на область своего соседа. Вот именно для управления поведением контента в подобных ситуациях и служит правило overflow
.
Overflow означает «сверхпоток» или, другими словами, «переполнение контента». Оно говорит о том, что должно произойти с содержимым, если он не уместился в пределы той области (контейнера), которая ему была отведена.
У Overflow имеется несколько допустимых значений, но по умолчанию используется visible (показывать)
:
Именно поэтому в нашем последнем примере текст верхнего абзаца наехал на нижний (по умолчанию использовалось overflow:visible — показывать содержимое не уместившийся в контейнер). Мы могли бы использовать другую крайность — overflow:hidden
. Тогда бы все, что не поместилось внутри контейнера, не показывалось бы на вебстранице:
Другие два значения этого CSS свойства позволяют скролить не уместившееся в контейнер содержимое (что-то похожее мы уже наблюдали, когда изучали ). Итак, scroll
отобразит полосы прокрутки по вертикали и горизонтали даже в том случае, если содержание благополучно умещается в отведенном для него контейнере:
Но гораздо более логичным будет использование значения Auto
для Overflow, если вам необходимо сделать полосы прокрутки. В этом случае браузер сам будет рассчитывать, когда нужно их отображать и по каким именно осям.
Например, в случае использования overflow:auto мы получим возможность прокрутки только по той оси, где содержимое не умещается в границах контейнера:
Текст первого
Текст второго
Резюмируя можно сказать, что Overflow позволяет довольно гибко настроить варианты показа контента
в том случае, когда он вылазит за пределы своего контейнера. У вас будет возможность выехавший контент показывать (visible), не показывать (обрезать — hidden), либо делать обязательную прокрутку (scroll) или же прокрутку по необходимости (auto).
Есть еще варианты написания этого правила относящиеся к CSS3, но которые поддерживаются всеми браузерами, а значит их можно будет смело использовать. Я говорю про варианты overflow-x и overflow-y, которые позволяют задавать или не задавать прокрутку по отдельным осям (x — горизонтальная, y — вертикальная).
Если вам, например, нужно сделать так, чтобы по горизонтали прокрутка не появлялась никогда, а по вертикали появлялась бы только по необходимости (если контент не умещается), то для Html элемента нужно будет прописать overflow-x:hidden и overflow-y:auto. Все, задача будет решена, ибо данный финт ушами поддерживается всеми браузерами.
Height и width в процентах — зачем нужен doctype
Теперь давайте поговорим о том, от чего считается ширина заданная в процентах. Помните, в начале статьи я обещал на этом еще заострить наше внимание. Ну, собственно, CSS правило width здесь не является исключением и точно так же, как и padding и margin, считается в процентах от горизонтального размера контейнера с контентом.
Несколько запутаннее обстоит дело с высотой области контента заданной в процентах. Было бы логично предположить, что аналогично — от высоты контейнера. Но тут мы с вами начинаем сталкиваться с дуализмом (двумя моделями поведения) — как делали раньше и как делают сейчас по принятым стандартам. В связи с этим следует еще раз затронуть тему режимов отображения и рассмотренную нами ранее .
Исторически так сложилось, что после принятия стандартов оставалось все равно большое количество документов, сформированных по старым правилам чистого языка Html и с ними нужно было что-то делать. В то же время тоже развивался (выделился язык стилевой разметки и устарели некоторые теги и атрибуты), поэтому понадобилось каким-то образом показать браузеру, по каким именно стандартам нужно будет ему разбирать данный код.
Для того, чтобы отделить документы новые (которые учитывали все появившиеся стандарты) и старые (не учитывающие зачастую ничего, кроме чистого Html), компанией Мелкософт было предложено использовать небольшую фишечку из только что появившегося тогда языка XML. Фишечка эта была служебной и называется сейчас декларация doctype.
Выглядеть она может по-разному (читайте об этом подробнее в упомянутой чуть выше статье), но завсегда будет работать такой вариант:
Таким образом браузер получил маркер того, по каким стандартам ему разбирать документ. Если декларация doctype проставлена, тогда он переходит в режим соответствия стандартам (standarts mode). Если же в коде документа на его первой строчке doctype обозреватель не обнаружит (или она будет написана не правильно, что идентично ее отсутствию), то тогда он переходит в так называемый режим уловок
(quirks mode).
Документ, в котором отсутствует doctype, в браузере будет отображаться таким образом, как будто бы он очень старый (старинный). Если в этот же документ добавить декларацию, то обозреватель уже сбросит свой налет старины и начнет работать с кодом документа по всем принятым сейчас стандартам.
Вот только понятие старины очень разное. Какая, например, старина может быть у популярного сейчас обозревателя Google Chrome, который появился-то только в 2008 году? У IE, естественно, история есть и довольно богатая. Поэтому все браузеры любой версии будут отображать документ без декларации (в режиме quirks mode или уловок) точно так же, как это бы делал старинный , ибо именно эта версия считается базовой.
Почему я так долго говорил про режимы отображения браузеров? А потому, что для этих двух режимов задание высоты (height) области контента в процентах очень сильно отличается по отношению к расчету этой самой высоты.
Задание высоты (в процентах) области с контентом в режиме следования стандартов (standarts mode — когда прописан правильный doctype в начале документа) будет вообще не возможно, если не будет где-либо задана высота для контейнера, в который заключено это содержимое (заданная вами в процентах высота будет игнорироваться).
Содержание
Если декларацию doctype из кода документа убрать, то мы увидим следующую картину:
Для режима следования стандартам (в начале документа прописана декларация) необходимо предварительно задать высоту контейнера (в нашем случае для Div контейнером будет служить тег Body) и только тогда браузер правильно отработает height:100%:
Содержание
В итоге получились два совершенно разных подхода при задании высоты области контента в процентах, поэтому во избежании проблем советую вам в обязательном порядке указывать правильную декларацию doctype
в начале всех ваших документов (вебстраниц). Есть и еще один пример, когда разница между режимом следования стандартам и режимом уловок будет колоссальной.
Если вы зададите для какого-либо Html элемента height и width для области контента, а также укажите для этого тега внутренние отступы (padding) и ширину рамки (border), то в режиме уловок (quirks mode — без прописанной декларации) в разных браузерах это все может быть истолковано по-разному.
В старом браузере IE 5.5 внутренние отступы и ширина рамки будут отсчитывать внутрь от заданных через height и width размеров. Т.е. общий размер элемента будет соответствовать тому, что задано в этих CSS свойствах (это устаревшая схема, которая сейчас не используется).
В остальных же современных браузерах отступы padding и ширина рамки border будут прибавляться к тем размерам, что были заданы в height и width. Т.е. в этом случае (режим уловок без doctype) изначально заданные размеры области контента будут расширены на величину внутренних отступов и рамки.
Ну, а если в документе прописать директиву, то абсолютно во всех современных и старых браузерах этих проблем с двойственностью подхода уже можно будет запросто избежать. В этом случае и в IE 5.5 величина внутренних отступов и ширина рамки будет суммироваться с размерами области контента, как этого и требуют современные стандарты CSS. Поэтому во избежании всегда прописывайте doctype
.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Float и clear в CSS - инструменты блочной верстки
Padding, Margin и Border - задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
Разное оформление для внутренних и внешних ссылок через CSS
Единицы размеров (пиксели, Em и Ex) и наследование правил в CSS
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
Ut wisi
), поскольку тег не относится к блочным элементам.Вкладывание блочных тегов внутрь встроенных элементов характерно, скорее, для новичков, которые еще не понимают разницы между ними.
К тому же браузеры научились отлавливать подобные ошибки и отображают код более-менее корректно. Тем не менее, рекомендуем придерживаться в этом вопросе спецификации, чтобы выводить веб-страницу без ошибок.
Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег
Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width), отступов (margin), полей (padding) и границ (border). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример 2. Ширина слоя
В результате данного примера получим слой шириной 342 пиксела. На рис. 1 показано, из чего складывается ширина слоя.
Рис 1. Ширина блочного элемента
В том случае когда в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width.
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto, это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.
Пример 3. Ширина слоя в процентах
Результат примера показан на рис. 2.
Рис. 2. Отображение ширины слоев в браузере
Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег
). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется свойство width, поэтому оно определяется по умолчанию — auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.
Высота
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).
Пример 4. Высота слоя
Результат данного примера продемонстрирован на рис. 3.
Рис. 3. Высота блока в разных браузерах
Видно, что браузер оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.
Цвет фона
Цвет фона элемента проще всего устанавливать через универсальное свойство background. Фоном при этом заливается область, которая определяется значениями width, height и padding (рис. 4).
Параметры для блоков в CSS
Область слоя, которая заполняется фоновым цветом
Таким образом, margin не принимает участия в формировании цветной области.
Границы
Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer 7 проводит рамку внутри блока, а Firefox — снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 5). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer — по внутренней. Начиная с версии 8.0 Internet Explorer поменял стиль отображения рамки, она проводится внутри блока, как и в Firefox.
а. Internet Explorer 7
б. Firefox, Internet Explorer 8+
Рис. 5. Отображение рамки в браузерах
В примере 5 показано, как создать код для получения подобной границы.
Пример 5. Пунктирная рамка
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.
Резюме
Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются.
Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width, но к ним еще плюсуется значение полей, отступов и границ. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы. Можно только посоветовать ограниченно использовать свойства width и height, поскольку по умолчанию браузер применяет аргумент auto, который заставляет настраивать размеры элемента автоматически.
О преимуществах div"ной верстки перед табличной - никому наверное рассказывать не надо. Все это уже давно поняли и перешли на них с таблиц. Ну а те кто не перешел - вскоре поймут свои ошибки и это сделают. Но как и в любом занятии - тут также есть свои подводные камни. То дивы ведут себя не так как надо, то не получается сверстать какую нибудь определенную структуру, преград много, а верстальщик всегда один…
Данный пост предназначен скорее для начинающих, но вдруг и профи найдут тут что-то интересненькое. Так что давайте приступим уже к делу!
Об этом стоит всегда помнить
Существует один подход в верстке, которого нужно придерживаться как можно чаще и вернее. Это минерализация дерева DOM. Имеет это несколько вполне обоснованных преимуществ: упрощает сам процесс верстки, сводит количество потенциальных ошибок к минимуму, улучшает прозрачность кода. Об этом надо помнить всегда, и в моменте планирования структуры обращать на это особо много внимания.Основные принципы таковы: для отступов используем только padding и margin (в зависимости от потребности) - делать отдельный 20 пиксельный div вовсе не обязательно, ограничиваем вложенность до минимума, не переусердствуем с position:relative и последующими смещениями блока (при неправильном использовании может привести к получасовой правке целого кода), активно пользуемся z-index для достижения нужного эффекта.
FAQ
- Как выставлять div"ы друг за другом? А для этого используется свойство - float: left (или right, в зависимости от потребности), чтобы следующий div после таких поочередных стоял под ними, задаем ему свойство clear (например clear:left).- Как выровнять div по центру? Одно из решений выглядит следующим способом - задаем margin-left и margin-right как auto (или еще проще - margin:0 auto;)
- Как позиционировать элементы находящиеся в div по вертикали? Зависит от элемента, например для текста хватит всего лишь указания vertical-align:middle, а для картинки нужно прописать line-height:Npx.
- Делать отступы при помощи margin или padding? В основном - margin служит для отступов между блоками, это отступ «наружу», так как padding - отступ «внутрь» и чаще всего применяется для организации отступа вокруг текста к примеру. Вроде бы простая вещь, а иногда файрбагом можно такие перлы встретить, что я не мог тут об этом не упомянуть.
- Смещать блок при помощи margin или position:relative в связке со смещениями по горизонтали и вертикали? Конечно же в данных случаях надо использовать margin. Правда как и везде - все зависит от конкретного случая, но в основном следует пользоваться все таки margin.
- Как растянуть div по содержимому блока? Для этого надо прописать height: auto;
Как растянуть div по высоте родителя, который в свою очередь растягивается по высоте содержимого div"a находящегося внутри него, рядом с первым div"ом? Div"у с контентом задаем height: auto, двум остальным дивам height: 100% и display: table;
- Как сделать div невидимым? При помощи манипуляций свойством display. Для невидимости выставляем его на none.
- Как сделать прокрутку контента в div со статической высотой? Прописываем в свойствах overflow:scroll.
- Как отобразить (к примеру) тэг «a» как div (блок)? В свойствах задать высоту и ширину и выставить display:block;
Вот и все, что нужно знать чтобы безболезненно верстать на div"ах. На самом деле. Ну если всплывут еще какие нибудь вопросы, тогда тут сразу же появятся и ответы! А вообще-то тут нечего боятся - пол часа тренировок и вы уже профи! Так что отставляйте эти устаревшие table - и переходите на новую ступень эволюции!
Теги: faq, div, верстка, самоучитель
Clearfix хак популярный способ правильного отображения плавающих блоков, позволяющий не прибегать к помощи таблиц при верстке. Необходимость в нем возникает когда вы начинаете замечать, что высота родительского блока DIV не соответствует содержимому наследников. К примеру вы задумали такую организацию блоков у себя на сайте (для наглядности родительский блок выделен желтым цветом, а дочерние — зеленым и красным ):
Для чего написали такую HTML страницу:
и к ней соответствующий CSS файл стилей:
Div-main { margin: 0 auto; padding: 20px; background: #eeee33; width: 320px; } .div-left { padding: 20px; background: #339933; float: left; width: 100px; } .div-right { padding: 20px; background: #cc0033; float: right; width: 100px; }
Однако в реальности вы получите такую картинку:
Родительский DIV не обнимает дочерние. То есть не растягивается по высоте входящих в него блоков. И никакой ошибки тут нет, просто в верстке используют плавающие блоки (свойство FLOAT). Плавающие элементы вырываются из текущего потока и создают в родительском контексте между собой собственный. При этом для внешнего потока они не будут иметь размеров. И чтобы родительский DIV учитывал их размер и растягивался по их содержимому необходима небольшая хитрость.
Два способа как растянуть размер родительского DIV по содержимому входящих в него блоков
Раньше я использовал такой дополнительный блок перед закрывающим тегом родительского DIV:
После чего внешний вид страницы соответствовал задуманному:
Второй способ как заставить родительский div растягиваться по высоте дочернего
Можно сделать «самоочищающийся» контейнер через псевдокласс after:
Clear-fix:before, .clear-fix:after { content: " "; display: table; } .clear-fix:after { clear: both; } /* Костыли для ослика (Internet Explorer 6 и 7) */ .clear-fix { *zoom: 1; }
А родительскому блоку добавить соответствующий класс:
Внешний вид страницы так же будет соответствовать задуманной верстке:
Оба способа хорошо работают. И позволяют решить проблему плавающих блоков, чтобы родительский DIV растягивался по высоте содержимого дочерних.
На какие типы делятся элементы
Дело в том, что не все фрагменты на веб-странице – блоки. Элементы вообще делятся на блочные и строчные. Вторые могут спокойно записываться в одну строку и при этом им не нужно ничего дополнительно прописывать. Простой пример строчного элемента – ссылка. На одной строке может быть сколько угодно ссылок, пока они будут помещаться на ней.
Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.
Рис. 1. Основные свойства, которые помогают задать размер
Простые свойства для размеров
Самые простые свойства, которыми можно записать размеры – это width и height. Означают они, соответственно, ширину и высоту. К ним также можно дописывать префиксы min- и max-. В таком случае будет задаваться минимальная и максимальная ширина или высота соответственно.
Значения можно записывать в пикселях или в процентах. Иногда еще используется относительная единица em (высота шрифта), но обычно с ее помощью определяется величина текста. По умолчанию все сетки (главные структурные блоки шаблона), в которых размеры определяются в процентах, называют резиновыми. Также процентная запись помогает легко адаптировать шаблон, что тоже очень важно.
Размер в пикселях
В пикселях записывают так называемые абсолютные значения. Например, весь сайт должен находиться в контейнере шириной 1000 пикселей. Создается этот блок и ему пишется ширина.
#container{ width: 1000px; }
#container{ width : 1000px ; |
Если записано так, то ширина контейнера не будет меняться ни под каким предлогом. При изменении масштаба или уменьшении окна она будет оставаться прежней. Размер сайта не уменьшится и при необходимости появится горизонтальная полоса прокрутки.
Это так называемые фиксированные шаблоны. Сегодня все еще много сайтов работают таким образом. Например, социальная сеть Вконтакте. Попробуйте на компьютере уменьшить размеры окна и вы увидите, что шаблон никак не меняется. Конечно, у Вконтакте есть отдельные версии для планшетов и смартфонов, поэтому они решили оставить фиксированный шаблон.
И все же умение сетки сайта адаптироваться под новые экраны имеет сегодня огромную роль, потому что мобильный трафик растет. В связи с этим последние годы все чаще главный контейнер для каркаса сайта получает не жесткую ширину. Например, так:
#container{ max-width: 1320px; }
#container{ max - width : 1320px ; |
И что это значит? А то, что при необходимости блок будет уменьшаться. Если сжать окно, то он тоже уменьшится. В то же время, если разрешение экрана позволяет, ширина будет составлять 1320 пикселей ровно. Уменьшая окно вы не увидите горизонтальный скролл.
Однако тут же можно задать еще и минимальную ширину. Если блоку записать это свойство, то он не будет становиться уже, чем указанное значение. Например:
#container{ min-width: 600px; }
#container{ min - width : 600px ; |
Если ширина окна станет меньше 600 пикселей, то блок перестанет сжиматься и появиться та самая горизонтальная полоса прокрутки.
Размер в процентах
Задавать величину в процентах становится все более популярным. При грамотном использовании это может принести отличное отображение сайта на разных устройствах.
К примеру, вы захотели на своем сайте сделать слева боковую колонку, а справа – область с основным содержимым, где будет выводиться основная текстовая информация. Например, статья, каталог товаров или темы на форуме. Для начала нужно определить, какие размеры вы хотите дать примерно этим контейнерам.
#sidebar{ float: left; width: 28%; } #content{ float: right; width: 62%; }
#sidebar{ float : left ; width : 28 % ; #content{ float : right ; width : 62 % ; |
В итоге сайдбар получит 28% ширины родительского элемента (а в нашем случае это общий контейнер), а основной блок – 62%. Их общая ширина составит 90%. Остальные 10 оставим на различные внешние и внутренние отступы, рамки и т.д.
Рис. 2. Резиновые блоки изменяют свои размеры при уменьшении окна в браузере
Как влияют отступы на размеры блоков
Когда вы задаете ширину какому-то блоку с помощью свойства width, это может быть далеко не окончательное значение. Дело в том, что так мы определяем ширину только той части, в которй непосредственно есть содержимое. Нужно помнить, что в css padding увеличивает размер блока, так же, как и рамка (border).
Допустим, возьмем боковую колонку. Мы дали ей 28% от всей ширины контейнера. Но чтобы содержимое в сайдбаре не прилипало к краям, ем нужно дать кое-какие отступы. Также, возможно, вы захотите добавить боковой колонке рамочку.
#sidebar{ padding: 10px 20px; border: 2px solid black; }
#sidebar{ padding : 10px 20px ; border : 2px solid black ; |
Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о том, как можно задавать размеры для области контента с помощью height и width и как настроить отображение этого контента в случае, если его будет больше, нежели сможет поместиться в отведенное для него место (css правило overflow со значениями hidden, scroll, auto).
Текст первого абзаца
Текст второго
Т.к. width и height для этих параграфов не заданы, то по умолчанию браузер сам рассчитывает их исходя из своего собственного понимания значения Auto. В результате абзацы занимают по ширине все доступное им место, а по высоте соответствуют высоте заключенного в них контента.
Давайте теперь внесем первое изменение и зададим жестко широту первого абзаца (width:50px):
Текст первого
Текст второго
В общем-то произошло ожидаемое — размер по горизонтали уменьшился до заданной в width:50px величины, ну, а высота параграфа по-прежнему формируется благодаря height:auto (умолчательному значению). В результате она стала такой, чтобы вместить в себя весь текст.
Но давайте теперь ограничим и высоту контейнера с помощью height:15px.
В результате мы получили, что текст в наш маленький контейнер абзаца уже не влазит и поэтому он благополучно наехал на область своего соседа. Вот именно для управления поведением контента в подобных ситуациях и служит правило overflow .
Overflow означает «сверхпоток» или, другими словами, «переполнение контента». Оно говорит о том, что должно произойти с содержимым, если он не уместился в пределы той области (контейнера), которая ему была отведена.
У Overflow имеется несколько допустимых значений, но по умолчанию используется visible (показывать) :
Именно поэтому в нашем последнем примере текст верхнего абзаца наехал на нижний (по умолчанию использовалось overflow:visible — показывать содержимое не уместившийся в контейнер). Мы могли бы использовать другую крайность — overflow:hidden . Тогда бы все, что не поместилось внутри контейнера, не показывалось бы на вебстранице:
Другие два значения этого CSS свойства позволяют скролить не уместившееся в контейнер содержимое (что-то похожее мы уже наблюдали, когда изучали ). Итак, scroll отобразит полосы прокрутки по вертикали и горизонтали даже в том случае, если содержание благополучно умещается в отведенном для него контейнере:
Но гораздо более логичным будет использование значения Auto для Overflow, если вам необходимо сделать полосы прокрутки. В этом случае браузер сам будет рассчитывать, когда нужно их отображать и по каким именно осям.
Например, в случае использования overflow:auto мы получим возможность прокрутки только по той оси, где содержимое не умещается в границах контейнера:
Текст первого
Текст второго
Резюмируя можно сказать, что Overflow позволяет довольно гибко настроить варианты показа контента в том случае, когда он вылазит за пределы своего контейнера. У вас будет возможность выехавший контент показывать (visible), не показывать (обрезать — hidden), либо делать обязательную прокрутку (scroll) или же прокрутку по необходимости (auto).
Есть еще варианты написания этого правила относящиеся к CSS3, но которые поддерживаются всеми браузерами, а значит их можно будет смело использовать. Я говорю про варианты overflow-x и overflow-y, которые позволяют задавать или не задавать прокрутку по отдельным осям (x — горизонтальная, y — вертикальная).
Если вам, например, нужно сделать так, чтобы по горизонтали прокрутка не появлялась никогда, а по вертикали появлялась бы только по необходимости (если контент не умещается), то для Html элемента нужно будет прописать overflow-x:hidden и overflow-y:auto. Все, задача будет решена, ибо данный финт ушами поддерживается всеми браузерами.
Height и width в процентах — зачем нужен doctype
Теперь давайте поговорим о том, от чего считается ширина заданная в процентах. Помните, в начале статьи я обещал на этом еще заострить наше внимание. Ну, собственно, CSS правило width здесь не является исключением и точно так же, как и padding и margin, считается в процентах от горизонтального размера контейнера с контентом.
Несколько запутаннее обстоит дело с высотой области контента заданной в процентах. Было бы логично предположить, что аналогично — от высоты контейнера. Но тут мы с вами начинаем сталкиваться с дуализмом (двумя моделями поведения) — как делали раньше и как делают сейчас по принятым стандартам. В связи с этим следует еще раз затронуть тему режимов отображения и рассмотренную нами ранее .
Исторически так сложилось, что после принятия стандартов оставалось все равно большое количество документов, сформированных по старым правилам чистого языка Html и с ними нужно было что-то делать. В то же время тоже развивался (выделился язык стилевой разметки и устарели некоторые теги и атрибуты), поэтому понадобилось каким-то образом показать браузеру, по каким именно стандартам нужно будет ему разбирать данный код.
Для того, чтобы отделить документы новые (которые учитывали все появившиеся стандарты) и старые (не учитывающие зачастую ничего, кроме чистого Html), компанией Мелкософт было предложено использовать небольшую фишечку из только что появившегося тогда языка XML. Фишечка эта была служебной и называется сейчас декларация doctype.
Выглядеть она может по-разному (читайте об этом подробнее в упомянутой чуть выше статье), но завсегда будет работать такой вариант:
Таким образом браузер получил маркер того, по каким стандартам ему разбирать документ. Если декларация doctype проставлена, тогда он переходит в режим соответствия стандартам (standarts mode). Если же в коде документа на его первой строчке doctype обозреватель не обнаружит (или она будет написана не правильно, что идентично ее отсутствию), то тогда он переходит в так называемый режим уловок (quirks mode).
Документ, в котором отсутствует doctype, в браузере будет отображаться таким образом, как будто бы он очень старый (старинный). Если в этот же документ добавить декларацию, то обозреватель уже сбросит свой налет старины и начнет работать с кодом документа по всем принятым сейчас стандартам.
Вот только понятие старины очень разное. Какая, например, старина может быть у популярного сейчас обозревателя Google Chrome, который появился-то только в 2008 году? У IE, естественно, история есть и довольно богатая. Поэтому все браузеры любой версии будут отображать документ без декларации (в режиме quirks mode или уловок) точно так же, как это бы делал старинный , ибо именно эта версия считается базовой.
Почему я так долго говорил про режимы отображения браузеров? А потому, что для этих двух режимов задание высоты (height) области контента в процентах очень сильно отличается по отношению к расчету этой самой высоты.
Задание высоты (в процентах) области с контентом в режиме следования стандартов (standarts mode — когда прописан правильный doctype в начале документа) будет вообще не возможно, если не будет где-либо задана высота для контейнера, в который заключено это содержимое (заданная вами в процентах высота будет игнорироваться).
Если декларацию doctype из кода документа убрать, то мы увидим следующую картину:
Для режима следования стандартам (в начале документа прописана декларация) необходимо предварительно задать высоту контейнера (в нашем случае для Div контейнером будет служить тег Body) и только тогда браузер правильно отработает height:100%:
В итоге получились два совершенно разных подхода при задании высоты области контента в процентах, поэтому во избежании проблем советую вам в обязательном порядке указывать правильную декларацию doctype в начале всех ваших документов (вебстраниц). Есть и еще один пример, когда разница между режимом следования стандартам и режимом уловок будет колоссальной.
Если вы зададите для какого-либо Html элемента height и width для области контента, а также укажите для этого тега внутренние отступы (padding) и ширину рамки (border), то в режиме уловок (quirks mode — без прописанной декларации) в разных браузерах это все может быть истолковано по-разному.
В старом браузере IE 5.5 внутренние отступы и ширина рамки будут отсчитывать внутрь от заданных через height и width размеров. Т.е. общий размер элемента будет соответствовать тому, что задано в этих CSS свойствах (это устаревшая схема, которая сейчас не используется).
В остальных же современных браузерах отступы padding и ширина рамки border будут прибавляться к тем размерам, что были заданы в height и width. Т.е. в этом случае (режим уловок без doctype) изначально заданные размеры области контента будут расширены на величину внутренних отступов и рамки.
Ну, а если в документе прописать директиву, то абсолютно во всех современных и старых браузерах этих проблем с двойственностью подхода уже можно будет запросто избежать. В этом случае и в IE 5.5 величина внутренних отступов и ширина рамки будет суммироваться с размерами области контента, как этого и требуют современные стандарты CSS. Поэтому во избежании всегда прописывайте doctype .
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Float и clear в CSS - инструменты блочной верстки
Padding, Margin и Border - задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right)
Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
Разное оформление для внутренних и внешних ссылок через CSS
Единицы размеров (пиксели, Em и Ex) и наследование правил в CSS
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице