Блог

Главная - Вопросы по программированию - Почему элементы HTML и BODY перекрываются?

Почему элементы HTML и BODY перекрываются?

#html #css

#HTML #css

Вопрос:

С помощью этого простого шаблона HTML / CSS ниже я ожидал, что BODY будет содержаться внутри HTML-элемента. Почему это не так? Я разделил css для HTML и BODY, чтобы придать разные цвета.

https://jsfiddle.net/jwinnd/w95ngLqc/3/

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>demo</title>

  <style>
    html {
      width: 100%;
      height: 100%;
      border: solid 30px red;
    }
    
    body {
      width: 100%;
      height: 100%;
      border: solid 30px blue;
    }
  </style>
</head>

<body>
  <script>
  </script>

</body>

</html>

Ответ №1:

Это то, что вы хотите. Не переусердствуйте. box-sizing Свойство является наиболее важным в этом сценарии. box-sizing Будет измеряться элемент width и height с border включенным.

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>demo</title>
    
        <style>
            html {
                border: solid 30px red;
                box-sizing: border-box;
                height: 100%; 
                margin: 0;
                padding: 0;
                width: 100%; 
            }
            body {
                border: solid 30px blue;
                box-sizing: border-box;
                height: 100%; 
                margin: 0;
                padding: 0;
                width: 100%; 
            }

        </style>
    </head>     
    <body>
        <script>

        </script>

    </body>
</html>

Комментарии:

1. позиция здесь не имеет значения. Но вы правильно определяете размер коробки

Ответ №2:

Ваш вопрос:

Короче говоря; вы спрашиваете, почему элемент body не находится непосредственно поверх родительского элемента html, как можно было бы ожидать.

Объяснение:

Факт в том, что ЭТО ТАК, но способ, которым задан CSS, заключается в том, что некоторые правила CSS и некоторые факторы стиля по умолчанию компенсируют это прямое наслоение.

В этом случае HTML и «поля» тела по умолчанию измеряются системой только с точки зрения его «области содержимого», а не всей области «margin» «border» «content».

Читайте о CSS box-sizing .

У вас есть граница для обоих, поэтому дочерний элемент смещен относительно границы, но также указано, что дочерний элемент должен быть 100% width , поэтому он должен перекрывать родительский, потому что истинный общий размер дочернего элемента равен «граница» (30 пикселей x 2) «заполнение» (0 пикселей) «содержимое» (100%)

Кроме того, <body> элемент имеет значение поля по умолчанию 8 пикселей (стандартный размер шрифта 0,5rem) по всем краям, поэтому это также не учитывается системой определения размера, поскольку поле (как и граница) не находится в «области содержимого» и поэтому вызывает дополнительное смещение.

Однако дочерний элемент вынужден составлять 100% от своего родительского элемента, поэтому он должен «переполняться» в дальнем конце поля parent ( <html> ); в результате чего ваши границы перекрываются.

Из приведенного выше вы можете видеть, что ваш body элемент на самом деле имеет ОБЩУЮ ширину:

поле:
16 пикселей граница: 60 пикселей
содержимое: 100%

Таким образом, размер тела составляет 100% 76 пикселей от размера родительского элемента.

CSS не может не отображать какую-либо часть отображения, поэтому он вынужден переполнять родительский элемент, чтобы все было доступно для просмотра (вы можете изменить это с помощью: overflow:hidden; )

В дополнение к вышесказанному, <body> элемент переполняет родительский <html> элемент, потому что родительский элемент также имеет ширину 100%, поэтому это будет максимальная ширина дочерней ( body ) «области содержимого», а не области, которую он фактически отображает на экране. Вот почему граница в правом нижнем углу вашего примера имеет синий цвет за пределами красного; потому что система думает:

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

дочерний элемент тем временем обрабатывает:

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

Be по умолчанию <body> имеет естественное поле, а сама граница, установленная на <html> , заставит его дочерние элементы находиться внутри границы, а не поверх границы.

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

Измененная версия вашего HTML:

 html {
    width: 100%; 
    height: 100%; 
    border: solid 30px red;
    box-sizing: border-box;
}
body {
    margin: 0; /* Added to body */
    width: 100%; 
    height: 100%; 
    border: solid 30px blue;
    box-sizing:border-box;
    /* often added to the *{ .. } element to apply to all elements on a page */
}  
 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>demo 2</title>
    
        <style>


        </style>
    </head>     
    <body>
 Hello 2
    </body>
</html>

Внесены изменения в CSS:

  • Удалено поле по умолчанию body для элемента.
  • Изменено box-sizing на border box, при котором модель DOM Box устанавливается на границу, а не просто на содержимое поля.

Ответ №3:

Да! Если иногда вы видите, как веб-разработчик дергает себя за волосы или скрежещет зубами, он, вероятно, напутал с этой проблемой. Вы можете подумать, что когда вы определяете высоту элемента уровня блока, он включает поле содержимого на внешней стороне границы. Но это не так!Когда вы устанавливаете высоту элемента, вы устанавливаете только размер его содержимого, а не границы и отступы. Разработчики действительно часто устанавливают для всех элементов значение have box-sizing of border-box . Вы можете сделать это, добавив этот фрагмент кода в верхнюю часть вашего стиля css. :

 *{
  box-sizing: border-box;
}

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

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>demo</title>

  <style>
    *{
      box-sizing: border-box;
    }
    html {
      width: 100%;
      height: 100%;
      border: solid 30px red;
    }
    
    body {
      width: 100%;
      height: 100%;
      margin:0;
      border: solid 30px blue;
    }
  </style>
</head>

<body>
  <script>
  </script>

</body>

</html>

Комментарии:

1. вы действительно указали что-то, чего не было во всех других ответах здесь?

2. @Martin Да! Установка всех элементов в рамки с помощью * селектора! Лучше сделать это, а не повторяться в элементах body и html. Я видел эту технику на многих сайтах.

3. Да, этот полезный самородок состоит из одного предложения. Также помогло бы, если бы вы использовали правильный синтаксис в своем примере ;-)

Ответ №4:

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>demo</title>

  <style>
    html {
    box-sizing:border-box;
      width: 100%;
      height: 100%;
      border: solid 30px red;
    }
    
    body {
    margin:0;
      box-sizing:border-box;
      width: 100%;
      height: 100%;
      border: solid 30px blue;
    }
  </style>
</head>

<body>
  <script>
  </script>

</body>

</html>

Комментарии:

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

2. Спасибо всем вам. Здесь несколько отличных объяснений!

3. вы можете поискать об этой проблеме в Интернете.