Каждый элемент в документе HTML принимает значение для свойства отображения CSS. Возможные значения, которые вы можете использовать для отображения много ,
Три наиболее часто используемых значения: none, block и inline. Но что, если вы не определите отображаемое значение для элемента? Ну, все элементы имеют начальное состояние или состояние по умолчанию для их отображаемого значения. Давайте рассмотрим некоторые из них и увидим некоторые интересные вещи, которые вы, возможно, не знали.
Блоки и текстовое содержимое
Это довольно просто. Я покрыл блок против встроенного раньше, но вот краткий обзор.
Элементы контейнерного типа (такие как <div>, <article>, <p> и т. Д.) Будут начинаться как элементы уровня блока , поэтому вычисляемое значение свойства display для них - «block». Все заголовки (<h1>, <h2> и т. Д.), Даже если они обычно содержат только текстовое содержимое, по умолчанию также являются блочными элементами.
С другой стороны, элементы, которые связаны с текстовым содержимым, являются встроенными элементами . Таким образом, их вычисленное значение отображения является «встроенным». Это такие элементы, как <span>, <em>,
и <цитировать>.
Как с блочными, так и со встроенными элементами вы можете (если хотите) переопределить их отображаемое значение на значение, отличное от значения по умолчанию. Обычно это делается для того, чтобы дать элементу значение «none» или одно из альтернативных значений (например, таблица). Вы также можете изменить встроенный элемент, чтобы заблокировать, и наоборот. Но в большинстве случаев это действительно не правильный выбор. Вместо этого вам лучше вообще использовать другой элемент или иным образом переосмыслить то, что вы пытаетесь сделать. (Обновление, 31 октября 2012 г.) Люди, кажется, неправильно истолковывают предыдущее предложение, которое сейчас удалено. Временами бывает полезно изменить элемент <a> на «блок» или элемент списка на «встроенный блок». Мое утверждение было больше об изменении чего-то вроде элемента <div> на «inline», когда вы можете просто использовать вместо него <span>.
Замененные элементы
В HTML, помимо уже упомянутых элементов, есть также то, что называется замененные элементы , К ним относятся <img>, <input>, <select> и <video>.
Хотя они отличаются от блочных и встроенных элементов, они все еще имеют вычисленные значения для их свойства отображения. И они не всегда одинаковы. Например, элемент <img> по умолчанию является встроенным. Кроме того, элемент <input> является встроенным блоком (который Я покрыл раньше ).
Неизвестные элементы
Защитники стандартов и доступности будут ненавидеть меня за то, что я говорю вам об этом, но на самом деле вам не нужно использовать какие-либо действительные элементы HTML5 в ваших документах. Вы можете создать целую веб-страницу, используя свои собственные готовые теги, такие как <cookieMonster>, <potato> и <sarcasm>.
Так как браузер будет читать эти посторонние элементы? Ну, вот подсказка. Вы помните, как видели этот кусок кода в вашем сбросе CSS?
статья, в стороне, подробности, figcaption, рисунок, нижний колонтитул, заголовок, hgroup, nav, раздел, сводка {display: block; }
Это добавлено для старых браузеров (например, IE6-8), которые не распознают новые элементы HTML5. По умолчанию во всех браузерах все неизвестные элементы имеют вычисленное значение отображения «inline». Вот JS Bin это демонстрирует использование готового элемента, а затем запись отображаемого значения элемента в консоли.
А также вот еще один пример с тем же элементом, которому присвоен статус «блок».
Невидимые элементы
Вот то, что вы можете не знать, возможно. HTML5 имеет категорию элементов, которая называется метаданные документа , К ним относятся такие элементы, как <head>, <title> и <style>. Эти элементы по умолчанию вычисляются для отображения: нет, как вы можете видеть, просматривая консоль в этом JS Bin ,
Но, хотите верьте, хотите нет, но вы можете сделать их видимыми. Посмотрите на снимок экрана, сделанный ниже из онлайн-версии Книга Джереми Кита HTML5 :
Как показано в инструментах разработчика Chrome, стилизация заголовка сайта осуществляется путем отображения элемента <title> внутри <head> с помощью display: block. В этом случае необходимо блокировать как элементы <title>, так и элементы <head>, а не только элемент <title>.
Это также можно сделать, чтобы сделать таблицу стилей элемента редактируемой пользователем, как показано в это JS Bin , Мы делаем это с помощью атрибута contenteditable элемента <style>. В поддерживаемых браузерах с этим атрибутом, установленным в «true», пользователь может вносить изменения в CSS и наблюдать, как они вступают в силу немедленно.
Заключение
Большая часть того, что я обсуждал здесь, была в некоторой степени освещена ранее, так что не все это может быть новым для всех. Если вы знаете о каких-либо других интересных вещах о значениях отображения по умолчанию для различных элементов или у вас есть какие-либо исправления / дополнения ко всему, что я сказал, я бы хотел их услышать.
Похожие
Лучший HTML в PDF PHP APIСкачать и запустить легко PDF Action Center , Выберите PHP в качестве языка. Выберите HTML в качестве исходного типа файла. Выберите функции, которые вы хотите в вашем PDF. Мастер PHP | Конвертировать HTML в PDF с Dompdf
PDF - это стандартный формат, изначально созданный Adobe для представления текста и изображений в документе с фиксированным макетом. Веб-приложение нередко поддерживает загрузку данных, таких как счета-фактуры или отчеты, в формате PDF, поэтому в этой статье мы рассмотрим, как легко создавать PDF-документы с использованием PHP. Dompdf - отличная библиотека, способная генерировать PDF из разметки HTML и стилей CSS (в основном она совместима с CSS 2.1 и поддерживает некоторые свойства Оптимизировать время загрузки страницы
... имизация страницы? Требуется ли оптимизация вашего сайта, как это сделать и устранить потенциальные проблемы? Почему оптимизация важна? Время загрузки сайта является одним из наиболее важных элементов пользовательского опыта, а также одним из факторов, когда речь заходит о SEO. В настоящее время у пользователей нет терпения ждать долгой загрузки страницы. Более 40% пользователей покидают сайт, если он загружается 3 секунды или более ( Обзор Samsung Galaxy Tab S 10.5: тонкий, легкий и очень впечатляющий
Samsung предлагает то, что может показаться ошеломляющим набором планшетов, включая стандартную Galaxy Tab, ориентированную на бизнес Galaxy Tab PRO и оснащенные стилусом линейки Galaxy Note. Теперь есть еще одна линейка - Galaxy Tab S, который доступен в размерах 8,4 и 10,5 дюймов, а также в вариантах с поддержкой Wi-Fi и Wi-Fi-Plus-LTE. 10,5-дюймовый Galaxy Tab S рассмотренный здесь предоставляет широкий набор функций 5 приложений для Android, которые меняют обои в соответствии с погодой
Вы можете посмотреть в окно, чтобы увидеть, какая погода, но слишком рано утром, и все, что вы можете видеть, это темнота. Вы находитесь в середине полной аудитории, и вам интересно, какая погода будет на улице, когда игра закончится. Вы так долго ждали метро, что действительно не знаете, как выглядит небо. В любом из этих сценариев вы могли бы извлечь свой смартфон и найти эту информацию, но это было бы быстрее, если бы вам не пришлось. Вот пять приложений для Android, которые будут менять Почему Intel строит процессоры ARM и кому это выгодно?
В конце октября произошло немыслимое. Intel сообщила, что собирается собирать процессоры ARM. Последовало много визга, криков и хвастовства, во главе со статьей Forbes, в которой говорится, что развитие «вызвало шок в технологической индустрии». Это, несомненно, немного преувеличено, хотя бы потому, что масштаб производства, на который согласился Intel, довольно мал. Язык R, для программистов
Контур Вступление Я написал программное обеспечение профессионально, возможно, на дюжине языков программирования, и самым сложным языком для меня был R. Это на самом деле довольно простой, но нетрадиционный язык. Эти заметки предназначены WD My Cloud Review (модель 2 ТБ)
... и, думая о собственном личном облаке. My Cloud, помеченный как «Сохранить все и получить доступ куда угодно», доступен в размере 2, 3 и 4 ТБ. В качестве конфигурации с одним диском My Cloud ориентирован в основном на домашних пользователей, и цена на него соответственно. Например, модель, протестированная в этом обзоре, построена на 2-ТБ жестком диске WD красного цвета. Сам диск стоит около 100 долларов. Итак, MSRP за 149 долларов совсем не плохой. Характеристики: Емкость
Комментарии
Ошибки отображения страницы на мобильных устройствах - правильно ли отображается веб-сайт на мобильных устройствах?Ошибки отображения страницы на мобильных устройствах - правильно ли отображается веб-сайт на мобильных устройствах? Индексирование статуса и ошибок проиндексированных подстраниц - индексируют ли роботы Google все подстраницы и видят больше колебаний в проиндексированных подстраницах? Заблокированные ресурсы (недоступные для роботов поисковых систем) - блокируем ли мы файлы, необходимые для интерпретации содержимого страницы роботами? Ошибки в XML-картах подстраниц Com/css?
com/css? family = Ubuntu + Mono' rel = 'stylesheet' type = 'text / css'> Подводя итоги Эта статья демонстрирует один из способов использования Bootstrap для размещения нижнего колонтитула на веб-странице электронной коммерции. Нижний колонтитул опирается на систему сетки Bootstrap и несколько пользовательских CSS-объявлений.
Но что, если вы не определите отображаемое значение для элемента?
Так как браузер будет читать эти посторонние элементы?
Вы помните, как видели этот кусок кода в вашем сбросе CSS?
Имизация страницы?
Требуется ли оптимизация вашего сайта, как это сделать и устранить потенциальные проблемы?
Почему оптимизация важна?
Ошибки отображения страницы на мобильных устройствах - правильно ли отображается веб-сайт на мобильных устройствах?
Индексирование статуса и ошибок проиндексированных подстраниц - индексируют ли роботы Google все подстраницы и видят больше колебаний в проиндексированных подстраницах?
Заблокированные ресурсы (недоступные для роботов поисковых систем) - блокируем ли мы файлы, необходимые для интерпретации содержимого страницы роботами?
Com/css?
Добро пожаловать ,
Гость
!
Войти