facebook
googlemais
twitter
imagem

Box Model com CSS

Postado por :Jairo lima em 22/02/2014

Box Model com CSS

Boxel Model em CSS, determinam as características dimensionais, visiuais e de posicionamento que dão as necessárias marcações do nosso layout. Boxes (palavra inglesa para 'caixa' ), repesentam os elementos da marcação, seus conteúdos e etc.


É muito importante entender este conceito de boxes em css, para poder-mos entender o funcionamento da própria css. As CSS admitem que o layout de um documento, sua construção visual, seja criado a partir de uma árvore de elementos de marcação. Cada elemento contém uma lista de zero ou mais elementos-filhos, string de texto depois da lista e strings de texto entre os itens da lista.


Imaginando uma árvore, podemos observar que as CSS descrevem como cada elemento e cada string de texto serão dimensionados e posicionados, transformando a árvore do documento em uma árvore de boxes, cujas dimensões, posicionamento e relacionamento com outros boxes do documento dependem das propriedades de cada um dos boxes.


Há três tipos básicos de boxes:

block-level boxes - boxes nível de bloco. São boxes gerados por elementos tais como por um parágrafo:


            
           <p>Ac scelerisque in sed vut adipiscing aenean et integer cum, ac! Est enim parturient amet enim dis sagittis sit urna? In arcu.   
           Ut magna velit dis, nunc augue tortor vel adipiscing integer, vel montes. Vut aliquet nec lundium? Ac, integer! Ridiculus</p> 
           Texto inserido dentro de um parágrafo. 
         
      


line-boxes - boxes em linha. São boxes tais como aqueles gerados por linhas de texto:



Primeiro bloco de texto:
Augue lectus sit facilisis ac adipiscing dis odio mid aliquet amet, placerat elementum mus a pulvinar tempor nunc magnis nisi. Lorem, porttitor aliquet! Eu vel turpis quis ac vel, urna duis? Mauris dis porta quis.
Segundo bloco de texto:
Cras ac, in ultrices facilisis nunc eu scelerisque nascetur phasellus porta magna, sagittis, ac risus et dis integer etiam pellentesque, adipiscing pulvinar! Dis, odio! Urna mus tristique, magnis placerat mid elit dignissim auctor et etiam,



inline-level boxes - boxes nível inline. São boxes, tais como aqueles gerados pelas palavras em uma linha de texto.

  <div>  
    Cras ac, in ultrices facilisis nunc eu scelerisque nascetur phasellus porta magna, sagittis, ac risus et dis integer etiam pellentesque, adipiscing pulvinar!   
    Dis, odio! Urna mus tristique, magnis placerat mid elit dignissim auctor et etiam, augue ut a aenean in, elit, porttitor, proin, dignissim, integer, ac porttitor!   
    Montes, dapibus scelerisque sit tortor odio, sit porttitor?  
   </div>  


As particularidades dos modelos de CSS para boxes são muito extensos e não seria possível abordar todos neste único post. Em um próximo, veremos isso com mais detalhes.


Até a próxima, fui!