Box Model

•Download as PPT, PDF•

0 likes•466 views

S

Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

box model

CSS BOX MODEL Il modello box css Lezione di gennaio 2009 Modulo HtmlCss

Immagine del Box model

Struttura del box model

Box model - terminologia

The Content Area ,[object Object],NOTE: The dashed line above illustrates the content area box. A browser would not draw an actual line!

Padding ,[object Object]

Border ,[object Object]

Margin ,[object Object]

Esempio di uso del Box Model

Stile del bordo del Box Model

Inline e block element ,[object Object],[object Object],[object Object],[object Object]

Esempio: menù di link

Menù di link con block stile

Stile al menù di link -1

Stile al menù di link -2

Stile al menù di link -3

Esempio con un immagine ,[object Object],Ciò significa che l’immagine si allineerà orizzontalmente con il testo del paragrafo

Creiamo una cornice attorno l’immagine ,[object Object],[object Object],[object Object]

More Related Content

Similar to Box Model

Fordatascientist - Tecnologie Web base

Fordatascientist - Tecnologie Web base

Fordatascientist - Tecnologie Web baseAnnalisa Vignoli

Html e Css - 2 | WebMaster & WebDesigner

Html e Css - 2 | WebMaster & WebDesigner

Html e Css - 2 | WebMaster & WebDesignerMatteo Magni

Html e Css - 2 | WebMaster & WebDesigner

Html e Css - 2 | WebMaster & WebDesigner

Html e Css - 2 | WebMaster & WebDesignerMatteo Magni

La Semantica del Web con HTML5 e Schema.org

La Semantica del Web con HTML5 e Schema.org

La Semantica del Web con HTML5 e Schema.orgSkillsAndMore

DNM19 Sessione2 Orchard Temi e Layout (Ita)

DNM19 Sessione2 Orchard Temi e Layout (Ita)

DNM19 Sessione2 Orchard Temi e Layout (Ita)Alessandro Giorgetti

Introduzione ai css

Introduzione ai css

Introduzione ai cssgianlucatroiani

4 dw parte2-modifiche

4 dw parte2-modifiche

4 dw parte2-modificheLab Nova

CSS corso base (classi seconde, mod 1)

CSS corso base (classi seconde, mod 1)

CSS corso base (classi seconde, mod 1)Matteo Ziviani

Breve introduzione alle tecnologie HTML5 + (DOM) + CSS

Breve introduzione alle tecnologie HTML5 + (DOM) + CSS

Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Giuseppe Vizzari

HTML (+ DOM) + CSS

HTML (+ DOM) + CSS

HTML (+ DOM) + CSSGiuseppe Vizzari

BootstrapCommit University

Presentazione Corso - Parte 1

Presentazione Corso - Parte 1

Presentazione Corso - Parte 1Giorgio Carpoca

HTML5 e Css3 - 1 | WebMaster & WebDesigner

HTML5 e Css3 - 1 | WebMaster & WebDesigner

HTML5 e Css3 - 1 | WebMaster & WebDesignerMatteo Magni

Architettura delle informazioni con eZ publish

Architettura delle informazioni con eZ publish

Architettura delle informazioni con eZ publishAlberto Mucignat

Fogli di stile CSS

Fogli di stile CSS

Fogli di stile CSSDaniele Moraschi

Similar to Box Model (15)

Fordatascientist - Tecnologie Web base

Fordatascientist - Tecnologie Web base

Fordatascientist - Tecnologie Web base

Html e Css - 2 | WebMaster & WebDesigner

Html e Css - 2 | WebMaster & WebDesigner

Html e Css - 2 | WebMaster & WebDesigner

Html e Css - 2 | WebMaster & WebDesigner

Html e Css - 2 | WebMaster & WebDesigner

Html e Css - 2 | WebMaster & WebDesigner

La Semantica del Web con HTML5 e Schema.org

La Semantica del Web con HTML5 e Schema.org

La Semantica del Web con HTML5 e Schema.org

DNM19 Sessione2 Orchard Temi e Layout (Ita)

DNM19 Sessione2 Orchard Temi e Layout (Ita)

