-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbox-model.html
136 lines (130 loc) · 8.32 KB
/
box-model.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<meta name="charset" content="UTF-8">
<meta name="author" content="Raffy U.">
<meta name="description" content="sito generico">
<meta name="keywords" content="html, css, sass">
<title> Guida Html e Css Javascript - Box Model</title>
<link rel="apple-touch-icon" sizes="180x180" href="Frame1.svg">
<link rel="icon" type="image/png" sizes="32x32" href="Frame1.svg">
<link rel="icon" type="image/png" sizes="16x16" href="Frame1.svg">
<link rel="manifest" href="dispensa 3/site.webmanifest">
<link rel="mask-icon" href="Frame1.svg" color="#5bbad5">
<link rel="shortcut icon" href="Frame1.svg">
<meta name="msapplication-TileColor" content="#0100ff">
<meta name="msapplication-TileImage" content="frame1.svg">
<meta name="msapplication-config" content="dispensa 3/browserconfig.xml">
<meta name="theme-color" content="#3630af">
<link rel="stylesheet" href="style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>
</head>
<body>
<header>
<h1>Guida HTML, CSS e Javascript,<br> Introduzione allo studio dei linguaggi.</h1>
<nav>
<ul>
<li> <a href="index.html" title="Homepage della guida HTML,CSS e Javascript"> Home</a></li>
<li> <a href="testi.html" title="i testi nel sito web"> Testi</a></li>
<li><a href="immagini.html" title="immagini del sito"> immagini</a></li>
<li><a href="link.html" title="link per i siti"> Link</a></li>
<li><a href="Iframes.html" title="iframe per i siti">Iframe</a></li>
<li><a href="Foglidistile.html" title="Fogli di stile">Fogli di stile</a></li>
<li><a href="box-model.html" title="Box Model" id="linkAttivo">Box Model</a></li>
<li><a href="block-inline.html" title="Block-inline">Block-inline</a></li>
<li><a href="position.html" title="Position" >Position</a></li>
<li><a href="floating.html" title="Floating">Floating</a></li>
<li><a href="flexbox.html" title="Flexbox">Flexbox</a></li>
<li><a href="transform-transition.html" title="Transform e Transition">Transform - Transition</a></li>
<li><a href="form.html" title="Form">Form</a></li>
<li><a href="dispensa-gol03/index.html" title="Dispensa">Dispensa Gol</a></li>
<li><a href="Esercizio-laylout.html" title="Layout">Esercizio Layout</a></li>
<li><a href="Boot-Strap lezioni/index.html" title="Boot-Strap">Bootstrap Accademy</a></li>
<li><a href="travel-company/index.html" title="Esercizio-figma">Travel Company (Progetto)</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Il box model</h2>
<p>Il box model ` il modello il riferimento utilizzato del browser per determinare la spezialit`
di un elemento, in quanto le dimensioni dell'elemento ed il suo scostamento rispetto agli altri elementi che lo seguono, precedono o affiancano.</p>
<img src="img/box-model.png" alt="immagine del box model">
<h3>Width</h3>
<p>Larghezza di un elemento, occupata dai contenuti e all'interno della quale se settato ` visibile il background.</p>
<h3>Height</h3>
<p>Altezza di un elemento, occupata dai contenuti e all'interno della quale se settato ` visibile il background.</p>
<pre>#box1 {width:500px; height:500px; background-color:blue;}</pre>
<h3>Padding</h3>
<p>Spaziatura che va dall'area del contenuto al bordo di un elemento,nella quale se settaro ` visibile il background. Il
padding può essere determinato sui quattro lati tramite:
</p>
<ul>
<li>padding-top</li>
<li>padding-right</li>
<li>padding-bottom</li>
<li>padding-left</li>
</ul>
<p>Oppure tramite la forma abbreviata con la sola parola padding:</p>
<pre style="margin-left: -100px;">
padding:10px; è uguale a ----> padding-top:10px; padding-right:10px, padding-bottom:10px; padding-left:10px;
padding:10px 20px; è uguale a ---> padding:top, bottom, right, left;
padding: 10px 5px 7px 10px; è uguale a ----> padding:top, right, bottom,left;
padding 10px 5px 9px; è uguale a ---> padding:top,right,bottom,left;
</pre>
<h3>Boder</h3>
<p>Bordo che circonda l'elemento, più essere definito su 4 lati diversi, per ogni lato più essere specificato in questo modo:</p>
<pre style="margin-left: -139px;">
border-top-width:1px; spessore del bordo
border-top-style:solid; stile del bordo (es.: solid,dashed,dotted...)
boder-top-color: red; colore del bordo (espresso tramite valore testuale, rgba o hex)
</pre>
<p>Forma abbreviata per il singolo lato</p>
<pre style="margin-left: -130px;">
boder-top:1px solid red;
</pre>
<p>Forma abbreviata per 4 lati</p>
<pre style="margin-left: -130px;">
boder:1px solid red;
</pre>
<h3>Margin</h3>
<p> Spazio trasparente esterno all'elemento, che indica lo scostamento di esso dagli altri elementi che lo seguono,precedono o affiancano. Non è visibile nessun background all'interno del margin. il margin più essere impostato sui quattro lati attraverso:</p>
<ul>
<li>margin-top</li>
<li>margin-right</li>
<li>margin-bottom</li>
<li>margin-left</li>
</ul>
<p>oppure tramite la modalità abbreviata:</p>
<pre style="margin-left: -130px;">
margin:10px ----> margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;
margin:10px 20px; ----> margin-top:10px; margin-bottom:10px; margin-left:20px; margin-right:20px;
margin:10px 5px 12px 21px; ----> margin-top:10px; margin-right:5px; margin-bottom:12px; margin-left:21px;
margin:10px 5px 6px; -----> margin-top:10px; margin-right:5px; margin-bottom:6px; margin-left:5px;
</pre>
<h4>margin: 0 auto</h4>
<p>Indica margin-top e margin-bottom 0px e margin-left e margin-right auto, dove auto serve per centrare un elemento che ha la
proprità width dichiarata e impostata su un valore.
</p>
<h3> La proprità del Box-sizing</h3>
<p>Ovvero la proprietà che determina come vengono calcolate la larghezza / altezza effettiva di ingombro all'interno del viewport, degli elementi</p>
<h4>box-sizing:content-box;</h4>
<p>è il valore di default, significa che <strong>Width/height</strong> determinano la larghezza/altezza destinata ai contenuti, <strong>alla quale si aggiungerano padding e border</strong> per determinare la larghezza/altezza definitiva dell'elemento su viewport.</p>
<h5>La larghezza/altezza dell'elemento sul viewport data da:</h5>
<p>width + paddin(left/height) + boder(left/height)</p>
<p>height + padding (top+bottom) + boder(top/bottom)</p>
<h4>box-sizing:border-box;</h4>
<p>Semplica notevolmente i calcoli width la larghezza totale ed height, l'altezza totale, alla quale vengono <stron>sottratti border e padding</stron> Quel che resta è lo spazio dedicato ai contenuti</p>
<h5>la larghezza/altezza dell'elemento sul viewport data da:</h5>
<p>width - padding (left/right) - border(left/right)</p>
<p>height - padding (top/bottom) - border (top/bottom)</p>
<h6>Vedi esercizio <a href="es_boxmodel.html">es_boxmodel</a></h6>
</section>
</main>
<footer><!-- inizio piedipagina-->
<p> © Copyright by Raffaele Coppola</p>
</footer>
</body>
</html>