Différence entre plan et bordure

Question

Quelqu'un sait de toute différence entre les propriétés « border » et « aperçu » en CSS ? S’il n’y a pas de différence, alors pourquoi y a-t-il deux propriétés pour la même chose ?

Answer 1

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

La propriété CSS de contour est une propriété de source de confusion. Quand vous apprenez d’abord à ce sujet, il est difficile de comprendre comment il diffère encore à distance de la propriété border. Le W3C l’explique comme ayant les différences suivantes :

1. contours ne prennent pas de place.

2. contours peuvent être non rectangulaire.

Answer 2

En plus de quelques autres réponses... voici un peu plus de différences que je pense:

1) coins Arrondis

border prend en charge des coins arrondis avec l' border-radius de la propriété. outline ne le fait pas.

VIOLON

(NB: Bien que firefox a l' -moz-outline-radius de la propriété qui permet à coins arrondis sur les grandes lignes... cette propriété n'est pas définie dans le CSS standard, et n'est pas pris en charge par d'autres navigateurs (source))

2) le Style d'un seul côté

la frontière a des propriétés de style de chaque côté avec border-top:, border-left: etc.

le contour peut pas faire cela. Il n'y a pas de ligne de contour-top: etc. C'est tout ou rien. (voir cette SORTE de post)

3) décalage

contour prend en charge décalage avec la propriété outline-offset. la frontière n'est pas.

VIOLON (Tous les principaux navigateurs du soutien cette exception d'Internet Explorer)

Answer 3

Dans d'autres réponses, les contours sont généralement utilisés à des fins de débogage. L'opéra a quelques belles utilisateur de styles CSS qui utilisent le contour de la propriété pour vous montrer où tous les éléments sont dans un document.

Si vous êtes à essayer de savoir pourquoi un élément n'apparaît pas où vous vous attendiez ou à la taille vous attend, ajouter un peu de contours et de voir où les éléments sont.

Comme déjà mentionné, les contours de ne pas prendre de la place. Lorsque vous ajoutez une bordure de l'élément total largeur/hauteur dans le document augmente, mais ce n'est pas le cas avec les grandes lignes. Aussi, vous ne pouvez pas définir les contours sur les côtés spécifiques comme les frontières; c'est tout ou rien.

Answer 4

tldr;

Le W3C, l'explique comme ayant les différences suivantes:

• Les contours de ne pas prendre de la place.
• Les contours peuvent être non-rectangulaire.
• Les Contours De Ne Pas Prendre De La Place

Source

Ce plan doit être utilisé pour l'accessibilité

Il convient également de noter que le contour de l'objet principal est l'accessibilité. Le paramètre outline: none doit être évitée.

Si vous devez le supprimer, il peut être une meilleure idée de fournir un autre style:

J'ai vu pas mal de conseils sur comment faire pour supprimer l'indicateur de mise au point en utilisant outline:none ou outline:0. S'il vous plaît ne pas le faire, sauf si vous remplacez la silhouette avec quelque chose qui le rend facile à voir quel élément a le focus du clavier. Suppression de l'indicateur visuel de focus clavier de donner aux gens qui comptent sur la navigation au clavier est vraiment difficile pour la navigation et l'utilisation de votre site.

Source: "Ne Pas Supprimer le Contour de Lien et les Contrôles de Formulaire", 365 Rue de Berea

---

Plus De Ressources

• http://outlinenone.com/

Answer 5

Un petit peu d'une vieille question, mais vaut la peine de mentionner un formatage Firefox bug (encore présent de Jan '13) où le contour est rendu à l'extérieur de tous les éléments enfants, même s'ils sortent de leur parent (par le biais des marges négatives, box-ombre, etc.)

Vous pouvez résoudre ce problème avec:

.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 dommage qu'elle est pas encore fixé. Je préfère de beaucoup décrit dans de nombreux cas, car ils n'augmentent pas les dimensions d'un élément, ce qui évite d'avoir à toujours considérer les largeurs de la bordure lors de la définition des dimensions d'un élément.

Après tout, ce qui est plus simple?

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

Ou:

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