DNM19 Sessione2 Orchard Temi e Layout (Ita)

Introduzione ai css

Introduzione ai css

Introduzione ai css

4 dw parte2-modifiche

4 dw parte2-modifiche

4 dw parte2-modifiche

CSS corso base (classi seconde, mod 1)

CSS corso base (classi seconde, mod 1)

CSS corso base (classi seconde, mod 1)

Breve introduzione alle tecnologie HTML5 + (DOM) + CSS

Breve introduzione alle tecnologie HTML5 + (DOM) + CSS

Breve introduzione alle tecnologie HTML5 + (DOM) + CSS

HTML (+ DOM) + CSS

HTML (+ DOM) + CSS

HTML (+ DOM) + CSS

Bootstrap

Presentazione Corso - Parte 1

Presentazione Corso - Parte 1

Presentazione Corso - Parte 1

HTML5 e Css3 - 1 | WebMaster & WebDesigner

HTML5 e Css3 - 1 | WebMaster & WebDesigner

HTML5 e Css3 - 1 | WebMaster & WebDesigner

Architettura delle informazioni con eZ publish

Architettura delle informazioni con eZ publish

Architettura delle informazioni con eZ publish

Fogli di stile CSS

Fogli di stile CSS

Fogli di stile CSS

More from Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Il moto circolare

Il moto circolare

Il moto circolareSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Interferenza dueonde

Interferenza dueonde

Interferenza dueondeSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Procedimentodisoluzione fisicaparticelle

Procedimentodisoluzione fisicaparticelle

Procedimentodisoluzione fisicaparticelleSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Proc solescercaparabolastaccasegmentosuassex

Proc solescercaparabolastaccasegmentosuassex

Proc solescercaparabolastaccasegmentosuassexSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Lezionematematicadel250213

Lezionematematicadel250213

Lezionematematicadel250213Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Problema fisica compito in classe

Problema fisica compito in classe

Problema fisica compito in classeSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Esercizi sulla energia meccanica

Esercizi sulla energia meccanica

Esercizi sulla energia meccanicaSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Problemi di trigonometria

Problemi di trigonometria

Problemi di trigonometriaSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Energiaconservazione

Energiaconservazione

EnergiaconservazioneSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Lezione Blog Didattici 27 4 2010

Lezione Blog Didattici 27 4 2010

Lezione Blog Didattici 27 4 2010Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Portale libreria online

Portale libreria online

Portale libreria onlineSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Lezione dappubblicaresulblogvale

Lezione dappubblicaresulblogvale

Lezione dappubblicaresulblogvaleSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Lezione android esercizi

Lezione android esercizi

Lezione android esercizi Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Lezione programmazione database con java Servlet - quarta parte

Lezione programmazione database con java Servlet - quarta parte

Lezione programmazione database con java Servlet - quarta parteSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Lezione jsp su come gestire una tabella relazionale con chiave esterna

Lezione jsp su come gestire una tabella relazionale con chiave esterna

Lezione jsp su come gestire una tabella relazionale con chiave esternaSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Sesta lezione android

Sesta lezione android

Sesta lezione androidSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Quinta lezione android

Quinta lezione android

Quinta lezione androidSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Quarta lezioneandroid

Quarta lezioneandroid

Quarta lezioneandroidSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Lezione jsp pdatabase crud quintaparte

Lezione jsp pdatabase crud quintaparte

Lezione jsp pdatabase crud quintaparteSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

Lezione js pdatabasecrudterzaparte

Lezione js pdatabasecrudterzaparte

Lezione js pdatabasecrudterzaparteSilvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

More from Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA (20)

Il moto circolare

Il moto circolare

Il moto circolare

Interferenza dueonde

Interferenza dueonde

Interferenza dueonde

Procedimentodisoluzione fisicaparticelle

Procedimentodisoluzione fisicaparticelle

Procedimentodisoluzione fisicaparticelle

Proc solescercaparabolastaccasegmentosuassex

Proc solescercaparabolastaccasegmentosuassex

Proc solescercaparabolastaccasegmentosuassex

Lezionematematicadel250213

Lezionematematicadel250213

Lezionematematicadel250213

Problema fisica compito in classe

