Ответ. Под шириной и высотой элемента стандарт понимает размеры области содержимого элемента (без рамок, внутренних и внешних отступов).
Ответ.
Ширину и высоту элемента можно задавать с помощью свойств
width и height.
Значения этих свойств могут задаваться в единицах размера, в процентах или
принимать значение auto, которое работает по умолчанию.
Проценты вычисляются относительно соответствующих размеров блока контейнера.
Свойства применяются к блочным и строчным замещаемым элементам, по наследству
не передаются.
auto для ширины и высоты элемента?
Ответ.
Значение auto для свойства width
вычисляется так, чтобы общая ширина элемента вместе со всеми
отступами и рамками точно равнялась ширине родителя (значению его
свойства width). Значение auto для свойства
height вычисляется по реальной высоте содержимого элемента.
Ответ. Можно, но эти правила будут проигнорированы.
Ответ.
Для управления переполнением содержимого элемента CSS предлагает
свойство overflow. Возможные значения этого свойства:
visible(по умолчанию) — по стандарту содержимое должно выходить за границы элемента (браузер IE-6 нарушает стандарт, растягивая область содержимого элемента)hidden— обрезает содержание, которое выходит за пределы области содержимого элементаscroll— обеспечивает область содержимого полосами прокрутки независимо от того, переполняется она или нетauto— обеспечивает область содержимого полосами прокрутки только в том случае, если она переполняется.
Свойство можно применять к блочным и замещаемым строчным элементам, по наследству оно не передаётся.
Ответ. По стандарту W3C ширина и высота относятся к содержимому блока.
Браузеры, построенные на движке Gecko (например, Mozilla Firefox), и браузер Opera точно следуют в этом вопросе стандарту.
А вот браузеры Internet Explorer версий 5 и 6 трактуют ширину и высоту блока по-другому. Они считают, что заданная в определении ширина и высота относится ко всему блоку в целом, исключая внешние отступы.
Таким образом, в IE 5 и IE 6 ширина и высота блока интерпретируется как размер содержимого плюс размер внутреннего отступа и плюс размер рамки.
Запишите стилевое определение, которое решает проблему размеров, и объясните суть используемого трюка.
Ответ.
Решением будет следующий набор CSS-определений:
.area
{
background:#a7fbc0;
margin:15px;
border:5px solid #4d4d4d;
padding:20px;
width:400px; /* Для хороших старых по стандарту */
\width:450px; /* Обман для IE5 */
w\idth:400px; /* Для всех новых хороших по стандарту */
height:300px; /* Для хороших старых по стандарту */
\height:350px; /* Обман для IE5 */
he\ight:300px; /* Для всех новых хороших по стандарту */
}
Трюк основан на использовании символа “\” —
обратной косой черты. Это допустимый символ, описанный
в стандарте CSS. Он используется в качестве модификатора,
меняющего специальный смысл следующего за ним знака на обычный.
Если у символа нет специального смысла, то
символ остаётся прежним.
Таким образом, \width и w\idth полностью
эквивалентны width.
.area
{
01 width:400px; /* Для хороших старых браузеров */
02 \width:450px; /* Обман для IE5 */
03 w\idth:400px; /* Для всех новых хороших браузеров */
}
Первая строка уловки — для тех браузеров, которые работают по
стандарту, но не понимают модификатора (к ним относится, например,
браузер Opera 5). Эти браузеры будут рассматривать символ
“\”, как обычный знак, входящий
в состав имени свойства, не “узнают” width и
пропустят строки 2 и 3.
Вторая строка — для браузера IE5, который работает не по стандарту, не
считает обратную косую черту модификатором в середине слова, но, по
счастью, считает этот знак модификатором, если с него слово
начинается. Таким образом, IE5 (и IE6, если он работает в режиме IE5)
сначала прочитает 400px в первой строке, потом изменит
это значение на 450px из второй строки, а третью строку
проигнорирует.
Третья строка — для совсем хороших браузеров: тех, которые работают во всём по стандарту, в том числе правильно понимают символ обратной косой черты.
Для высоты нельзя было записать h\eight по следующей причине.
Знак “\” используется и для
кодирования символов 16-ричными цифрами. Если за обратной
косой чертой следует один из знаков 0–9, a, b, c, d, e, f, то это
воспринимается как начало 16-ричного кода.
DOCTYPE.
В каком месте кода записывается эта декларация.
Ответ.
Декларация DOCTYPE предназначена для указания соответствия
кода документа одному из стандартов W3C. Браузер, в зависимости от
стандарта, по-разному интерпретирует элементы на странице.
Декларацию DOCTYPE помещают перед элементом
HTML, она начинается с восклицательного
знака и записывается прописными буквами.
Варианты DOCTYPE для HTML 4.01:
- Strict (строгий)
- Transitional (переходный)
- Frameset (аналогичен Transitional, но с фреймами)
DOCTYPE
определён вариант Transitional?
Ответ. Браузер считает, что код может содержать устаревшие теги. Вариант введён в целях совместимости со старыми версиями HTML.
Декларация записывается в виде:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
DOCTYPE
определён вариант Frameset?
Ответ. Браузер работает так же, как и при варианте Transitional, но допускает использование в коде фреймов.
Декларация записывается в виде:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPE
определён вариант Strict?
Ответ.
Браузер не допускает в коде элементов и атрибутов, помеченных W3C как
«устаревшие» или «не одобряемые» (например:
CENTER, FONT,
S, U,
align, background, bgcolor,
color, size).
Декларация записывается в виде:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Ответ.
По умолчанию браузер выводит блочные элементы друг за другом сверху
вниз. При этом ширина блочного элемента совпадает с доступной
шириной родителя (его свойством width), а высота
определяется по содержимому.
Строчный элемент браузер выводит в строку, пытаясь заполнить всю ширину родительского блока. Если материал в одной строке не умещается, он переносится на следующие строки.
Строки по умолчанию выравниваются со стороны, принятой для текущего языка (слева для русского).
При изменении ширины окна браузер перевёрстывает страницу: ширину блоков подгоняет под новый размер, ширину строк под изменившуюся ширину содержащих их блоков. В силу этого вёрстку потоком часто называют резиновой вёрсткой.
auto.
Ответ. По горизонтали это свойства:
margin-leftwidthmargin-right
По вертикали это свойства:
margin-topheightmargin-bottom
Ответ.
Сумма размеров горизонтальных компонентов блока в потоке всегда
равна значению width родителя.
Ответ.
По вертикали блок в потоке стремится занять размер по содержимому этого блока.
Ответ.
|
|
Выравнивание слева:
.block
{
width:350px;
margin-right:auto;
}
|
|
|
Выравнивание справа:
.block
{
width:350px;
margin-left:auto;
}
|
|
Если оба отступа установлены в |
Выравнивание по центру:
.block
{
width:350px;
margin-left:auto;
margin-right:auto;
}
|
Ответ.
Браузеры IE пятых версий не центрируют блок способом,
принятым по стандарту.
Эту ошибку можно компенсировать другой ошибкой этих браузеров: по
указанию text-align:center браузеры IE5 центрируют не
только текст (как требует стандарт), но и блоки.
В этом гипертекстовом документе для центрирования
BODY относительно HTML применён соответствующий трюк:
HTML
{
/* Центрирование BODY для IE5 */
text-align: center;
}
BODY
{
/* Центрирование по стандарту */
margin: 10px auto;
/* Восстановление выравнивания текста слева */
text-align: left;
}
width:auto?
Ответ.
|
Блок с автоматическим свойством |
Содержимого блока растягивается до заданных отступов:
.block
{
width:auto;
margin-left:50px;
margin-left:150px;
}
|
