Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Поместить блочный элемент в инлайн? (https://javascript.ru/forum/jquery/70702-pomestit-blochnyjj-ehlement-v-inlajjn.html)

Белый шум 27.09.2017 23:01

j0hnik,
Речь про:
Цитата:

Content model:
Transparent.
https://www.w3.org/TR/html51/edits.html#elementdef-ins
, а не какую-то иную прозрачность :)

j0hnik 28.09.2017 00:09

Белый шум,
понятно,
все эти элементы для которых исключения транспарентные
a, ins, del, object, video, audio, map, noscript, slot, canvas, custom element
которые перечислил Райс.
ими же можно оборачивать блоки

вот только зачем такое сложное объяснение, если можно сказать проще:
Инлайновые элементы не должны внутри себя содержать блочные
исключения составляют a, ins, del, object, video, audio, map, noscript, slot, canvas, custom element.
вот и все объяснение.

просто опять появляются исключения
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="#">
		<h1>Header</h1>
	</a>
</body>
</html>


боди не блочный и не транспарентый, а код валидный :-?

Белый шум 28.09.2017 00:36

j0hnik,
в стандарте не сказано, что родитель транспарентных элементов может быть только блочным. Там сказано, что он принимает ту же контентную модель, что и родитель. Т.е. если <h1> может быть потомком <body>, то он может быть и потомком <body><a> - никакого исключения тут нет.

j0hnik 28.09.2017 02:32

Цитата:

Сообщение от Белый шум (Сообщение 465775)
j0hnik,
Там сказано, что он принимает ту же контентную модель, что и родитель.

Вот это определение мне нравится! :)
Шум, спасибо за разъяснения!

рони 28.09.2017 03:36

:-?
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
    $("h2").wrapAll("<i>")
});
  </script>
</head>

<body>
    <h2>1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>

</body>
</html>


<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
    $("h2").wrapInner("<i>")
});
  </script>
</head>

<body>
    <h2>1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>

</body>
</html>

Белый шум 28.09.2017 07:56

Ну, браузеры всегда относились лояльно к ошибкам стандарта на сайтах...

Тут ещё такой вопрос - контентная модель (еяпп) описывает только разрешение отношений предок-потомок, а не блочную модель:
Цитата:

Content model
A normative description of what content must be included as children and descendants of the element.
https://www.w3.org/TR/html51/dom.html#content-model

Т.е. такой код разрешён:
<div>
 Каждый <a href="#">охотник</a> желает знать где <ins>сидит</ins> фазан
</div>
Но ссылка при этом не станет блочной (хотя она внутри <div>) - т.е. браузер не поместит слово "охотник" в отдельный блок с шириной 100% (как если бы существовал стиль: "div>a, div>ins { display:block; }").

Но где в стандарте html5 описывается блочная модель элемента - я что-то не вижу...

Rasy 28.09.2017 11:07

https://www.w3.org/TR/html5/ - официальная верси w3c
http://w3c.github.io/html/ - последняя рабочая версия

Цитата:

https://html.spec.whatwg.org/multipage/ - здесь вы найдете чрезвычайно экспериментальные идеи. Не думайте, что если о чем-то говорится в этом документе, то это хоть где-то реализовано или хотя бы детально продумано.


Часовой пояс GMT +3, время: 07:21.