3 de fevereiro de 2021 - 4 min de leitura
O que é document flow?
Um resumo sobre o document flow em documentos HTML
Todo desenvolvedor frontend, deve dominar muito bem HTML
, CSS
e Javascript
. Então para entender de uma vez por todas o que é o raio de Document Flow que tanto se fala por ai, resolvi fazer este post explicando o que é o Document Flow dentro de um documento HTML.
Um documento HTML está composto por duas partes o HEAD e BODY, dentro do BODY a composição do layout é feita de cima para baixo seguindo um "flow". Este flow está representado na imagem abaixo.
Então o layout da página é composto por elementos (tags), os quais podem ser de dois tipos:
-
Block
-
Inline
Block
Os elementos de tipo block, sempre iniciam uma nova linha dentro do viewport, por tanto um elemento block ocupará toda a largura do viewport (janela do navegador).
Os elementos de tipo block são:
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1> <h6> <header> <hr> <li> <main> <nav>
<noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
Inline
Os elementos de tipo inline, não iniciam uma nova linha dentro da página. Cada elemento inline, será posicionado lado a lado até ocupar a largura total do viewport.
Os elementos de tipo inline são:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i>
<img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script>
<select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
Conclusão
Compreender a diferença desses tipos e seu comportamento ajudará demais no desenvolvimento e composição das páginas web. Com isto em mente, entender as propriedades CSS será muito mais fácil.
Comentários