Какие шаги использует браузер для верстки веб-страницы

Question

Я вхожу в HTML прямо сейчас, и сегодня я изучаю макет страницы. Я хочу понять алгоритм, который браузер использует для размещения веб-страницы, чтобы я мог лучше предвидеть, где на основе моего HTML будет отображаться div.

Я понимаю, что:

• Существуют блочные и пролетоподобные элементы.
• Блочные элементы занимают столько вертикального пространства, сколько необходимо, и по умолчанию все горизонтальное пространство.
  • Если вы добавите стилирование с плавающей точкой или абсолютное позиционирование, тогда div занимает столько места по мере необходимости, либо вы можете установить значение ширины.
• Span-подобные элементы занимают столько места, сколько необходимо.

Где я начинаю становиться неясным, это то, что происходит, когда я начинаю использовать clear:both, или когда участвуют вложенные div.

Я думаю, что я ищу это понятие курсор , которое браузер использует при размещении документа. Если такое понятие существует, то не могли бы вы объяснить, как оно работает. В противном случае, пожалуйста, укажите мне информацию, которая, по вашему мнению, будет вам полезна.

Для простоты предположим простую модель для объектов HTML - только ширина и высота, поля или отступы и т. Д.

Answer 1

Я не думаю, что есть фактический курсор, хотя браузеры могут внутренне использовать что-то подобное.Существует множество правил (поиск по «Блочной модели» или, что еще лучше, « Модель визуального форматирования »), определяющих, как должны отображаться страницы.Вы правы, что есть блоки и встроенные элементы.Блоки действительно занимают все горизонтальное пространство, если не указано иное.Они имеют размер по вертикали, если не указано иное.Этот факт должен ответить и на ваш вопрос о вложенных элементах div.

Насколько я могу судить, у вас есть какое-то базовое понимание, которое также верно.Но вместо того, чтобы вставлять здесь всю документацию обо всех (несовместимых!) Версиях блочной модели, я думаю, что лучше найти некоторую информацию об этом, начиная с сайта w3.com .

Answer 2

Я бы предположил, что следующим шагом будет изучение различий между фиксированным, относительным и абсолютным расположением элементов.Использование float и clear влияет на каждый сценарий по-разному, поэтому важно знать, как работает каждое позиционирование.

Эрик Мейер обладает весьма полезной информацией по этому вопросу.