Medidas no CSS
Boa noite pessoal,
alguém poderia me explicar como funciona as medidas
relativas e absolutas no CSS. Ainda não entendi muito bem como usa-las.
alguém poderia me explicar como funciona as medidas
relativas e absolutas no CSS. Ainda não entendi muito bem como usa-las.
Gustavo Fernandes
Curtidas 0
Respostas
Joel Rodrigues
13/05/2013
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.
GOSTEI 0
Marcelo Pastore
13/05/2013
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.
GOSTEI 0
Gustavo Fernandes
13/05/2013
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 é ?
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 é ?
GOSTEI 0
Joel Rodrigues
13/05/2013
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.
GOSTEI 0
Gustavo Fernandes
13/05/2013
Obrigado pela resposta e atenção Joel.
GOSTEI 0
Fernando Vilhena
13/05/2013
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:
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.
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>
GOSTEI 0