Руководство CSS box-sizing

View more Tutorials:

Pуководства CSS

CSS box-sizing:content-box
CSS box-sizing:border-box
CSS box-sizing:padding-box (!)

1- CSS box-sizing:content-box

CSS Box Modal является контейнером (container) созданным из многих компонентов, включая content (содержание), paddings, margins, borders. Ниже является иллюстративное изображение Box Model:

CSS {box-sizing:content-box}

CSS box-sizing имеет значение по умолчанию это content-box. Это значит элемент по умолчанию является "Context-Box".

В случае, когда элемент является "Content-Box". то CSS width/height будет шириной и высотой прямоугольника, содержащего содержимое элемента, это значит когда элемент устанавливает padding или border (или оба), он увеличивает элемент.

box-model-example.html

<div style="border: 1px solid gray;width:200px;height:100px;">
     border: 1px solid gray; <br/>
     width:200px; <br/>
     height:100px;
</div>

<div style="margin: 20px;padding:30px; border: 10px solid gray;width:200px;height:100px;">
    margin: 20px; <br />
    padding:30px;   <br/>
    border: 10px solid gray;  <br/>
    width:200px;  <br/>
    height:100px;
</div>

Реальный размер элемента "Content-Box" расчитан по формуле:

realWidth = contentWidth + cssBorderWidthLeft + cssBorderWidthRight + cssPaddingLeft + cssPaddingRight

realHeight = contentHeight + cssBorderWidthTop + cssBorderWidthBottom + cssPaddingTop + cssPaddingBottom

При этом:

// box-sizing:content-box (Default):

// We have:

contentWidth = cssWidth
contentHeight = cssHeight

2- CSS box-sizing:border-box

Иногда вы хотите установить border, padding элементу и не хотите увеличивать размер элемента, это вполне возможно если вы используете CSS box-sizing:border-box. Тогда данный элемент считается "Border-Box".

Нсли элемент является "Border-Box", то CSS width/height будет "ширина/высота" прямоугольника включая padding и borders.

box-sizing-border-box.html

<!DOCTYPE html>
<html>

<head>
    <title>CSS box-sizing</title>
    <meta charset="UTF-8"/>

    <style>
         .my-box  {
            box-sizing:border-box;
            width:250px;
            height:120px;
            margin: 20px;
            padding:30px;
            border: 10px solid gray;
         }
    </style>
</head>

<body>

    <h3>CSS {box-sizing:border-box;}</h3>

    <div class = "my-box">
        box-sizing:border-box; <br/>
        width:250px;  <br/>
        height:120px;  <br/>
        margin: 20px; <br/>
        padding:30px;   <br/>
        border: 10px solid gray;
    </div>

</body>
</html>

3- CSS box-sizing:padding-box (!)

Примечание: Большинство браузеров не поддерживают CSS box-sizing:padding-box (Или больше не поддерживают).

Если элемент установил CSS box-sizing:padding-box, он считается "Padding-Box". Тогда CSS width/height и есть ширига и высота прямоугольника, содержащего padding, но не включает borders.

View more Tutorials:

Pуководства CSS