1. Modelo de Caixa CSS (CSS Box Model)
Anotações referente a aula 16.
O modelo de caixa é a base do layout na web. Todo elemento HTML é uma caixa composta por: conteúdo, padding, border, e margin. Importante para controlar espaçamento, alinhamento e dimensionamento de elementos.
2. Caixas Aninhadas
Caixas podem ser colocadas dentro de outras, criando hierarquias. Isso define relações entre elementos pais e filhos,
afetando layout (ex.: um <div> contendo vários <div> filhos).
3. Anatomia da Caixa CSS
(a) Padding
Espaço interno entre o conteúdo e a borda. Controlado por padding-top, padding-right, etc.
(b) Margin
Espaço externo além da borda. Separa elementos. Controlado por margin-top, margin-right, etc.
(c) Height & (d) Width
Definem altura e largura do conteúdo. Valores como px, %, ou auto.
(e) Border
Linha ao redor do padding e conteúdo. Propriedades: border-width, border-style, border-color.
(f) Outline
Semelhante à borda, mas não ocupa espaço no layout (não afeta o modelo de caixa).
4. Tipos de Caixas CSS
(a) Block-level
Ocupam toda a largura do container (ex.: <div>, <h1>).
(b) Inline-level
Ocupam apenas espaço necessário (ex.: <span>, <a>).
(c) Inline-block
Mistura: ocupa espaço necessário, mas permite definir width/height (ex.: display: inline-block).
5. Centralização com margin: auto
Funciona para caixas block-level com width definido. Exemplo:
width: 300px;
margin: auto;
background-color: burlywood;
6. Shorthand Properties
(a) Border
border: 2px solid #000; (ordem: width, style, color).
(b) Padding
padding: 10px 5px 15px 5px; (sentido horário: top, right, bottom, left).
(c) Margin
margin: 20px 10px; (vertical horizontal).
(d) Outline
outline: 1px dashed red; (similar à border, mas sem afetar layout).