Андрей, привет,
Есть такой простой код.
Назначение — убедиться, что для отображения текста в div, автоматически вставляется inline элемент text.
<html>
<head>
<style>
div
{
width: *; height: *;
border: 1px solid gray;
}
div > text { border: 1px solid blue; }
</style>
</head>
<body>
<div>
html
<div>head</div>
<div>body
<div>div</div>
</div>
</div>
</body>
</html>
Судя по результату, text вставляется только тогда, когда div имеет дочерние block элементы.
Если дочернего block элемента нет, то text не вставляется, но сам текст при этом отображается.
Уверен, это поведение имеет под собой какое-то обоснование и где-то документировано. Можешь показать, где?
Спасибо.
Здравствуйте, ShaggyOwl, Вы писали:
Implicit <text> это то что известно как anonymous paragraph в CSS.
Вот иллюстрация с
MDN:
Разметка:
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
Модель:
Единственная разница лишь в том что в Sciter эти anonymous paragraphs/boxes можно стилировать.
По умолчанию div { flow:default; }
Что разворачивается либо в flow:text (если текст и inlines), либо в flow:vertical (если есть блоки). Вот в последнем случае все inline runs оборачиваются в <text>.
Здравствуйте, c-smile, Вы писали:
CS>Единственная разница лишь в том что в Sciter эти anonymous paragraphs/boxes можно стилировать.
О том собственно и вопрос
Почему у text в первом div есть border, а во втором нет?
<html>
<head>
<style>
text { border: 1px solid gray; }
</style>
</head>
<body>
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
<div>Some inline text followed by more inline text.</div>
</body>
</html>
Здравствуйте, ShaggyOwl, Вы писали:
Ну я же сказал,
div { flow:default; } т.е. в зависимости от содержимого он будет или flow:text или flow:vertical
Но вот если же ты явно напишешь
div { flow:vertical; }
То для того чтобы эти inline там разместить будет создан <text> — anonymous text container.
flow:vertical; может содержать только
display:block элементы. <text> и есть такой элемент:
text { display:block; flow:text; }
А почему тогда рамка отображается в этом случае:
<html>
<head>
<style>
html > text { border: 1px solid blue; }
</style>
</head>
aaa
</html>
В
<html> нет никаких блоковых элементов (я посмотрел в инспекторе), и
html { flow:text; } не помогает.
