Commit 43cc9e9 1 parent 9de78ce commit 43cc9e9 Copy full SHA for 43cc9e9
File tree 5 files changed +54
-55
lines changed
01-layout/01-css-fundamentals
5 files changed +54
-55
lines changed Original file line number Diff line number Diff line change 95
95
font-size: 40px;
96
96
}
97
97
```
98
-
99
- # Modelo de CAJA
100
-
101
- Para ver el modelo de caja al ccompleto vamos a realizar los siguientes cambios:
102
-
103
- ``` diff
104
- body {
105
- border: solid red;
106
- font-family: "Raleway", sans-serif;
107
- }
108
- div {
109
- margin:40px;
110
- font-size: 40px;
111
- - border: inherit;
112
- + border: 5px solid red;
113
- + padding: 20px;
114
- }
115
- ```
116
-
117
- Pero si ponemos un width de 300, ¿Cuanto será el tamaño del elemento?
118
-
119
- ``` diff
120
- body {
121
- border: solid red;
122
- font-family: "Raleway", sans-serif;
123
- }
124
- div {
125
- margin:40px;
126
- font-size: 40px;
127
- border: inherit;
128
- border: 5px solid red;
129
- padding: 20px;
130
- + width: 300px;
131
- }
132
- ```
133
-
134
- Son 350px (la suma de 300 + 2 * padding + 2 * borde). ¿Como podemos evitar esto? cambiando la propiedad _ box-sizing_
135
-
136
- ``` diff
137
- body {
138
- border: solid red;
139
- font-family: "Raleway", sans-serif;
140
- }
141
- div {
142
- margin:40px;
143
- font-size: 40px;
144
- border: inherit;
145
- border: 5px solid red;
146
- padding: 20px;
147
- width: 300px;
148
- + box-sizing: border-box;
149
- }
150
- ```
151
-
152
- Por defecto es content-box. Hay librerias que hacen esto por nosotros.
Original file line number Diff line number Diff line change
1
+ # Box model
2
+
3
+ Para ver el modelo de caja al ccompleto vamos a realizar los siguientes cambios:
4
+
5
+ ``` diff
6
+ body {
7
+ border: solid red;
8
+ font-family: "Raleway", sans-serif;
9
+ }
10
+ div {
11
+ margin:40px;
12
+ font-size: 40px;
13
+ - border: inherit;
14
+ + border: 5px solid red;
15
+ + padding: 20px;
16
+ }
17
+ ```
18
+
19
+ Pero si ponemos un width de 300, ¿Cuanto será el tamaño del elemento?
20
+
21
+ ``` diff
22
+ body {
23
+ border: solid red;
24
+ font-family: "Raleway", sans-serif;
25
+ }
26
+ div {
27
+ margin:40px;
28
+ font-size: 40px;
29
+ border: inherit;
30
+ border: 5px solid red;
31
+ padding: 20px;
32
+ + width: 300px;
33
+ }
34
+ ```
35
+
36
+ Son 350px (la suma de 300 + 2 * padding + 2 * borde). ¿Como podemos evitar esto? cambiando la propiedad _ box-sizing_
37
+
38
+ ``` diff
39
+ body {
40
+ border: solid red;
41
+ font-family: "Raleway", sans-serif;
42
+ }
43
+ div {
44
+ margin:40px;
45
+ font-size: 40px;
46
+ border: inherit;
47
+ border: 5px solid red;
48
+ padding: 20px;
49
+ width: 300px;
50
+ + box-sizing: border-box;
51
+ }
52
+ ```
53
+
54
+ Por defecto es content-box. Hay librerias que hacen esto por nosotros.
File renamed without changes.
File renamed without changes.
File renamed without changes.
You can’t perform that action at this time.
0 commit comments