You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/09-size-and-scroll/article.md
+18-18Lines changed: 18 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -38,7 +38,7 @@ Senza la barra di scorrimento, pertanto, l'area del contenuto sarebbe `300px`, m
38
38
```
39
39
40
40
```smart header="L'area del `padding-bottom` può essere riempita dal testo"
41
-
Di solito gli spazi definiti dai padding sono rappresentati vuoti nelle immagini, ma se c'è molto testo nell'elemento ed eccede l'area del contenuto, in quel caso è normale che il browser mostri il testo eccedente nel `padding-bottom`.
41
+
Di solito gli spazi definiti dai padding sono rappresentati vuoti nelle immagini, ma se nell'elemento c'è molto testo ed eccede l'area del contenuto, in quel caso è normale che il browser mostri il testo eccedente nel `padding-bottom`.
42
42
```
43
43
44
44
## Proprietà geometriche
@@ -47,13 +47,13 @@ Ecco un'immagine riassuntiva delle proprietà geometriche:
47
47
48
48
49
49
50
-
I valori di tali proprietà sono tecnicamente numerici, ma questi numeri indicano i pixel, quindi si tratta delle dimensioni in pixel.
50
+
I valori di tali proprietà sono tecnicamente numerici, ma questi numeri sottintendono l'unità di misura pixel, stiamo parlando quindi delle dimensioni espresse in pixel.
51
51
52
52
Cominciamo ad esplorare le proprietà partendo dall'esterno dell'elemento.
53
53
54
54
## offsetParent, offsetLeft/Top
55
55
56
-
Queste proprietà sono raramente necessarie, ma sono comunque le proprietà geometriche "più esterne" e quindi cominceremo da esse.
56
+
Queste proprietà sono raramente necessarie, ma sono comunque le proprietà geometriche "più esterne" e pertanto cominceremo da esse.
57
57
58
58
La proprietà `offsetParent` contiene un riferimento all'antenato più vicino, usato dal browser per il calcolo delle coordinate durante il rendering.
59
59
@@ -84,7 +84,7 @@ Nell'esempio di seguito il `<div>` interno ha `<main>` come `offsetParent` e `of
84
84
85
85
Ci sono alcune circostanze in cui `offsetParent` è `null`:
86
86
87
-
1. Per gli elementi nascosti (`display:none`o non nel documento).
87
+
1. Per gli elementi nascosti (`display:none`oppure non inserito nel documento).
88
88
2. Per `<body>` e `<html>`.
89
89
3. Per gli elementi con `position:fixed`.
90
90
@@ -98,8 +98,8 @@ Queste due proprietà sono le più semplici. Forniscono la larghezza e l'altezza
98
98
99
99
In riferimento al nostro esempio:
100
100
101
-
-`offsetWidth = 390` la larghezza esterna, risultante dalla larghezza interna (la proprietà CSS `width` pari a `300px`) più i padding (`2 * 20px`) ed i bordi (`2 * 25px`).
102
-
-`offsetHeight = 290` l'altezza esterna.
101
+
-`offsetWidth = 390`-- la larghezza esterna, risultante dalla larghezza interna (la proprietà CSS `width` pari a `300px`) più i padding (`2 * 20px`) ed i bordi (`2 * 25px`).
102
+
-`offsetHeight = 290`-- l'altezza esterna.
103
103
104
104
````smart header="Le proprietà geometriche valgono zero/null per gli elementi nascosti"
105
105
Le proprietà geometriche sono calcolate solo per gli elementi visibili.
@@ -116,37 +116,37 @@ function isHidden(elem) {
116
116
}
117
117
```
118
118
119
-
Si noti che tale metodo `isHidden` restituisce `true` anche per gli elementi che sono sullo schermo, ma hanno dimensioni pari a zero (come un `<div>` vuoto).
119
+
Si noti che questa funzione `isHidden` restituisce `true` anche per gli elementi che sono presenti sullo schermo, ma hanno dimensioni pari a zero (come un `<div>` vuoto).
120
120
````
121
121
122
122
## clientTop/Left
123
123
124
-
Inside the element we have the borders.
124
+
Dentro l'elemento abbiamo i bordi.
125
125
126
-
To measure them, there are properties `clientTop`and`clientLeft`.
126
+
Per misurarli abbiamo a disposizione le proprietà `clientTop`e`clientLeft`.
127
127
128
-
In our example:
128
+
Nel nostro esempio:
129
129
130
-
-`clientLeft = 25` -- left border width
131
-
-`clientTop = 25` -- top border width
130
+
-`clientLeft = 25` -- larghezza bordo sinistro
131
+
-`clientTop = 25` -- larghezza bordo superiore
132
132
133
133
134
134
135
-
...But to be precise -- these properties are not border width/height, but rather relative coordinates of the inner side from the outer side.
135
+
...ma per essere precisi -- queste proprietà non indicano la dimensione del bordo, piuttosto le coordinate relative del lato interno rispetto al lato esterno.
136
136
137
-
What's the difference?
137
+
Qual è la differenza?
138
138
139
-
It becomes visible when the document is right-to-left (the operating system is in Arabic or Hebrew languages). The scrollbar is then not on the right, but on the left, and then`clientLeft`also includes the scrollbar width.
139
+
La differenza è percepibile quando il testo del documento è da destra verso sinistra (il sistema operativo è in lingua araba o ebraica). In quel caso la barra di scorrimento non è a destra, ma a sinistra, e quindi`clientLeft`include anche la larghezza della barra.
140
140
141
-
In that case,`clientLeft`would be not `25`, but with the scrollbar width`25 + 16 = 41`.
141
+
In questa ipotesi`clientLeft`non sarebbe `25`, ma, considerata la larghezza della barra di scorrimento, sarebbe`25 + 16 = 41`.
142
142
143
-
Here's the example in hebrew:
143
+
A seguire l'esempio in ebraico:
144
144
145
145
146
146
147
147
## clientWidth/Height
148
148
149
-
These properties provide the size of the area inside the element borders.
149
+
Queste proprietà forniscono la dimensione dell'area dentro i bordi dell'elemento.
150
150
151
151
They include the content width together with paddings, but without the scrollbar:
0 commit comments