View
688
Download
2
Category
Preview:
Citation preview
CSS - Modelo de Caixa
Willian Massami Watanabewwatanabe@utfpr.edu.br
1
2
Sumário
• Modelo de caixa
• height e width
• border
• padding
• margin
3
4
height
5
width
6
Modelo de caixa
• height e width:
• definidos em px, em, ou %
• display: block apenas
7
border
8
Modelo de caixa• border
• border-left
• border-right
• border-top
• border-bottom
border: [width] [style] [color];
9
margin
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];
11
padding
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];
13
margin
14
Modelo de caixa
• overflow (overflow-x e overflow-y)
• visible
• hidden
• scroll
• auto
• inherit
15
Exercício
• Faça uma estrutura HTML, utilizando atributos de padding, margin, height, width, border; que seja apresentada da seguinte forma:
Recommended