SlideShare a Scribd company logo

Box Model

•Download as PPT, PDF•
•
S
Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

box model

Education
1 of 18
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]

Recommended

Teatro greco
Teatro grecoTeatro greco
Teatro greco
doncarletto
 
Web writing 2
Web writing 2Web writing 2
Web writing 2
icferrucci
 
Html base - classi prime - multimedia
Html base - classi prime - multimediaHtml base - classi prime - multimedia
Html base - classi prime - multimedia
Matteo Ziviani
 
Corso di HTML5 e CSS
Corso di HTML5 e CSSCorso di HTML5 e CSS
Corso di HTML5 e CSS
Salvatore Cordiano
 
Html
HtmlHtml
Html
Matteo Ceserani
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoria
Diego La Monica
 
Lezione 7
Lezione 7Lezione 7
Lezione 7
ralmandoz
 
Corso base di Tecnologie WEB - una visione d'insieme
Corso base di Tecnologie WEB - una visione d'insiemeCorso base di Tecnologie WEB - una visione d'insieme
Corso base di Tecnologie WEB - una visione d'insieme
Studiabo
 

Recommended

Teatro greco
Teatro grecoTeatro greco
Teatro greco
doncarletto
 
Web writing 2
Web writing 2Web writing 2
Web writing 2
icferrucci
 
Html base - classi prime - multimedia
Html base - classi prime - multimediaHtml base - classi prime - multimedia
Html base - classi prime - multimedia
Matteo Ziviani
 
Corso di HTML5 e CSS
Corso di HTML5 e CSSCorso di HTML5 e CSS
Corso di HTML5 e CSS
Salvatore Cordiano
 
Html
HtmlHtml
Html
Matteo Ceserani
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoria
Diego La Monica
 
Lezione 7
Lezione 7Lezione 7
Lezione 7
ralmandoz
 
Corso base di Tecnologie WEB - una visione d'insieme
Corso base di Tecnologie WEB - una visione d'insiemeCorso base di Tecnologie WEB - una visione d'insieme
Corso base di Tecnologie WEB - una visione d'insieme
Studiabo
 
Fordatascientist - Tecnologie Web base
Fordatascientist - Tecnologie Web baseFordatascientist - Tecnologie Web base
Fordatascientist - Tecnologie Web base
Annalisa Vignoli
 
Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner
Matteo Magni
 
Html e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesignerHtml e Css - 2 | WebMaster & WebDesigner
Html e Css - 2 | WebMaster & WebDesigner
Matteo Magni
 
La Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.orgLa Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.org
SkillsAndMore
 
DNM19 Sessione2 Orchard Temi e Layout (Ita)
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 cssIntroduzione ai css
Introduzione ai css
gianlucatroiani
 
4 dw parte2-modifiche
4 dw parte2-modifiche4 dw parte2-modifiche
4 dw parte2-modifiche
Lab Nova
 
CSS corso base (classi seconde, mod 1)
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
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Giuseppe Vizzari
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSS
Giuseppe Vizzari
 
Bootstrap
BootstrapBootstrap
Bootstrap
Commit University
 
Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Presentazione Corso - Parte 1
Presentazione Corso - Parte 1
Giorgio Carpoca
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesignerHTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
Matteo Magni
 
Architettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publishArchitettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publish
Alberto Mucignat
 
Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSS
Daniele Moraschi
 
Il moto circolare
Il moto circolareIl moto circolare
Il moto circolare
Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA
 
Interferenza dueonde
Interferenza dueondeInterferenza dueonde
Interferenza dueonde
Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA
 
Procedimentodisoluzione fisicaparticelle
Procedimentodisoluzione fisicaparticelleProcedimentodisoluzione fisicaparticelle
Procedimentodisoluzione fisicaparticelle
Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA
 
Proc solescercaparabolastaccasegmentosuassex
Proc solescercaparabolastaccasegmentosuassexProc solescercaparabolastaccasegmentosuassex
Proc solescercaparabolastaccasegmentosuassex
Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA
 
Lezionematematicadel250213
Lezionematematicadel250213Lezionematematicadel250213
Lezionematematicadel250213
Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA
 
Problema fisica compito in classe
Problema fisica compito in classeProblema fisica compito in classe
Problema fisica compito in classe
Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA
 
Esercizi sulla energia meccanica
Esercizi sulla energia meccanicaEsercizi sulla energia meccanica
Esercizi sulla energia meccanica
Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA
 

More Related Content

Similar to Box Model

La Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.orgLa Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.org
SkillsAndMore
 

Similar to Box Model (15)

Fordatascientist - Tecnologie Web base
Fordatascientist - Tecnologie Web baseFordatascientist - 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 & WebDesignerHtml 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.orgLa 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)
DNM19 Sessione2 Orchard Temi e Layout (Ita)
 
Introduzione ai css
Introduzione ai cssIntroduzione ai css
Introduzione ai css
 
4 dw parte2-modifiche
4 dw parte2-modifiche4 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)
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
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSS
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Presentazione Corso - Parte 1
Presentazione Corso - Parte 1
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesignerHTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
 
Architettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publishArchitettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publish
 
Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSS
 

More from Silvano Natalizi - ITIS ALESSANDRO VOLTA PERUGIA

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

Il moto circolare
Il moto circolareIl moto circolare
Il moto circolare
 
Interferenza dueonde
Interferenza dueondeInterferenza dueonde
Interferenza dueonde
 
Procedimentodisoluzione fisicaparticelle
Procedimentodisoluzione fisicaparticelleProcedimentodisoluzione fisicaparticelle
Procedimentodisoluzione fisicaparticelle
 
Proc solescercaparabolastaccasegmentosuassex
Proc solescercaparabolastaccasegmentosuassexProc solescercaparabolastaccasegmentosuassex
Proc solescercaparabolastaccasegmentosuassex
 
Lezionematematicadel250213
Lezionematematicadel250213Lezionematematicadel250213
Lezionematematicadel250213
 
Problema fisica compito in classe
Problema fisica compito in classeProblema fisica compito in classe
Problema fisica compito in classe
 
Esercizi sulla energia meccanica
Esercizi sulla energia meccanicaEsercizi sulla energia meccanica
Esercizi sulla energia meccanica
 
Problemi di trigonometria
Problemi di trigonometriaProblemi di trigonometria
Problemi di trigonometria
 
Energiaconservazione
EnergiaconservazioneEnergiaconservazione
Energiaconservazione
 
Lezione Blog Didattici 27 4 2010
Lezione Blog Didattici 27 4 2010Lezione Blog Didattici 27 4 2010
Lezione Blog Didattici 27 4 2010
 
Portale libreria online
Portale libreria onlinePortale libreria online
Portale libreria online
 
Lezione dappubblicaresulblogvale
Lezione dappubblicaresulblogvaleLezione dappubblicaresulblogvale
Lezione dappubblicaresulblogvale
 
Lezione android esercizi
Lezione android esercizi Lezione android esercizi
Lezione android esercizi
 
Lezione programmazione database con java Servlet - quarta parte
Lezione programmazione database con java Servlet - quarta parteLezione 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 esternaLezione 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 androidSesta lezione android
Sesta lezione android
 
Quinta lezione android
Quinta lezione androidQuinta lezione android
Quinta lezione android
 
Quarta lezioneandroid
Quarta lezioneandroidQuarta lezioneandroid
Quarta lezioneandroid
 
Lezione jsp pdatabase crud quintaparte
Lezione jsp pdatabase crud quintaparteLezione jsp pdatabase crud quintaparte
Lezione jsp pdatabase crud quintaparte
 
Lezione js pdatabasecrudterzaparte
Lezione js pdatabasecrudterzaparteLezione js pdatabasecrudterzaparte
Lezione js pdatabasecrudterzaparte
 

Recently uploaded

Adducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptxAdducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
sasaselvatico
 
presentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptxpresentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptx
michelacaporale12345
 
Presentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informaticaPresentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informatica
nico07fusco
 

Recently uploaded (20)

Adducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptxAdducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
 
Le forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docxLe forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docx
 
Storia-CarloMagno-TeccarelliLorenzo.pptx
Storia-CarloMagno-TeccarelliLorenzo.pptxStoria-CarloMagno-TeccarelliLorenzo.pptx
Storia-CarloMagno-TeccarelliLorenzo.pptx
 
Una breve introduzione ad Elsa Morante, vita e opere
Una breve introduzione ad Elsa Morante, vita e opereUna breve introduzione ad Elsa Morante, vita e opere
Una breve introduzione ad Elsa Morante, vita e opere
 
presentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptxpresentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptx
 
TeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptx
TeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptxTeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptx
TeccarelliLorenzo-PrimadiSteveJobselasuaconcorrenza.pptx
 
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptxPancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
 
a scuola di biblioVerifica: come utilizzare il test TRAAP
a scuola di biblioVerifica: come utilizzare il test TRAAPa scuola di biblioVerifica: come utilizzare il test TRAAP
a scuola di biblioVerifica: come utilizzare il test TRAAP
 
Pancia Asia_relazione laboratorio(forza d'attrito).docx
Pancia Asia_relazione laboratorio(forza d'attrito).docxPancia Asia_relazione laboratorio(forza d'attrito).docx
Pancia Asia_relazione laboratorio(forza d'attrito).docx
 
TeccarelliLorenzo-i4stilidellapitturaromana.docx
TeccarelliLorenzo-i4stilidellapitturaromana.docxTeccarelliLorenzo-i4stilidellapitturaromana.docx
TeccarelliLorenzo-i4stilidellapitturaromana.docx
 
magia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptxmagia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptx
 
Educazione civica-Asia Pancia powerpoint
Educazione civica-Asia Pancia powerpointEducazione civica-Asia Pancia powerpoint
Educazione civica-Asia Pancia powerpoint
 
CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...
CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...
CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...
 
Le forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docxLe forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docx
 
TeccarelliLorenzo-Mitodella.cavernaa.pdf
TeccarelliLorenzo-Mitodella.cavernaa.pdfTeccarelliLorenzo-Mitodella.cavernaa.pdf
TeccarelliLorenzo-Mitodella.cavernaa.pdf
 
Presentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informaticaPresentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informatica
 
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptxPancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
 
Piccole Personetestoitaliano-AuroraPalestini.docx
Piccole Personetestoitaliano-AuroraPalestini.docxPiccole Personetestoitaliano-AuroraPalestini.docx
Piccole Personetestoitaliano-AuroraPalestini.docx
 
Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024
Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024
Esame di Stato 2024 - Materiale conferenza online 09 aprile 2024
 
PalestiniAurora-la conoscenzatestoita.docx
PalestiniAurora-la conoscenzatestoita.docxPalestiniAurora-la conoscenzatestoita.docx
PalestiniAurora-la conoscenzatestoita.docx
 

Box Model