CSS - Modelo de Caixa
-
Upload
willian-watanabe -
Category
Documents
-
view
688 -
download
2
Transcript of CSS - Modelo de Caixa
![Page 2: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/2.jpg)
2
Sumário
• Modelo de caixa
• height e width
• border
• padding
• margin
![Page 3: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/3.jpg)
3
![Page 4: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/4.jpg)
4
height
![Page 5: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/5.jpg)
5
width
![Page 6: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/6.jpg)
6
Modelo de caixa
• height e width:
• definidos em px, em, ou %
• display: block apenas
![Page 7: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/7.jpg)
7
border
![Page 8: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/8.jpg)
8
Modelo de caixa• border
• border-left
• border-right
• border-top
• border-bottom
border: [width] [style] [color];
![Page 9: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/9.jpg)
9
margin
![Page 10: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/10.jpg)
10
Modelo de caixa
• margin (margin-left, margin-right, margin-top, margin-bottom)
• definida em px, em e %
margin: [top] [left] [bottom] [right];
margin: [top] [left-right] [bottom];
margin: [top-bottom] [left-right];
margin: [top-bottom-left-right];
![Page 11: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/11.jpg)
11
padding
![Page 12: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/12.jpg)
12
Modelo de caixa
• padding (padding-left, padding-right, padding-top, padding-bottom)
• definida em px, em e %
padding: [top] [left] [bottom] [right];
padding: [top] [left-right] [bottom];
padding: [top-bottom] [left-right];
padding: [top-bottom-left-right];
![Page 13: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/13.jpg)
13
margin
![Page 14: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/14.jpg)
14
Modelo de caixa
• overflow (overflow-x e overflow-y)
• visible
• hidden
• scroll
• auto
• inherit
![Page 15: CSS - Modelo de Caixa](https://reader033.fdocumentos.tips/reader033/viewer/2022052622/5596ef111a28ab2a778b464e/html5/thumbnails/15.jpg)
15
Exercício
• Faça uma estrutura HTML, utilizando atributos de padding, margin, height, width, border; que seja apresentada da seguinte forma: