КАТЕГОРИИ:
АстрономияБиологияГеографияДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРиторикаСоциологияСпортСтроительствоТехнологияФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег <div> в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег <div> внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.
Некоторые браузеры достаточно свободно трактуют понятие ширины, хотя в спецификации CSS четко указано, что ширина складывается из суммы следующих параметров: ширины самого блока (width), отступов (margin), полей (padding) и границ (border). В примере 2 показано создание слоя, в котором присутствуют все эти компоненты.
Пример . Ширина слоя
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Ширина</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> DIV { width: 300px; /* Ширина слоя */ margin: 7px; /* Значение отступов */ padding: 10px; /* Поля вокруг текста */ border: 4px solid black; /* Параметры границы */ background: #fc0; /* Цвет фона */ } </style> </head> <body> <div>Lorem ipsum dolor sit amet...</div> </body></html>В том случае когда <!DOCTYPE> в коде не указан, браузер Internet Explorer за ширину всего блока принимает значение свойства width.
Разберем еще один пример связанный с шириной. По умолчанию ширина слоя задается как auto, это позволяет вписывать слой в окно браузера, не принимая в расчет значения установленных полей. Если изменить ширину на 100%, то при добавлении значения отступов, полей или границ неминуемо появится горизонтальная полоса прокрутки.
Для получения универсального результата существует несколько подходов. В примере 3 продемонстрировано создание трех слоев, ширина которых определяется в процентах.
Пример . Ширина слоя в процентах
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Ширина</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #layer1 { width: 100%; /* Ширина первого слоя */ padding: 10px; /* Поля вокруг текста */ background: #fc0; /* Цвет фона */ } #layer2 { width: 100%; /* Ширина второго слоя */ background: #cc0; /* Цвет фона */ } #layer2 P { padding: 10px; /* Поля вокруг параграфа */ } #layer3 { background: #3ca; /* Цвет фона третьего слоя */ padding: 10px; /* Поля вокруг текста */ } </style> </head> <body> <div id="layer1">Lorem ipsum dolor sit amet...</div> <div id="layer2"><p>Lorem ipsum dolor sit amet...</p></div> <div id="layer3">Lorem ipsum dolor sit amet...</div> </body></html>Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2) ширина также задана 100%, но поля определяются для внутреннего абзаца (тег <p>). За счет этого ширина слоя во всех браузерах будет одинаковой. К третьему слою (layer3) вообще не применяется свойство width, поэтому оно определяется по умолчанию — auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.
Способ установки ширины зависит от применяемого макета и выбора разработчика, но в любом случае нужно учитывать особенности блочных элементов и создавать универсальный код.
Высота
С высотой блочных элементов дело обстоит аналогично ширине. Браузер за высоту слоя принимает значение свойства height и добавляет к нему еще значение margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (пример 4).
Пример . Высота слоя
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Высота</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #layer1 { width: 300px;/* Ширина слоя */ background: #fc0; /* Цвет фона */ height: 50px; /* Высота слоя */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div id="layer1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </div> </body></html>Дата добавления: 2015-04-18; просмотров: 67; Мы поможем в написании вашей работы!; Нарушение авторских прав |