Странность с явными и неявными абзацами

ProgramBox

Странность с явными и неявными абзацами

Post author:admin
Запись опубликована:30 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я поиграл с HTML и CSS, чтобы посмотреть, смогу ли я создать логотип LaTeX, который будет масштабироваться и окрашиваться вместе с остальным текстом (а не с изображением). Я могу сделать это с помощью встроенного блока, <div> если он не заключен в абзац. Если я добавляю   теги и, он ломается. В чем разница между абзацем с явными тегами абзаца и без? Будет ли это что-то исправлено определенными типами документов HTML?

 <!doctype html>
<html>
<head>
<title>Test logos</title>
</head>
<body style="font: 12px Arial,sans-serif;">
1. div inline-block, works fine<br>
So as a helpful reminder, I thought I would gather some helpful information here to
help both veterans of these forums and new users lean how best to use these forums.
Where are the forum rules?
<div style="display: inline-block; position: relative;
 border: 1px solid blue; /* just for debug */
     font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
  <div style="left: 0em; bottom: -0.6ex; position: absolute;">L</div>
  <div style="left: 0.7em; bottom: 0.3ex; position: absolute; font-size: 50%;     
        font-weight: bold;">A</div>
  <div style="left: 0.6em; bottom: -0.6ex; position: absolute;">amp;Tau;</div>
  <div style="left: 1.35em; bottom: -1.25ex; position: absolute; font-size: 80%; 
        font-weight: 600;">amp;Epsilon;</div>
  <div style="left: 1.63em; bottom: -0.6ex; position: absolute; ">amp;Chi;</div>
</div>
rules!
You can find the forum rules via this thread:
Helping Each Other and Keeping Posts Respectful.
<hr>
<p>
2. p div inline-block, div OK, but /p inserted before it, so line break and gap 
        before div<br>
So as a helpful reminder, ...
<div style="display: inline-block; position: relative;
 border: 1px solid blue; 
font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</div>
rules!...
</p>
<hr>
3. span inline-block, works fine<br>
So as a helpful reminder, ...
<span style="display: inline-block; position: relative;
border: 1px solid blue; 
    font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</span>
rules! ...
<hr>
<p>
4. p span inline-block, block empty, /span and /p inserted after span<br>
So as a helpful reminder, ...
<span style="display: inline-block; position: relative;
 border: 1px solid blue; 
    font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</span>
rules! ...
</p>
<hr>
5. span block, block OK, but has line breaks before and after<br>
So as a helpful reminder, ...
<span style="display: block; position: relative;
 border: 1px solid blue; 
font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</span>
rules! ...
<hr>
<p>
    6. p span block, block empty, /span /p inserted, divs elsewhere, break 
    before/after block<br>
So as a helpful reminder, ...
<span style="display: block; position: relative;
 border: 1px solid blue; 
font-family: Times-New-Roman,serif; height: 2ex; width: 2.30em;">
    << see nested <div>s above >>
</span>
rules! ...
</p>
</body>
</html>

Первый и третий случаи (без  тегов), похоже, работают нормально. Третий имеет divs внутри диапазона, но, похоже, принимает его. Четвертый и шестой случаи (  блочный или встроенный блок, с  ) получают  и  автоматически вставляются, поэтому содержимое span является пустым, а divs перемещаются куда-то еще. Второй случай идентичен первому, за исключением  , и a  автоматически вставляется (вместе с полем) перед блоком логотипа LaTeX . Пятый случай похож на третий, за исключением того, что это блок, а не встроенный блок (оба диапазона), и разрывы вставляются до и после блока логотипа.

FF30 (моя основная платформа), Chrome и IE11 ведут себя практически одинаково. В двух словах, почему добавление тегов абзаца так сильно меняет поведение? Кажется, это больше, чем простой блочный элемент с верхним и нижним полями!

Ответ №1:

В основном, с чем вы сталкиваетесь, так это с тем фактом, что <div> теги не разрешены внутри  тегов. И внутри тегов должны быть только встроенные элементы  . Разные браузеры могут интерпретировать это так, как вы хотели поставить  и вставить различные теги для вас. Кроме display:block того, в этом случае он будет занимать ширину содержащего элемента <body> , поэтому есть то, что выглядит как разрывы строк.

Взгляните на спецификацию, группирующую элементы, строки и абзацы. (Ниже приведены цитаты из этих разделов.)

Элемент P представляет абзац. Он не может содержать элементы уровня блока (включая сам P).

  <!ELEMENT SPAN - - (%inline;)*

1. Значит, неявные абзацы не рассматриваются как абзацы (ограниченные элементы уровня блока, которые не могут быть родительскими для блоков)? А как насчет divs в пределах диапазона? Похоже, это сработало — или мне просто повезло с этим? Когда [обычно] встроенный элемент, такой как span, объявляется display=block или inline-block , меняет ли это то, что разрешено для дочерних элементов, или по-прежнему применяются правила по умолчанию? Итак, вопрос на 64 доллара заключается в том, возможно ли сделать то, чего я пытаюсь достичь, то есть разместить текст в другом встроенном потоке? Можно ли настроить интервалы для принятия позиционирования?

2. @phil-perry Вы, вероятно, увидите различия в разных браузерах с разделениями в промежутке. Вы можете заставить это работать, но правила по-прежнему применяются, и разные браузеры (например, более старый IE) иногда интерпретируют правила немного по-разному. Итак, суть в том, что да, вы можете. Возможно, потребуется немного повозиться, но это вполне возможно, как вы видели в своих 1-м и 3-м тестовых примерах.

Ответ №2:

типы абзацев:

физическое против концептуального
явный против неявного
дедуктивный, индуктивный гибрид

подведение итогов написания рефератов:

описательная аннотация
информативный реферат
сочетание описательного и информационного