Основные Перетяжка Знание

Question

У меня есть 3 колонки ящик на середине страницы со следующими кодами CSS:

.sectionLeft, .sectionMiddle, .sectionRight { 
    float: left; 
    width: 31%; 
    height: 50px; 
    padding: 1%; 
    background-color: red; 
} 

Это совершенно исправный, хотя Интересно, что, когда я пытаюсь изменить отступы на 6%, то вдруг становится вне страницы. Я думал, что из-за 3-х столбцов будет пустое пространство на 6%. Я ошибаюсь? Я знаю, что это трудно объяснить, но может ли кто-нибудь прояснить это для меня?

Как это: Колонка 1: Оставшись% 1 - Right 1% Колонка 2: Оставшись% 1 - правый 1% Колонка 3: Left% 1 - правый 1%

Поэтому в основном мы должны были иметь 6% пространства.

Answer 1

Это потому, что div «s по умолчанию имеют box-sizing: content-box;, которые означают:

по умолчанию. Свойства ширины и высоты (и свойства min/max) содержит только контент. Граница, заполнение или маржа не включены

Поэтому они подталкивают контент при добавлении padding.

Как предотвратить это?

box-sizing: border-box;, что означает:

ширина и высота свойства (и мин/макс свойств) включает в себя содержание, отступы и границы, но не запас

увидеть фрагмент кода ниже для сравнение:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.sectionLeft, 
 
.sectionMiddle, 
 
.sectionRight { 
 
    float: left; 
 
    width: 33.3%; 
 
    height: 50px; 
 
    padding: 6%; 
 
    background-color: red; 
 
    border: white 1px solid; 
 
    /* boder-box includes padding */ 
 
    box-sizing: border-box; 
 
} 
 
.sectionOther { 
 
    float: left; 
 
    width: 33.3%; 
 
    height: 50px; 
 
    padding: 6%; 
 
    background-color: red; 
 
    border: white 1px solid; 
 
    /* content box doesn't include padding therefore it overflows */ 
 
    box-sizing: content-box; 
 
}

<!-- these are box-sizing: border-box --> 
 
<div class="sectionLeft">stuff</div> 
 
<div class="sectionMiddle">stuff</div> 
 
<div class="sectionRight">stuff</div> 
 
<!-- these are box-sizing: content-box --> 
 
<div class="sectionOther">stuff</div> 
 
<div class="sectionOther">stuff</div> 
 
<div class="sectionOther">stuff</div>

You can find more info about box-sizing property here

Answer 2

Необходимо оставить его на уровне 1%. Отступ устанавливается слева и справа от каждого из div. Таким образом, это левое и правое заполнение (2) для каждого из трех разделов, равное 6 «реализациям» указанного вами дополнения. Все дополнения должны содержать до 6% в общей сложности, что и делает, когда вы устанавливаете его на 1% (1% * 6 = 6%). Если вы попытаетесь установить его на 6%, то общее заполнение будет 6% * 6 = 36% и добавлено к вашим другим 3 31%, что составляет 129%.

Answer 3

я путаница и его действительно глупые, насколько браузер вычислить его.

Например, если вы установите поле с 100px и добавьте 10px padding влево и вправо, размер окна будет 120px padding-left + width + padding-right.

Действительно глупое дело, что вам нужно сделать, это изменить алгоритм вычисления модели коробки. Вы делаете это с box-sizing собственности в CSS.

box-sizing: border-box;

Working example

Answer 4

В вашем примере, утеплитель дочерних элементов устанавливается в процентах, и этот процент рассчитывается исходя из размера родительского контейнера (будь то родитель DIV или, возможно, всю страницу сам).

.container { 
    width: 1000px; 
    background: grey; 
    height: 500px; 
} 
.sectionLeft, .sectionMiddle, .sectionRight { 
    float: left; 
    width: 31%; 
    height: auto; 
    padding: 1%; 
    background-color: red; 
} 

Я добавил класс для родительского div («контейнер»). Мы изменим его ширину, чтобы вы могли визуализировать эффект, который он оказывает на закрытые элементы.

С шириной родительского контейнера, произвольно установленным на 1000 пикселей, и заполнением каждого ребенка, выраженным в 1%, каждый дочерний элемент будет иметь 10 пикселей отступов (1000 * .01 = 10). Ширина каждого дочернего элемента - 310 пикселей (31%). Это 930 пикселей содержимого, плюс 60 пикселей от общей прокладки (по 10 пикселей по обе стороны от трех элементов), для 990 пикселей используемой ширины в родительском объекте, которая обеспечивает общее число в 1000 пикселей. См. codepen.

Теперь, когда мы меняем отступы на 6%, у нас будет 60 пикселей отрицательного пространства, окружающего каждый дочерний элемент (вместо 10), для общей суммы 360 пикселей (60 пикселей по обе стороны каждого ребенка (120), раз 3 дочерних элемента). 930 пикселей содержимого, добавленного к 360 пикселам общей прокладки (1290), пробиваются за ширину 1000 пикселей родительского контейнера, нарушая трехколоночный макет. См. codepen.

Таким образом, вы можете видеть, что 1% заполнения первого кода (всего 60 пикселей) не совпадает с 6% -ным заполнением второго кода (всего 360 пикселей), поскольку заполнение происходит из ширины родитель.