css - tag - id vs class js




Diferença entre contorno e fronteira (9)

tldr;

O W3C explica como tendo as seguintes diferenças:

  • Contornos não ocupam espaço.
  • Contornos podem ser não-retangulares.

http://webdesign.about.com/od/advancedcss/a/outline_style.htm

O esboço deve ser usado para acessibilidade

Também deve ser notado que o objetivo principal do esboço é a acessibilidade. Definindo-o para delinear: nenhum deve ser evitado.

Se você precisar removê-lo, talvez seja melhor fornecer um estilo alternativo:

Eu vi algumas dicas sobre como remover o indicador de foco usando o contorno: nenhum ou estrutura de tópicos: 0. Por favor, não faça isso, a menos que você substitua o contorno por algo mais que facilite ver qual elemento tem o foco do teclado. Remover o indicador visual do foco do teclado dará às pessoas que dependem da navegação pelo teclado um tempo muito difícil para navegar e usar seu site.

Fonte: "Não remova a estrutura de tópicos dos controles de link e formulário", 365 Berea Street

Mais recursos

Alguém sabe de alguma diferença entre as propriedades 'border' e 'outline' no CSS? Se não há diferença, então por que existem duas propriedades para a mesma coisa?


É importante notar também, que o esboço do W3C é a fronteira do IE, uma vez que o IE não implementa o modelo de caixa do W3C.

No modelo de caixa w3c, a borda é exclusiva da largura e altura do elemento. No IE, é inclusivo.


Além de algumas outras respostas ... aqui estão mais algumas diferenças que eu posso pensar:

1) cantos arredondados

border suporta cantos arredondados com a propriedade border-radius . outline não.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
<div class="border"></div>

<div class="outline"></div>

FIDDLE

(Nota: Embora o firefox tenha a -moz-outline-radius que permite cantos arredondados no contorno ... essa propriedade não é definida em nenhum padrão CSS e não é suportada por outros navegadores ( source ))

2) Styling apenas um lado

border tem propriedades para estilizar cada lado com border-top: border-left: etc.

esboço não pode fazer isso. Não há topo de tópicos: etc. É tudo ou nada. (veja esta postagem SO )

3) compensado

contorno suporta offset com o outline-offset propriedades. fronteira não.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}
<div class="outline"></div>

FIDDLE

Nota: Todos os principais navegadores suportam outline-offset exceto o Internet Explorer


Além de outras respostas, os contornos geralmente são usados ​​para depuração. O Opera tem alguns estilos CSS de usuário que usam a propriedade outline para mostrar onde todos os elementos estão em um documento.

Se você estiver tentando descobrir por que um elemento não está aparecendo onde você esperava ou no tamanho esperado, adicione alguns esboços e veja onde estão os elementos.

Como já mencionado, os esboços não ocupam espaço. Quando você adiciona uma borda, a largura / altura total do elemento no documento aumenta, mas isso não acontece com o contorno. Além disso, você não pode definir contornos em lados específicos, como bordas; é tudo ou nada.


Copiado do W3Schools:

Definição e Uso

Um esboço é uma linha desenhada em torno de elementos (fora das bordas) para fazer com que o elemento "se destaque".


De: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

A propriedade de estrutura de tópicos do CSS é uma propriedade confusa. Quando você aprende sobre isso, é difícil entender como é mesmo remotamente diferente da propriedade border. O W3C explica como tendo as seguintes diferenças:

1.Outlines não ocupam espaço.

2.Outlines pode ser não-retangular.


Eu fiz um pequeno pedaço de código css / html apenas para ver a diferença entre ambos.

outline é melhor para incluir potenciais elementos filho transbordando, especialmente em um contêiner in - line .

border é muito mais adaptada para elementos que se comportam em bloco .

Violino para você senhor!


Um pouco de uma questão antiga, mas vale a pena mencionar um bug de renderização do Firefox (ainda presente em Jan '13) onde o esquema será renderizado do lado de fora de todos os elementos filhos mesmo que eles transbordem (por meio de margens negativas, sombras de caixa etc.)

Você pode corrigir isso com:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Super infeliz que ainda não é fixo. Eu prefiro os contornos em muitos casos, pois eles não adicionam as dimensões de um elemento, evitando que você tenha sempre que considerar as larguras de borda ao definir as dimensões de um elemento.

Afinal, o que é mais simples?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Ou:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

pense em contorno como uma borda que um projetor desenha fora de algo como uma borda é um objeto real em torno dessa coisa.
uma projeção pode facilmente se sobrepor, mas a borda não deixa você passar.
algumas vezes quando eu uso grid+%width , border mudará a escala na view view, por exemplo um div com width:100% em um pai com width:100px preenche o parent completamente, mas quando eu adiciono border:solid 5px to div it torne o div menor para criar espaço para a borda (embora seja raro e trabalhe em torno dele!)
mas com o contorno não tem esse problema, pois o contorno é mais virtual: D é apenas uma linha fora do elemento, mas o problema é que, se você não fizer o espaçamento corretamente, ele se sobreporia a outros conteúdos.

para resumir:
delinear pros:
não estraga com espaços e posições
contras:
alta chance de sobreposição






tag   for   div   and   css  

css