Problema fisica compito in classe

Problema fisica compito in classe

Esercizi sulla energia meccanica

Esercizi sulla energia meccanica

Esercizi sulla energia meccanica

Problemi di trigonometria

Problemi di trigonometria

Problemi di trigonometria

Energiaconservazione

Energiaconservazione

Energiaconservazione

Lezione Blog Didattici 27 4 2010

Lezione Blog Didattici 27 4 2010

Lezione Blog Didattici 27 4 2010

Portale libreria online

Portale libreria online

Portale libreria online

Lezione dappubblicaresulblogvale

Lezione dappubblicaresulblogvale

Lezione dappubblicaresulblogvale

Lezione android esercizi

Lezione android esercizi

Lezione android esercizi

Lezione programmazione database con java Servlet - quarta parte

Lezione programmazione database con java Servlet - quarta parte

Lezione programmazione database con java Servlet - quarta parte

Lezione jsp su come gestire una tabella relazionale con chiave esterna

Lezione jsp su come gestire una tabella relazionale con chiave esterna

Lezione jsp su come gestire una tabella relazionale con chiave esterna

Sesta lezione android

Sesta lezione android

Sesta lezione android

Quinta lezione android

Quinta lezione android

Quinta lezione android

Quarta lezioneandroid

Quarta lezioneandroid

Quarta lezioneandroid

Lezione jsp pdatabase crud quintaparte

Lezione jsp pdatabase crud quintaparte

Lezione jsp pdatabase crud quintaparte

Lezione js pdatabasecrudterzaparte

Lezione js pdatabasecrudterzaparte

Lezione js pdatabasecrudterzaparte

Recently uploaded

Confronto tra Sparta e Atene classiche.ppt

Confronto tra Sparta e Atene classiche.ppt

Confronto tra Sparta e Atene classiche.pptcarlottagalassi

Aristotele, vita e opere e fisica...pptx

Aristotele, vita e opere e fisica...pptx

Aristotele, vita e opere e fisica...pptxtecongo2007

case passive_GiorgiaDeAscaniis.pptx.....

case passive_GiorgiaDeAscaniis.pptx.....

case passive_GiorgiaDeAscaniis.pptx.....giorgiadeascaniis59

Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx

Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx

Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxlorenzodemidio01

descrizioni della antica civiltà dei sumeri.pptx

descrizioni della antica civiltà dei sumeri.pptx

descrizioni della antica civiltà dei sumeri.pptxtecongo2007

Lorenzo D'Emidio_Francesco Petrarca.pptx

Lorenzo D'Emidio_Francesco Petrarca.pptx

Lorenzo D'Emidio_Francesco Petrarca.pptxlorenzodemidio01

Presentazioni Efficaci e lezioni di Educazione Civica

Presentazioni Efficaci e lezioni di Educazione Civica

Presentazioni Efficaci e lezioni di Educazione CivicaSalvatore Cianciabella

Lorenzo D'Emidio_Vita e opere di Aristotele.pptx

Lorenzo D'Emidio_Vita e opere di Aristotele.pptx

Lorenzo D'Emidio_Vita e opere di Aristotele.pptxlorenzodemidio01

Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptx

Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptx

Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptxlorenzodemidio01

Scienza Potere Puntoaaaaaaaaaaaaaaa.pptx

Scienza Potere Puntoaaaaaaaaaaaaaaa.pptx

Scienza Potere Puntoaaaaaaaaaaaaaaa.pptxlorenzodemidio01

discorso generale sulla fisica e le discipline.pptx

discorso generale sulla fisica e le discipline.pptx

discorso generale sulla fisica e le discipline.pptxtecongo2007

LE ALGHE.pptx ..........................

LE ALGHE.pptx ..........................

LE ALGHE.pptx ..........................giorgiadeascaniis59

Descrizione Piccolo teorema di Talete.pptx

Descrizione Piccolo teorema di Talete.pptx

Descrizione Piccolo teorema di Talete.pptxtecongo2007

Tosone Christian_Steve Jobsaaaaaaaa.pptx

Tosone Christian_Steve Jobsaaaaaaaa.pptx

