Conteúdo para estudos

Front-end CSS
, ,
#1

Galera, como todo aprendiz, eu já dei uma procura na net e não achei um conteúdo bem especifico do que eu quero, se vocês tiver um material ai explicando bem sobre Float, Position, display. Pois é preciso dominar bem as divs, não é preguiça de procurar, é que aqui com vocês tenho certeza que vou encontrar mais facilmente. Obrigado à todos!

#2

@thiagolucassilva Olá,
Basicamente essas propriedades do css são para atribuir o posicionamento de um determinado elemento, vou ser bem breve e simplista.

Vamos lá:
Float: serve para posicionar um elemento ou div a direita ou esquerda e ficar de forma flutante.
Exemplo:

html

<div id="esquerda">aqui fica o conteúdo da esquerda</div>
<div id="direita">aqui fica o conteúdo da direita</div>

css

<style>
//a div vai ficar na esquerda
#esquerda{
float:left;
width:200px;
height:200px;
background:red;
}
//a div vai ficar na direita 
#direita{
float:right;
width:200px;
height:200px;
background:blue;
}
</style>

Position: define duas coisas: como o elemento se comporta em relação aos seus ancestrais na hierarquia, e como seus descendentes poderão se comportar em relação a ele.

Tanto position: relative quanto position: absolute determinam contextos de posicionamento para os descendentes do elemento. Elementos com position: absolute são posicionados em relação ao contexto de posicionamento mais próximo.
Exemplo:

<div style="position: relative">
    <div>
        <div style="position: absolute"></div>
    </div>
</div>

IMPORTANTE: PARA MAIS INFORMAÇÕES PESQUISE MELHOR SOBRE ESSA PROPRIEDADE.

Display: A propriedade display possui dois elementos de controles inline que serve para renderizar a div em inline ou em linhas e block em blocos.
Exemplo:

<div style="display:inline; background:blue;">elemento vai ficar em inline</div>
<div style="display:inline; background:blue;">elemento vai ficar em inline</div>
<div style="display:block; background:red;">elemento vai ficar em block</div>
<div style="display:block; background:red;">elemento vai ficar em block</div>

Caso não tenha entendido muito bem sobre, desculpe se não consegui transmitir a ideia.
Mas em caso de qualquer dúvida sobre o mesmo, estou disposto para lhe ajudar na sua jornada.

1 curtida
#3

Muito obrigado meu amigo, Deus te abençoe grandemente !

1 curtida
#4

Disponha, desculpe pela demora. Estava ausente do fórum.

#5

o float não deve ser usado para posicionar divs, o pessoal usa muito, mas na verdade o float so serve para fazer um texto flutuar em volta de uma imagem e nada mais, por isso que não existe float center, middle essas coisas, somente float left e right.

o display serve para alterar o comportamento do elemento no DOM e tem vários valores, particulamente eu acho essa propriedade um pouco complexa, aconselho da uma pesquisada sobre ela.
tem display none, block, inline-block, table, cell e por ai vai.

o position parece complexo só que é o mais fácil deles, sever para posicionar elementos de acordo com eles mesmos ou seus elementos pais, você só vai pegar como utilizar isso com clareza fazendo muitos testes, mas não é complicado não, e com o uso do position você pode usar as propriedades, top, left, right, bottom e z-index.

1 curtida