5208793
Description
Flashcards by Victor Bini, updated more than 1 year ago
|
Created by Victor Bini
over 8 years ago
|
|
| Question | Answer |
| Como funciona um elemento com a propriedade display: block? | element { display:block } A propriedade display block faz com que o elemento tome toda a largura de seu elemento pai. por padrão, divs, paragraphs e headings são block-level elements. |
| Como funciona um elemento com a propriedade display: inline? | O navegador não pode aplicar nenhuma altura(height) ou largura(width) nos elementos com display: inline, também não permite nenhuma margem top or bottom nos elementos com essa propriedade. |
| Qual a vantagem de utilizar "inline-block" ao invés de "inline" na propriedade display? | Você pode personalizar o elemento inline-block como um elemento block, com largura(width), altura(height) e top/bottom margin properties. |
| Como podemos aplicar um alinhamento vertical em nossos elementos? | element { vertical-align } assim como é aqui no goconqr. |
| O que usualmente acontece com o contêiner pai de um elemento flotado? | A altura(height) do contêiner colapsa porque ele não consegue mais honrar o espaço dos elementos flotados dentro ele. ( Flotar um elemento é tirar o elemento do fluxo do html, então o contêiner pai não vê mais o elemento, logo o elemento não força o contêiner para baixo como é o padrão ). |
| Quais métodos limpam os elementos floats em um contêiner? | Podemos utilizar o pseudo-elemento clearfix. or Configurar o elemento no elemento pai para overflow value to hidden or auto; container { overflow: hidden or auto; } |
| Quando um elemento de baixo do document flow, colapsa com elementos flotados e com a div(with clearfix) acima dele, qual propriedade podemos usar para corrigir? | devemos aplicar nesse elemento a propriedade, element { clear:both } |
| A "mobile first approach" majoritariamente usa qual ferramenta de media? | @media queries (min-width:500px){ } min-width: 500px; |
| Qual declaração CSS iria previnir seu layout de ser maior de 1150px? | max-width: 1150px; |
| O espaço entre colunas de conteudo é frequentemente chamado de? | gutters |
| Um elemento com a "position:absolute" é SEMPRE relativo ao? | Ao primeiro elemento pai que tenha a "position: relative". se nenhum tiver é o body por padrão |
| Qual elemento ajusta a ordem dos elementos relativos, absolutos e fixos? | z-index property element { z-index } |
| Quais comandos damos para posicionar elementos posicionados como ABSOLUTOS? | offset's property; top: 50px bottom: 20px left: 150px; right:1000px; |
| Quando podemos utilizar no CSS a função calc()? | Podemos utilizar em qualquer lugar que aceite unidades com (px, ems e porcentagens). O que nos permite posicionar melhor nossos objetos no layout por exemplo um objeto que deve ficar sempre a 50px a direita de seu elemento pai e 100 para baixo. .child-element { width: calc(100% - 50px); height: calc(100% - 100px); } |
| Se tenho um elemento pai contendo algumas <p> tags <h2> tags e uma <img> no top e gostaria de que as tags <p> e <h2> tivessem com padding, porém a <img> ocupasse 100% do container, como poderia resolver esse problema? | Como o container deve estar definido com padding então devemos: (with calc function) parentContainer { padding: 0 1.5em 1em; } img { max-width: calc(100% + 3em); /*para compensar os 1.5em de cada lado, porém esses 3em vão aparecer ainda respeindo o espaçamento lateral*/ margin-left: 1.5em; /*para fazer a correção na margin para cobrir todo o elemento pais */ } |
| Como selecionamos um elemento por PARTE do nome de sua classe no CSS? | [class^="partName"] { examplo: value; } |
| Como podemos criar um sistema de GRIDS rapido e facil como no bootstrap, utilizando calc() funciton? | .col-1 { width: calc(100% / 12); } .col-2 { width: calc(100% / 12 * 2); } .col-3 { width: calc(100% / 12 * 3); } .col-4 { width: calc(100% / 12 * 4); } .col-5 { width: calc(100% / 12 * 5); } .col-6 { width: calc(100% / 12 * 6); } então só precisamos verificar de quanto espaço necessitamos e atribuir a classe para o elemento. |
Want to create your own Flashcards for free with GoConqr? Learn more.