Box Model

982
-1

Published on

box model

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
982
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Box Model

  1. 1. CSS BOX MODEL Il modello box css Lezione di gennaio 2009 Modulo HtmlCss
  2. 2. Immagine del Box model
  3. 3. Struttura del box model
  4. 4. Box model - terminologia
  5. 5. The Content Area <ul><li>The content area includes text or images and the box the browser traces around that content (which is just big enough to fit the content). </li></ul>NOTE: The dashed line above illustrates the content area box. A browser would not draw an actual line!
  6. 6. Padding <ul><li>Around the content area box, we can have optional padding. Padding is transparent and we can use it to create &quot;visual whitespace&quot; between the content area and the border. </li></ul>
  7. 7. Border <ul><li>An element's border surrounds the padding. It is a line around the content and provides a &quot;visual separation between&quot; elements. </li></ul>
  8. 8. Margin <ul><li>A margin gives space between an element and other elements in a web page. Like the padding, a margin is transparent. </li></ul>
  9. 9. Esempio di uso del Box Model
  10. 10. Stile del bordo del Box Model
  11. 11. Inline e block element <ul><li>Ad ogni elemento è assegnata la proprietà inline o block </li></ul><ul><li>Gli elementi inline si allineano orizzontalmente </li></ul><ul><li>Gli elementi block si dispongono l’uno sotto l’altro </li></ul><ul><li>Ad esempio, i paragrafi sono elementi block, mentre le singole parole sono inline perché si dispongono orizzontalmente in una riga </li></ul>
  12. 12. Esempio: menù di link
  13. 13. Menù di link con block stile
  14. 14. Stile al menù di link -1
  15. 15. Stile al menù di link -2
  16. 16. Stile al menù di link -3
  17. 17. Esempio con un immagine <ul><li>Supponiamo di avere il seguente codice html con un elemento paragrafo ed un immagine al suo interno che per default è inline </li></ul>Ciò significa che l’immagine si allineerà orizzontalmente con il testo del paragrafo
  18. 18. Creiamo una cornice attorno l’immagine <ul><li><p> This is a picture of Hexxa: </li></ul><ul><li><img src=&quot;images/Hexxa.jpeg&quot; alt=&quot;Hexxa&quot; />I took this picture at the fair. </li></ul><ul><li></p> </li></ul>

×