HTML BLOCK E INLINE

Todo elemento HTML tem um valor de display (default) padrão, os valores mais
comuns são o display: block e display: inline

BLOCK:

• começa uma nova linha

• adicionado uma margin antes e depois do elemento e ocupa a linha toda

• Os elementos mais comuns do display block são: <p> e <div>

Exemplo:

<p style="border: 1px solid black">Hello World</p>

<div style="border: 1px solid black">Hello World</div>

Aqui estão os elementos display:block HTML:

<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:

• Não inicia uma nova linha, mantém os elementos em uma única linha

• Pega somente a largura necessária para o elemento

<p>This is an inline span <span style="border: 1px solid black">Hello World</span>

Aqui estão os elementos display:inline HTML:

<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>

NOTA: um elemento inline não pode conter um elemento block dentro dele

Elemento <DIV>

Usado para container outros elementos ele é um elemento por padrão display: block.
Nele podemos colocar elementos display: block e display: inline

Elemento <SPAN>

Usado para container em partes de texto ele é um elemento por padrão display:inline

Formatando o elemento <DIV>

O elemento <div> por default é um elemento block (ocupa toda a largura da página) e
vem com uma quebra de linha antes e depois dela.
Os atributos mais comuns vistos no elemento são style, id e class.

CENTRALIZAR

Para centralizar uma div que não está com 100% largura utilizamos o atributo margin:
auto

MÚLTIPLOS ELEMENTOS DIV

Podemos ter múltiplos elementos div em uma mesma página.

Para alinharmos esses elementos lado a lado utilizamos diferentes métodos:

FLOAT

A propriedade do CSS float permite os elementos ficarem alinhados uns aos outros

INLINE-BLOCK

Ao alterar a propriedade display do CSS para inline-block será retirada a quebra de

FLEX

Para fazermos o valor flex funcionar, temos que colocar em um container (em outra
div) as divs que queremos alinhar umas às outras e colocarmos nesse container a
propriedade display: flex
GRID

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns,
making it easier to design web pages without having to use floats and positioning.

Sounds almost the same as flex, but has the ability to define more than one row and
position each row individually.

The CSS grid method requires that you surround the <div> elements with another
<div> element and give the status as a grid container, and you must specify the width
of each column

ATRIBUTO CLASS E ID

Class:

Utilizado para dar um título (nome) para fazer uma classificação de conteúdo a um
elemento HTML, podemos ter mais de um elemento com o mesmo nome de uma
classe. Ou seja, múltiplos elementos irão utilizar a mesma classificação de conteúdo.
A sintaxe da class:

Para acessarmos o atributo class criado no elemento html primeiro colocamos o (.)
seguido pelo nome da classe (nome definido no elemento html) e por último abrimos e
fechamos as chaves { } e o conteúdo da formatação da classe é colocado dentro das
chaves.

Múltiplas classes em um mesmo elemento:

No atributo class podemos colocar no mesmo atributo mais de um nome de uma

Por exemplo, o primeiro elemento h2 pertence a classe city e a main, então ele herdara
as formatações das duas classes.

Diferentes elementos podem compartilhar a mesma classe. Não necessariamente

Nota: O nome da classe além de ser usado no CSS também poderá ser usado código
do javascript

ID:

O a ID segue o mesmo princípio da classe mas com a diferença de que só poderá ser
usado uma única vez por elemento, ou seja não poderá existir dois IDs com o mesmo
nome. Ele pode ser usado no CSS e no JavaScript

A sintaxe do ID:
O ID vai iniciar com (#), seguido do nome do ID e abertura e fechamento das chaves { }
e a formatação do conteúdo ficará entre as chaves

HTML BookMarks com Id e Link:

O Id poderá ser usado para navegar entre o conteúdo do site através de links no
próprio site html

Exemplo: