GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Conteúdo para estudos

front-end
html
css
Tags: #<Tag:0x00007f1b215a1160> #<Tag:0x00007f1b215a1020> #<Tag:0x00007f1b215a0ee0>

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


#3

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