-
Notifications
You must be signed in to change notification settings - Fork 1
Layouts CSS
Utilizar um resetador de CSS para diminuir as pequenas inconsistênias visuais entre browsers. Um deles é o normalize.css.
É uma boa ideia envolver o seu conteúdo em um container, que é normalmente utilizado para definir o tamanho do conteúdo principal e centralizá-lo.
Veja um exemplo de uso comum de um container:
<div class="container">
<!-- conteúdo -->
</div>.container {
margin: 0 auto;
max-width: 960px;
}E o wrapper? O wrapper é mais comumente utilizado para envolver todo o conteúdo de uma página. O container é mais utilizado para envolver seções diferentes, não ele todo de uma vez.
Margens podem entra em colapso verticalmente em alguns casos.
Sobre isso o Guil Hernandez fala:
- If there is no content, padding, or border area to interrupt two touching margins, the margins collapse to the largest of the two margin values.
- You may experience margins collapsing in adjacent elements like paragraphs and divs.
- If a div's bottom margin is larger than the top margin of the div below it, the margin area between the divs collapses to the largest of the two margin values.
Pelo menos esse problema pode ser resolvido com facilidade. Basta:
- Remover a margem vertical problemática (
top,bottomou ambas); ou - Adicionar qualquer quantidade de
padding. 1px já resolve;
Para mais detalhes, confira a explicação da MDN sobre isso.
Essa é fácil. Basta adicionar um wrapper ou container em volta do conteúdo do site, menos no header.
Usando a classe .container do exemplo anterior:
<header>
<div class="container">
<!-- Elementos do header -->
</div>
</header>
<div class="container">
<!-- Restante do conteúdo do site -->
</div>A ideia todo do mobile first é desenvolver o site pensando primeiro nos dispositivos móveis. Isso porque:
- É mais fácil partir de um layout menos complexo para um mais complexo (progressive enhancement).
- Reduz a chance de problemas de compatibilidade e consistência em browsers mobile.
Aqui, as media queries só devem ser adicionadas para os layouts de telas maiores e designs de uma só coluna são seus melhores amigos.
Você pode ler mais sobre mobile first aqui e aqui.
De forma rápida: utilize a função CSS calc() para calcular o posicionamento do rodapé.
É preciso utilizar um wrapper (que envolva todo o conteúdo do site) que termine antes da tag <footer>, e então adicionar a classe .footer-push ao elemento que contem a classe .wrapper para que ele possa empurrar o rodapé para a parte de baixo.
Se preferir, é só adicionar a linha única dentro da classe .wrapper.
.footer-push {
min-height: calc(100vh - 96px);
/* onde 96px é a altura do rodapé */
}Ocupam todo o espaço horizontal disponibilizado por seu elemento pai, ou seja, não coexistem com outros elementos em uma mesma linha¹. Isso porque forçam uma quebra de linha antes e depois de seu conteúdo. Aceitam alterações de margin, padding, height e width.
Exemplos de elementos tipo block:
divh1p-
uleli
¹ A não ser que seu elemento pai seja uma ul com display: inline-block e cada li seja display: block, por exemplo. As lis serão elementos tipo block, mas não ocuparão todo o espaço de uma linha por conta do elemento pai ul.
Ocupam apenas espaço equivalente ao tamanho de seu conteúdo. Coexistem com outros elementos em uma mesma linha. Alterações de heigth e width não fazem efeito. margin e padding funcionam, mas apenas na horizontal, não na vertical.
Exemplos de elementos tipo inline:
aimgspan
O melhor de dois mundos. Ocupa espaço e coexiste como elementos inline mas os atributos margin, padding, height e width funcionam como elementos block.
Exemplos de elementos inline-block no Google Chrome:
inputbuttontextareaselect
Notas:
- Não é possível utilizar
margin: 0 auto;em elementos desse tipo. - Utilizar esse tipo de
displaynão é uma boa ideia para a navegação de layout mobile. Para isso, é melhor fazer com que cadaaseja um elemento comdisplay: blockpara que a área de clique seja maximizada. - Há um pequeno espaço em branco entre elementos
inlinee/ouinline-block. Para remove o espaço, basta utilizar um pequeno valor negativo emmargin-leftoumargin-right, como-4px.
O float remove o elemento do fluxo normal da página, fazendo ele se deslocar para a direita ou esquerda de uma forma peculiar. Isso é útil para construir layouts em colunas ou organizar menus de navegação, mas seu comportamento é um tanto complicado.
O ponto mais difícil de se entender no começo é que se um elemento com float estiver contido em um elemento pai do tipo block, a altura do elemento pai entrará em colapso e passa a ser 0.
Para resolver esse problema basta adicionar a seguinte classe em seu styles.css e adicioná-la ao elemento pai onde se encontra o elemento com float.
.cf::after {
content: "";
display: table;
clear: both;
}Notas:
- Com floats não é preciso se preocupar com espaços em branco como acontece com elementos
inlineeinline-block. - Elementos com float ficam adjacentes entre si, independente de espaços em branco.
Quando usar inline-block:
- Organizar um menu de navegação.
- Criar um layout simples de 2 colunas.
- Se você precisar ter controle sobre alinhamento horizontal e vertical.
Quando usar float:
- Quando quiser que o elemento saia do fluxo ou tenha conteúdo ao seu redor, como imagens à esquerda ou direita.
- Outras situações.
Elementos com position: absolute não afetam, nem são afetados por outros elementos na página. É como se estivem uma camada acima dos outros elementos sem essa regra de posicionamento.
.class {
position: absolute;
top: 0;
right: 20px;
bottom: 3.125em;
left: 5%;
}Elementos absolute são posicionados em relação ao elemento pai mais próximo que contenha position: relative.
Quando não há nenhum elemento com esse posicionamento, o contexto de posicionamento passa a ser o padrão, que é o da viewport.
Então se quiser posicionar um elemento com a classe .class em relação a um elemento pai de classe .main-header, por exemplo, basta adicionar a ele a propriedade position: relative.
.main-header {
position: relative;
}Nota: aparentemente a propriedade position: relative não afeta o elemento que a recebe e serve apenas de "âncora" para elementos com o valor absolute.
Excelente para criar menus de navegação fixos!
Exemplo de código:
.main-header {
position: fixed;
background: #fff;
width: 100%;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
top: 0;
z-index: 1000;
}
body {
padding-top: 68px; /* do tamanho do menu */
}A prioridade de posicionamento dos elementos tem a ver com a ordem em que aparecem no código fonte. Quem aparece por último tem prioridade sobre os demais.