Gibt es eine Möglichkeit, überlappende Grenzen zu allen div mit CSS hinzuzufügen?

Question

Ich habe eine Suche hier gemacht, aber ich habe nur Informationen über angrenzende Grenzen gefunden. Weiß jemand, ob es möglich ist, allen Divs Rahmen hinzuzufügen, nur um zu sehen, wie das aktuelle Layout funktioniert.

Wenn Sie nur einen 1px Rahmen hinzufügen, wird 2px zur Breite hinzugefügt (nebeneinander) und bricht manchmal das aktuelle Layout.

Ich brauche das nur für Kontrollzwecke, etwas zu aktivieren/deaktivieren, nicht für die Produktion.

danke!

Answer 1

Sie können besser nutzen Umriss Eigenschaft statt Grenze, weil

• Outlines Sie Platz nicht einnehmen, weil sie oben auf die Box des Elements immer gegeben, die sie anderen zu überlappen verursachen Elemente auf der Seite.
• Im Gegensatz zu Rahmen können Konturen es nicht ermöglichen, jede Kante auf eine andere Breite einzustellen oder für jede Kante andere Farben und Stile festzulegen.
• Ein Umriss ist auf allen Seiten gleich.
• Umrisse haben keine Auswirkungen auf umgebende Elemente abgesehen von überlappend.
• Im Gegensatz zu Rahmen ändern Umrisse nicht die Größe oder Position des Elements .

.outline-outer,.border-outer{ 
 
    height:100px; 
 
    width:100px; 
 
    border:solid 1px blue; 
 
} 
 
.border{ 
 
    height:80px; 
 
    width:50px; 
 
    border:solid 1px red; 
 
    float:left; 
 
} 
 
.outline{ 
 
    height:80px; 
 
    width:50px; 
 
    outline:solid 1px red; 
 
    float:left; 
 
}

<div class="outline-outer"> 
 
    <div class="outline"></div> 
 
    <div class="outline"></div>Outlined 
 
</div> 
 
<br/><br/><br/> 
 
<div class="border-outer"> 
 
    <div class="border"></div> 
 
    <div class="border"></div>Bordered 
 
</div>

Fiddle Here

Answer 2

* { 
    border:1px solid red; 
    box-sizing: border-box; 
    } 

Dies fügt einen Rahmen zu allen divs innerhalb Ihres Layouts hinzu.

* bedeutet global.

Answer 3

Sie die box-sizing Eigenschaft, die

Elemente angeben verwenden sollten, die Elemente Polsterung und Rahmen in der Gesamtbreite des Elements und die Höhe enthalten haben sollte. so dass keine Auswirkungen auf das Layout

* { 
border: 1px solid blue; 
box-sizing: border-box; 
}