Medidas no CSS

Question

Boa noite pessoal,algu�m poderia me explicar como funciona as medidasrelativas e absolutas no CSS. Ainda n�o entendi muito bem como usa-las....

Joel Rodrigues · Answer

Basicamente, quando voc� define uma medida como 100px ou 30pt, por exemplo, o objeto ter� exatamente essas dimens�es em qualquer dispositivo em que seja visualizado, em qualquer situa��o, em qualquer orienta��o de p�gina, etc. Quando voc� define com percentuais, as dimens�es do objeto se tornam relativas �s dimens�es do objeto pai, seu container, variando conforme este varia.

nem eu sabia dessas informa��es, obrigado a pergunta e a resposta.

Marcelo Pastore · Answer

nem eu sabia dessas informa��es, obrigado a pergunta e a resposta....

Gustavo Fernandes · Answer

Obrigado pela resposta. Mas uma pergunta Joel.
A propriedade MEDIA que fica junto com o Style numa declara��o CSS externa, dependendo da configura��o que � definida atribu�da na propriedade, a p�gina vai se adequar ao dispositivo utilizado n�o � ?

Joel Rodrigues · Answer

Perfeitamente. As chamadas media querida servem para definir estilos (CSS) a serem aplicados de acordo com a configura��o do dispositivo que est� acessando a p�gina....

Gustavo Fernandes · Answer

Obrigado pela resposta e aten��o Joel....

Fernando Vilhena · Answer

Deixo aqui meus R$ 0,10 de contribui��o.

Utilizarei como exemplo a tag div.

No html os elementos html seguem um fluxo natural de empilhamento

Quando voc� define duas div's, div2 fica colada logo abaixo da div1.

sendo ambas filhas de body:
ex codigo parcial:

<body>
    <div id="div1">
        div 1
    </div>
    <div id="div2" >
            div 2
    </div>
</body>

Se voc� acrescentar no css para div2 propriedades top e left, elas somente funcionar�o se voc� configurar o tipo position: que por padr�o vem como static(sem posi��o definida).

No caso se top e left forem configurados com 20px(pixels). A posi��o da div2 poder� variar conforme a configura��o de position.

Se position for absolute, a div2 ser� posicionada levando em considera��o body.
Se position for absolute, a div2 ser� posicionada levando em considera��o a posicao de div1.

Nao esquecer que div2 est� dentro de body portanto a referencia da posicao de div2 � o topo de body,
Ja no caso da div1, a div2 est� logo abaixo da mesma, portanto ela se posiciona em rela��o ao bottom da div1.

Segue c�digo exemplo completo, experimente alternar o position da div2 entre absolute e relative e veja o que acontece.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">

        #div1 {
            border:1px solid red;
            width:700px; 
            height:50px; 
            top:200px;
        }

        #div2 {
            border:1px solid blue; 
            position:relative;
            width:200px; 
            top:25px; 
            left:55px; 
            height:50px; 
        }
    </style>
</head>
<body>
    <div id="div1">
        div 1
    </div>
    <div id="div2" >
            div 2
    </div>
</body>
</html>