Aula 17

Aula 17
26/05/2017
max-width, position, overflow, inline-block
Definindo a largura de uma caixa
• Definir a largura de uma caixa com display: block (por exemplo <div>)
previne que a caixa ocupe toda a largura disponível
Definindo a largura de uma caixa
400 px
margin: auto
O problema
• Veja o que acontece quando você diminui o tamanho da tela
A caixa continua
com 400px de
largura
max-width
A caixa se
adapta à
largura
Veja exemplo
position
• Tipo de posicionamento para um elemento HTML
• static
• relative
• fixed
• absolute
• Usado em conjunto com as propriedades
• top
• bottom
• left
• right
position: static;
• Valor padrão para todos elementos HTML
• O elemento é posicionado conforme o fluxo normal da página
position: relative;
• Ajusta a posição do elemento em relação à posição normal dele,
usando as propriedades top, right, bottom, and left
30px
position: fixed;
• Posicionado relativamente ao "viewport", isso significa que ele
sempre ficará no mesmo lugar mesmo que haja rolagem na página.
position: absolute;
• Este valor se comporta como o fixed, porém tendo como referência a
posição do elemento mais próximo de onde está contido, ao invés do
viewport.
• Se um elemento position: absolute não possuir elementos
ancestrais posicionados relativamente, ele utilizará o <body> como
referência.
Sobrepondo elementos
• A propriedade z-index especifica a ordem de um elemento na pilha.
Qual elemento deve ficar na frente de outros)
• O elemento com maior z-index fica na frente
overflow
• Conteúdo que extrapola a caixa
• Valores da propriedade overflow
• visible – Padrão. Ultrapassa os limites da caixa.
• hidden – O conteúdo que extrapola é cortado, e o restante fica invisível
• scroll – O conteúdo que extrapola é cortado, mas uma barra de rolagem é
adicionada para ver o resto do conteúdo.
• auto – Se o conteúdo extrapolar, uma barra de rolagem deve ser adicionada
para ver o resto do conteúdo.
overflow: visible;
overflow: hidden;
overflow: scroll;
Inline-block
Inline-block
Exercícios
• position
• overflow
inline-block

Aula 17

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Aula 17

Загружено:

Авторское право:

Доступные форматы

Aula 17

Вам также может понравиться