В этом материале собраны аспекты, которые полезно знать и помнить html-разработчику.
Часть вопросов посвящена IE — я сам отказался от поддержки IE6, но знать особенности его поведения будет не лишним.
1. Режимы браузера
Стандарт: Режим «Стандарты» — таблицы стилей, присутствующие в документе, соответствуют спецификации CSS 2.1 (последние версии).Пользовательский режим (режим обратной совместимости): Режим Quirks — браузер игнорирует некоторые правила CSS, имитируя поведение старого движка.
Режим близкий к стандартному: Почти стандартный режим — Opera, Firefox, Safari, в котором расположение картинок в ячейках таблицы отображается в режиме совместимости.
2. Селекторы, псевдоклассы, псевдоэлементы
1) Селекторы:- Селектор тегов — в качестве селектора может выступать любой HTML-тег, для которого определены правила форматирования.
tagName { property1: value1; property2: value2; … }
имя тега – регистр не имеет значения - Селектор классов — в документе может быть любое количество селекторов.
.className { … }
имя класса – чувствительно к регистру - Селектор идентификатора — идентификатор определяет уникальное имя элемента.
#idName { … }
idName – чувствительно к регистру - Селекторы контекста — состоят из селекторов тегов, селекторов классов, селекторов идентификаторов и т. д., разделенных пробелами.
sel1 sel2 … { … }
- Соседние селекторы являются элементами документа, если они следуют друг за другом в коде.
В синтаксисе CSS значения применяются к свойствам элемента, следующего за +
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
б, вар – соседнийsel1 + sel2 { … }
- Дочерние селекторы расположены непосредственно внутри родительского элемента.
В синтаксисе CSS значения стиля применяются только к дочернему элементу.
<p><em>
Lorem ipsum dolor sit amet</em>
, проводящий обучение элит, sed diem nonum nibh euismodtincidunt ut lacreet dolore magna aliguam Erat volutpat.</p>
em — дочерний элемент psel1 > sel2 { … }
sel1 – родительский селектор sel2 – дочерний селектор - Селекторы атрибутов:
[attribute] { … }
- Универсальный селектор — определяет стиль для всех элементов документа.
* { … }
• :lang(язык) 3) Псевдоэлементы: Псевдоэлементы позволяют стилизовать элементы, не определенные в дереве элементов, а также генерировать контент, которого нет в исходном коде текста документа.
• :first-line – стиль первой строки
• :first-letter – стиль первого символа
• :after { content: «…»; } – используется для вставки назначенного контента после элемента
• :before { content: «…»; } – используется для вставки назначенного содержимого перед элементом
3. Каскадность и специфичность
Правила каскадирования определяют следующие приоритеты: 1) Пользовательские стили, отмеченные флагом !important. 2) Авторские стили, отмеченные флагом !important. 3) Авторские стили 4) Пользовательские стили 5) Стили браузера по умолчанию.Специфика: Для расчета каждому типу селектора присваивается числовое значение.
Специфичность рассчитывается путем суммирования значений каждого селектора.
Расчет происходит в системе с неопределенно высокой базой.
abcd 1) если стиль встроенный, a = 1 2) b равно общему количеству селекторов идентификаторов 3) c равно общему количеству классов, псевдоклассов и селекторов атрибутов.
4) d равно количеству селекторов типов и псевдоэлементов
4.hasLayout
hasLayout — это свойство IE, определяющее расположение элемента в потоке, его размеры, расположение, реакцию на события и влияние на другие элементы.Как правило, элементы Internet Explorer не отвечают за самоорганизацию.
Тег или может иметь позицию, как в исходном коде и потоке документов, но их содержимое упорядочивается по ближайшему предку с макетом (обычно ).
Такие элементы полагаются на предка, который выполняет за них тяжелую работу по определению размера и единиц измерения.
?Элементы, имеющие hasLayout по умолчанию: • HTML, тело • таблица, тр, ч, тд •изображение • час • ввод, кнопка, выбор, текстовая область, набор полей, легенда • iframe, встраивание, объект, апплет • шатер Следующие значения перечисленных свойств задают элемент «макет» (hasLayout = true): • позиция: абсолютная • плавать: влево или вправо • высота, ширина: любое значение, кроме авто • отображение: встроенный блок • масштабирование: любое значение, кроме нормального (недопустимое свойство).
• режим записи: tb-rl • overflow, overflow-x, overflow-y: auto|scroll|hidden (только для IE7) • положение: фиксированное (только IE7) • минимальная ширина, минимальная высота: любое значение (только IE7).
• max-width, max-height: любое значение, кроме «нет» (только IE7).
Чтобы сбросить hasLayout, вам необходимо указать значение, отличное от перечисленных выше (например: width: auto или float: none).
Возможные проблемы: • Плавающие элементы автоматически очищаются элементами, имеющими hasLayout. • относительно позиционированные элементы не получают hasLayout • внешние поля соседних элементов с hasLayout не сливаются.
• кликабельная область гиперссылки блока без hasLayout ограничена текстовой областью
5. Ошибки IE и их решения
1) Условные комментарии: <!--[if IE 6]>content for IE 6<![endif]-->
<!--[if gt IE 7]>content for greater than IE 7<![endif]-->
<!--[if gte IE 8]>content for greater or equal than IE 8<![endif]-->
<!--[if lt IE 6]>content for later than IE 6<![endif]-->
<!--[if lte IE 7]>content for later or equal than IE 7<![endif]-->2) Ошибка с двойным полем плавающих элементов: Проблема: IE 6 создает двойное поле для плавающих элементов.
Решение: добавить display: inline. 3) Абсолютное позиционирование в контейнере относительно: Проблема: абсолютно позиционированные элементы находятся в контейнере, который позиционирован относительно.
В результате родительский контейнер не имеет hasLayout и абсолютно позиционированные контейнеры размещаются относительно области просмотра.
Решение.
Установите родительский контейнер hasLayout. Пример: высота: 1%.
4) Абсолютно позиционированные контейнеры внутри абсолютно/относительно позиционированных: Проблема: в IE абсолютно позиционированные контейнеры внутри относительно позиционированных при наложении не выстраиваются в линию по z-индексу.
Решение: Добавьте z-индекс к родительским абсолютно/относительно позиционированным элементам.
Теги: #HTML #CSS #макет #CSS
-
Как Я Попал В 21 Школу И Раскрываем Секреты
19 Oct, 24 -
Интернет-Радиостанции Устройства
19 Oct, 24 -
200 — Это Хорошо Или Плохо?
19 Oct, 24
