Поток документов CSS, элементы блочного уровня (block) и встроенные элементы (встроенные) Раньше я читал много книг и статей, это фрагментарные базовые знания о макете CSS, которые я читал O. Рейли «Полное руководство по CSS», я обнаружил, что упомянутая в нем концепция документооборота сделала меня очень чувствительным. К сожалению, в книге не объяснялось, что такое документооборот. Возможно, автор решил, что это слишком просто, чтобы о нем стоило упоминать. Но я думаю, что эта концепция действительно важна. После ее понимания многие теории макетирования CSS становятся простыми для понимания, и я осознаю рациональность дизайна CSS. Итак, основываясь на своих догадках и экспериментах, я пришел к этому Утверждению. есть какие-либо ошибки, это совершенно нормально.
Документооборот делит форму на строки сверху вниз и располагает элементы в каждой строке слева направо, что и есть документооборот.
Каждый неплавающий элемент уровня блока занимает собственную строку, а плавающие элементы плавают на одном конце строки по мере необходимости. Если текущая строка не помещается, она будет перемещена на новую строку.
Встроенные элементы не занимают строку. Почти все элементы (включая элементы уровня блока, строчные элементы и элементы списка) могут создавать подстроки для размещения подэлементов.
Есть три ситуации, которые приводят к появлению элементов вне потока документов, а именно плавающее, абсолютное позиционирование и фиксированное позиционирование. Но в IE плавающие элементы также существуют в потоке документов (что заставляет меня думать, что это разумно><).
Плавающие элементы не занимают нормального пространства потока документов, а расположение плавающих элементов по-прежнему основано на обычном потоке документов, а затем извлекается из потока документов и перемещается насколько возможно влево или вправо. Текстовое содержимое будет заключено вокруг плавающего элемента. Когда элемент извлекается из обычного потока документов, другие элементы, все еще находящиеся в потоке документов, игнорируют этот элемент и заполняют его исходное пространство.
Запутанная концепция плавающего режима вызвана интерпретацией теории браузером. Можно только сказать, что многие люди используют IE в качестве стандарта, но на самом деле это не так.
Основываясь на документообороте, мы можем легко понять следующие шаблоны позиционирования:
Относительное позиционирование, то есть смещение относительно положения элемента в потоке документов. Но сохраните исходный заполнитель.
Абсолютное позиционирование, то есть полное вне потока документов, смещение и фиксированное позиционирование относительно ближайшего родительского элемента с нестатическим значением атрибута позиции. Абсолютное позиционирование, то есть полное вне потока документов, смещение относительно. область просмотра.
Мне еще предстоит решить несколько вопросов, которые я не понимаю.
1. В чем состоит основное различие между встроенными элементами и элементами блочного уровня?
2. Как понять, что атрибут Clear принимает правильное значение? Кажется, что экспериментальная ситуация всегда не соответствует теории.
Что означает встроенный элемент? Что такое элементы уровня блока.
«Полное руководство по CSS» Текст на китайском языке показывает: Любой видимый элемент, который не является элементом уровня блока, является встроенным элементом. Характеристикой его исполнения является форма «расположения строк». «Расположение строк» здесь означает, что форма выражения всегда отображается в строках. Например, когда мы устанавливаем встроенный элемент border-bottom:1px Solid #000;, он будет повторяться в каждой строке, и под каждой строкой будет тонкая черная линия. Если это элемент уровня блока, отображаемая черная линия появится только под блоком.
Такие элементы, как p, h1 или div, часто называют элементами уровня блока, и эти элементы отображаются как блок содержимого. Такие элементы, как Strong и span, называются встроенными элементами, а их содержимое отображается в строке; , «встроенный ящик». (Вы можете использовать display=block для преобразования встроенных элементов в блочные элементы. display=none означает, что сгенерированный элемент вообще не имеет рамки, не отображает элемент и не занимает место в документе)
О: Строковые элементы — это элементы внутри строки, которые можно размещать только внутри строки; элементы уровня блока представляют собой просто прямоугольник из четырех квадратов и могут быть размещены в любом месте страницы.
Б: Проще говоря, строчный элемент подобен слову; элемент уровня блока подобен абзацу. Если не указано иное, он появится в отдельной строке.
C: Общие элементы уровня блока, такие как абзац <p>, заголовок <h1><h2>..., список, <ul><ol><li>, таблица <table>, форма <form>, DIV<div. > и BODY <body> и другие элементы. К встроенным элементам относятся: элементы формы <input>, гиперссылки <a>, изображения <img>, <span>…..
D: Примечательной особенностью блочных элементов является то, что каждый блочный элемент начинает отображаться с новой строки, а последующие элементы также должны отображаться с новой строки.
E: <span> — это встроенный элемент в определении CSS, а <div> — это элемент уровня блока.
Те, кто изучил CSS, смогут сразу это понять. Но новичкам это непросто понять, поэтому я в основном хочу, чтобы новичкам это было более знакомо!
Использование слова «контейнер» облегчит визуальное понимание их существования и назначения. Встроенные элементы эквивалентны маленьким контейнерам, а <div> — большому контейнеру. Конечно, маленький контейнер можно поместить в большой контейнер. <span>Это небольшой контейнер. Таким образом, у вас может сложиться предварительное впечатление, хотим ли мы налить немного воды в большой контейнер. Но что, если я еще захочу добавить туда немного чернил? Все очень просто. Достаем маленькую емкость, наполняем ее чернилами и опускаем в чистую воду в большой емкости.
Позвольте мне привести вам простой практический пример: например, <div>Я люблю CSS — 52CSS.com</div>
Я хочу оформить букву c с помощью CSS, чтобы мы могли использовать <span>.
<div>Я люблю CSS – <span>52CSS.com</span> Стандарт W3C</div>
Блочный элемент обычно является элементом-контейнером для других элементов. Блочные элементы обычно начинаются с новой строки. Он может содержать строчные элементы и другие блочные элементы. Общим элементом блока является тег абзаца «P». Блочный элемент «form» совершенно особенный, его можно использовать только для хранения других элементов блока.
Без помощи CSS элементы блока будут располагаться по одной строке. С помощью CSS мы можем изменить режим макета этого HTML по умолчанию и разместить элементы блока там, где вы хотите. Вместо того, чтобы тупо каждый раз начинать новую строчку. Следует отметить, что тег table также является типом блочного элемента. Макет на основе таблицы и макет на основе CSS рассматривают эти два макета с точки зрения обычных пользователей (за исключением людей с нарушениями зрения, слепых и т. д.), за исключением людей с ограниченными возможностями. Кроме скорости загрузки страницы другой разницы нет. Однако если обычный пользователь случайно нажмет кнопку просмотра исходного кода страницы, разница между ними будет очень большой. Исходный код страницы макета CSS, разработанный на основе хороших концепций реконструкции, может, по крайней мере, позволить обычным пользователям без опыта веб-разработки быстро понять контент. С этой точки зрения код макета CSS должен иметь лучший эстетический вид.
Вы можете думать о блоке-контейнере div как о блоках, или, если вы играли с обрезкой, это будет легче понять. Предварительно вырезаем необходимые статьи из различных газет и журналов. Каждая часть вырезанного контента представляет собой блок. Затем мы наклеили эти листы бумаги на новый лист бумаги в соответствии с нашим замыслом макета. Это сформирует ваш собственный уникальный реферат. В качестве расширения этой технологии дизайн веб-макета следует той же схеме. .Встроенные
элементы обычно основаны на базовых элементах на семантическом уровне. Встроенные элементы могут содержать только текст или другие встроенные элементы, как и общий встроенный элемент «a».
Блочный элемент (block element) и встроенный элемент (inline element) — понятия в спецификации HTML. Основное различие между блочными и строчными элементами заключается в том, что блочные элементы обычно начинаются с новой строки. Когда добавляется элемент управления CSS, эта разница в атрибутах между блочными и встроенными элементами больше не становится разницей. Например, мы можем добавить такой атрибут, как display:block, к встроенному элементу cite, чтобы он также имел атрибут начинать каждый раз с новой строки.
Основная концепция изменяемого элемента заключается в том, что ему необходимо определить, является ли элемент блочным элементом или встроенным элементом, на основе контекста. Переменные элементы по-прежнему относятся к двум вышеуказанным категориям элементов. Как только контекст определяет их категорию, они должны следовать правилам блочных или встроенных элементов. См. полный текст грубой классификации элементов.
Что касается китайского названия строчного элемента, то существует множество видов строчных элементов, строчных элементов, строчных элементов и строчных элементов. По сути, единого перевода не существует, называйте его как хотите. Кроме того, говоря о встроенных элементах, мы будем иметь в виду атрибут отображения под названием display:inline; этот атрибут может исправить известную проблему двойной плавающей границы IE.
блочный элемент
* адрес — адрес * цитата — ссылка на блок * центр — блок выравнивания * dir — список каталогов * div — часто используемый уровень блока, а также основная метка макета CSS * dl — список определений * набор полей — группа управления формой * форма — форма взаимодействия * h1 — заголовок * h2 — подзаголовок * h3 — заголовок уровня 3 * h4 — заголовок уровня 4 * h5 — заголовок уровня 5 * h6 — заголовок уровня 6 * hr — горизонтальная разделительная линия * isindex — подсказка для ввода
*menu — список меню *noframes — необязательное содержимое фреймов (содержимое этого блока отображается для браузеров, не поддерживающих фреймы) *noscript — необязательное содержимое скриптов (это содержимое отображается для браузеров, не поддерживающих скрипты)
* ol - отсортированная форма * p - абзац * предварительно отформатированный текст * table - таблица * ul -
строчный элемент несортированного списка (inline element)
* a — точка привязки * abbr — аббревиатура * акроним — первое слово * b — жирный шрифт (не рекомендуется)
* bdo - переопределение биди
*big — крупный шрифт *br — перенос строки *cite — цитата *code — компьютерный код (обязательно при цитировании исходного кода)
* dfn — определить поля * em — подчеркнуть * шрифт — настройки шрифта (не рекомендуется)
* i — курсив * img — изображение * input — поле ввода * kbd — определение текста с клавиатуры * label — метка таблицы * q — короткая кавычка * s — подчеркивание (не рекомендуется)
* samp — определяет пример компьютерного кода * select — выбор элемента * small — текст мелким шрифтом * span — часто используемый встроенный контейнер, определяет блоки внутри текста * забастовка — подчеркивание * Strong — выделение жирным шрифтом * sub — нижний индекс * sup — надстрочный индекс * textarea — Поле ввода многострочного текста * tt — текст телетайпа * u — подчеркивание * var — определение переменных
Переменные элементы Переменные элементы определяют, является ли элемент блочным элементом или встроенным элементом в зависимости от контекста.
* апплет - Java-апплет
* button - кнопка * del - удалить текст * iframe - встроенный фрейм
*ins — вставленный текст *map — блок изображения (карта)
*объект — объект объекта *скрипт — клиентский скрипт