Есть ли способ добавить перекрывающиеся границы для ВСЕГО с css?

Question

Я сделал поиск здесь, но нашел только информацию о смежных границах. Кто-нибудь знает, можно ли добавлять границы ко всем div, чтобы увидеть, как работает текущий макет.

Если вы просто добавили границу 1px, она добавит 2px к ширине (бок о бок) и будет - иногда - нарушать текущий макет.

Мне это нужно только для контрольных целей, что-то для включения/выключения, а не для производства.

спасибо!

Answer 1

Вы можете лучше использовать контур свойства вместо границы, потому что

• Контуров не занимают места, потому что они всегда находятся на вершине флажка элемента, который может заставить их перекрывать другие элементы на странице.
• В отличие от границ, контуры не позволят нам установить каждый край на ширину или задать разные цвета и стили для каждого края.
• Схема одинакова со всех сторон.
• Очертания не оказывают никакого воздействия на окружающие элементы, кроме перекрытия.
• В отличие от границ, контуры не меняют размер или положение элемента .

.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; 
    } 

Это добавит границу для всех div внутри макета ур.

* означает глобальное.

Answer 3

Вы должны использовать box-sizing свойство, которое

Укажите элементы, элементы должны иметь заполнение и граница включены в общую ширину и высоту элемента. так что не влияет на расположение

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