Tosone Christian_Steve Jobsaaaaaaaa.pptxlorenzodemidio01

Quadrilateri e isometrie studente di liceo

Quadrilateri e isometrie studente di liceo

Quadrilateri e isometrie studente di liceoyanmeng831

Vuoi girare il mondo? educazione civica.

Vuoi girare il mondo? educazione civica.

Vuoi girare il mondo? educazione civica.camillaorlando17

Oppressi_oppressori.pptx................

Oppressi_oppressori.pptx................

Oppressi_oppressori.pptx................giorgiadeascaniis59

Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx

Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx

Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxlorenzodemidio01

Scrittura seo e scrittura accessibile

Scrittura seo e scrittura accessibile

Scrittura seo e scrittura accessibileNicola Rabbi

Recently uploaded (19)

Confronto tra Sparta e Atene classiche.ppt

Confronto tra Sparta e Atene classiche.ppt

Confronto tra Sparta e Atene classiche.ppt

Aristotele, vita e opere e fisica...pptx

Aristotele, vita e opere e fisica...pptx

Aristotele, vita e opere e fisica...pptx

case passive_GiorgiaDeAscaniis.pptx.....

case passive_GiorgiaDeAscaniis.pptx.....

case passive_GiorgiaDeAscaniis.pptx.....

Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx

Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx

Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx

descrizioni della antica civiltà dei sumeri.pptx

descrizioni della antica civiltà dei sumeri.pptx

descrizioni della antica civiltà dei sumeri.pptx

Lorenzo D'Emidio_Francesco Petrarca.pptx

Lorenzo D'Emidio_Francesco Petrarca.pptx

Lorenzo D'Emidio_Francesco Petrarca.pptx

Presentazioni Efficaci e lezioni di Educazione Civica

Presentazioni Efficaci e lezioni di Educazione Civica

Presentazioni Efficaci e lezioni di Educazione Civica

Lorenzo D'Emidio_Vita e opere di Aristotele.pptx

Lorenzo D'Emidio_Vita e opere di Aristotele.pptx

Lorenzo D'Emidio_Vita e opere di Aristotele.pptx

Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptx

Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptx

Nicola pisano aaaaaaaaaaaaaaaaaa(1).pptx

Scienza Potere Puntoaaaaaaaaaaaaaaa.pptx

Scienza Potere Puntoaaaaaaaaaaaaaaa.pptx

Scienza Potere Puntoaaaaaaaaaaaaaaa.pptx

discorso generale sulla fisica e le discipline.pptx

discorso generale sulla fisica e le discipline.pptx

discorso generale sulla fisica e le discipline.pptx

LE ALGHE.pptx ..........................

LE ALGHE.pptx ..........................

LE ALGHE.pptx ..........................

Descrizione Piccolo teorema di Talete.pptx

Descrizione Piccolo teorema di Talete.pptx

Descrizione Piccolo teorema di Talete.pptx

Tosone Christian_Steve Jobsaaaaaaaa.pptx

Tosone Christian_Steve Jobsaaaaaaaa.pptx

Tosone Christian_Steve Jobsaaaaaaaa.pptx

Quadrilateri e isometrie studente di liceo

Quadrilateri e isometrie studente di liceo

Quadrilateri e isometrie studente di liceo

Vuoi girare il mondo? educazione civica.

Vuoi girare il mondo? educazione civica.

Vuoi girare il mondo? educazione civica.

Oppressi_oppressori.pptx................

Oppressi_oppressori.pptx................

Oppressi_oppressori.pptx................

Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx

Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx

Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx

Scrittura seo e scrittura accessibile

Scrittura seo e scrittura accessibile

Scrittura seo e scrittura accessibile

Box Model

1. CSS BOX MODEL Il modello box css Lezione di gennaio 2009 Modulo HtmlCss

2. Immagine del Box model

3. Struttura del box model

4. Box model - terminologia

5.

6.

7.

8.

9. Esempio di uso del Box Model

10. Stile del bordo del Box Model

11.

12. Esempio: menù di link

13. Menù di link con block stile

14. Stile al menù di link -1

15. Stile al menù di link -2

16. Stile al menù di link -3

17.

18.