CSS Document Streaming, Block Elements (Block), встроенные элементы (встроенные). Руководство Рейли <CSS Puthitative> обнаружило, что концепция потока документов, упомянутая в нем, сделала меня очень чувствительным Эта концепция действительно важна. Если есть какие -либо ошибки, это чисто нормально. Поток документов делит форму сверху вниз на ряды и разбрасывает элементы в каждой строке в порядке слева направо, который является потоком документов. Есть еще несколько вопросов, которые я не понимаю 1. Как встроенный элемент, один из трех основных элементов, какое основное различие между ним и элементами уровня блока? Что означают встроенные элементы? Что такое элемент уровня блока. Китайский текст «авторитетного руководства CSS» показывает, что любой видимый элемент, который не является элементом на уровне блока, является встроенным элементом. Характеристикой его выражения является форма «макета ряда». Например, когда мы устанавливаем встроенный элемент-пограничный блок: 1PX Solid #000;, он повторяется в каждой линии, и под каждой линией будет тонкая черная линия. Если это элемент уровня блока, отображаемые черные линии появятся только под блоком. Позвольте мне дать вам простой практический пример: например, <div> Я люблю CSS - 52css.com </div> Встроенные элементы, как правило, основаны на семантических основных элементах. Встроенные элементы могут вместить только текст или другие встроенные элементы и общий встроенный элемент «A». Блочный элемент встроенный элемент Элемент переменной элемента является элементом блока или встроенным элементом, основанным на контексте.
Каждый не плавающий элемент на уровне блока занимает одну строку, а плавающий элемент плавает на одном конце ряда в соответствии с правилами.
Встроенные элементы также не занимают ни одной строки.
Есть три ситуации, которые приведут к тому, что элемент будет существовать из потока документов, а именно плавучий, абсолютное положение и фиксированное положение. Полем
Плавающий элемент не занимает какое -либо нормальное пространство потока документов, а позиционирование плавающего элемента основано на обычном потоке документов, а затем извлекает из потока документов и движется влево или вправо как можно дальше. Содержание текста окружает плавающий элемент. Когда элемент извлекается из обычного потока документов, другие элементы, все еще в потоке документов, игнорируют элемент и заполняют его исходное пространство.
Коренной причиной плавающих концепций является интерпретация браузера теории. Я могу только сказать, что многие люди используют IE в качестве стандарта, но это не так.
На основании потока документов мы можем легко понять следующие шаблоны позиционирования:
Относительное позиционирование, то есть смещение относительно позиции элемента в потоке документов.
Абсолютное позиционирование означает полностью отделенное от потока документов и офсетное и фиксированное позиционирование относительно ближайшего родительского элемента атрибута позиции нестатического значения, то есть полностью отделено от потока документов и смещено относительно видового порта.
2. Как понять, когда четкий атрибут берет правильную ценность?
Такие элементы, как P, H1 или Div, часто называют элементами уровня блока, и эти элементы отображаются как часть контента; То есть «встроенная коробка». (Вы можете использовать Display = Block для преобразования элементов в строке в элементы блока. Display = нет означает, что сгенерированный элемент вообще не имеет поле, и ни отображает элементы, ни не занимает место в документе)
A: Линия-это элемент внутри линии, и может быть помещена только в линию;
B: По словам, элемент в линии похож на слово;
C: Общие элементы уровня блока, такие как пункт <p>, название <h1> <h2>…, list, <ul> <ol> <li>, Таблица <Таблица>, Форма <Form>, Div <Div> и Элементы тела, такие как <тело>. Встроенные элементы похожи на: Форма Элементы <NOPT>, гиперссылки <a>, Image <mg>, <pan> .....
D: отличительная особенность невидимости на уровне блоков заключается в том, что каждый элемент уровня блока отображается из новой линии, а последующая невидимость также должна отображаться из другой линии.
E: <pan> принадлежит встроенному элементу в определении CSS, а <div>-элемент уровня блока.
Для тех, кто изучал CSS, сначала вы можете понять это. Но новичкам нелегко понять, поэтому я в основном объясняю это новичкам более знакомым!
Использование словесного контейнера облегчит понимание их существования и цели. небольшой контейнер. <pan> - это небольшой контейнер. Но что мне делать, если я хочу поместить в них чернила? Это очень просто.
Я хочу использовать CSS для определения стиля буквы C, поэтому мы можем использовать <pan>.
<div> Я люблю css - <pan> 52css.com </span> w3c standard </div>
Элемент блока - это контейнер из других элементов. .
Без эффекта CSS элементы блока будут расположены в порядке каждый раз. С помощью CSS мы можем изменить режим макета по умолчанию этого HTML и поместить элементы блока в желаемое положение. Вместо того, чтобы начать другую линию глупо каждый раз. Следует отметить, что таблица также является типом блочного элемента. Скорость нет другой разницы, кроме разницы. Однако, если обычный пользователь случайно нажимает кнопку «Просмотр страницы», разница между ними будет очень большой. Исходный код страницы макета CSS, разработанного на основе концепции хорошей реконструкции, может по крайней мере позволить обычным пользователям без веб -разработки быстро понять контент. С этой точки зрения, код макета CSS должен иметь лучший эстетический опыт.
Вы можете представить себе блок-контейнер-элемент Div в качестве коробок, или, если вы играли с статьями Clip-On, это будет легче понять. Сначала мы вырезали статьи, которые нам нужны из различных газет и журналов. Каждая кусочка - это блок. Затем мы переоцениваем эти кусочки бумаги на новый лист бумаги в соответствии с нашими собственными намерениями макета. Это сформирует ваши собственные уникальные новости Digest. Как расширение технологии, дизайн веб -макета следует той же шаблоне. Полем
Блок -элементы и встроенные элементы являются понятиями в спецификации HTML. Основная разница между элементами блока и встроенными элементами заключается в том, что элементы блока обычно начинаются с новых линий. Однако, когда будет добавлено управление CSS, разница атрибутов между блочными элементами и встроенными элементами не станет разницей. Например, мы можем добавить встроенный цитирование элемента в атрибут Display: Block, чтобы он также мог иметь атрибуты, которые начинаются с новой линии каждый раз.
Основная концепция переменного элемента заключается в том, что ему необходимо определить, является ли элемент элементом блока или встроенным элементом, основанным на контекстуальных отношениях. Переменные элементы по -прежнему принадлежат к двум вышеупомянутым категориям. См. Полный текст для классификации общего элемента.
Что касается китайского названия встроенного элемента, есть много встроенных элементов, встроенных элементов, встроенных элементов и элементов прямого входа. Там в основном нет единого перевода, просто назовите его как вам нравится. Кроме того, когда дело доходит до встроенных элементов, мы подумаем, что есть атрибут дисплея: встроенный;
* Адрес - Адрес * Blockquote - ссылка на блок * Центр - выравнивающие блоки в подъеме * DIR - Список каталогов * DIV - Обычно используемый уровень блока прост и также является основной меткой макета CSS * DL - список определения * Fieldset - Control Form Control Группа* Форма - Форма взаимодействия* H1 - Большое заголовок* H2 - Subtitle* H3 - Уровень 3 заголовок* H4 - Уровень 4 заголовок* H5 - Уровень 5 заголовок* H6 - Уровень 6 заголовок* HR - горизонтальный разделитель* Isindex - подсказка ввода
* Меню - Список меню * Noframes - Frames Необязательный контент, (отобразите этот блок содержимого для браузеров, которые не поддерживают Frame * Noscript - Необязательный содержимое скрипта (отобразите этот содержимое для браузеров, которые не поддерживают скрипт)
* ol - форма сортировки * P - пункт * Pre - Text Format * Таблица - Таблица * UL - не сортированный список
* a - точка якоря * abbr - аббревиатура * аббревиатура - первое слово * b - жирный жирник (не рекомендуется)
* bdo - bidi override
* Big - большой шрифт * Br - Line Break * CITE - QUOTE * CODE - Код компьютера (необходимо при цитировании исходного кода)
* DFN - определить поля * em - подчеркнуть * Font - Настройки шрифта (не рекомендуется)
* i - italic * img - изображение * Ввод - поле ввода * KBD - определить текст клавиатуры * Метка - метка таблицы * Q - короткая ссылка * S - Medium Mark (не рекомендуется)
* SAMP - определить пример компьютерного кода * Выбрать - Выбор проекта * Small - Text Small Font * SPAN - обычно используется встроенные контейнеры, определяйте блоки в тексте * Strike - Средний балл * Сильный - Смелый акцент * sub - suppript * sup - SuperScript * Textarea - Многостроение текстового ввода ввода * tt - teletext * u - underscore * var - определить переменные
* applet - java applet
* Кнопка - кнопка * del - удалить текст * iframe - inline frame
* ins - вставленный текст* Карта - блок изображения (карта)
* объект - объект объекта* скрипт - клиент -скрипт