Учебники

CSS3 — Размер коробки

Сентябрь 21, 2018

Свойство размера окна используется для изменения высоты и ширины элемента.

Начиная с css2, свойство box работает так, как показано ниже —

width + padding + border = фактическая видимая / отображаемая ширина поля элемента

высота + отступ + граница = фактическая видимая / отображаемая высота поля элемента

width + padding + border = фактическая видимая / отображаемая ширина поля элемента

высота + отступ + граница = фактическая видимая / отображаемая высота поля элемента

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

CSS2 свойство размера

Live Demo

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

Это даст следующий результат —

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

CSS3 свойство размера ящика

Live Demo 

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>

   <body>
      <div class = "div1">TutorialsPoint.com</div><br />
      <div class = "div2">TutorialsPoint.com</div>
   </body>
</html>

Выше образец имеет одинаковую высоту и ширину с размерами коробки: рамка границы . здесь результат показан ниже.

Это даст следующий результат —

Вышеупомянутые элементы имеют одинаковую высоту и ширину с размером блока: border-box, поэтому результат всегда одинаков для обоих элементов, как показано выше.

36
Share: