Установите равный размер двух ящиков с относительной единицей (em) - PullRequest
Новая
       12

Установите равный размер двух ящиков с относительной единицей (em)

0 голосов
/ 20 сентября 2019

Я реагирую на CSS.Я занимаюсь кодом там.Я не могу понять, как заданы размеры h1 и секционных боксов.Размерность та же, но в теге h1 у меня max-width = 15em, а в классе .chapter max-width = 36em.Оба элемента являются дочерними элементами body, и, следовательно, em, относящийся к его собственному родителю (тело, которое по умолчанию имеет 16px), должно иметь соответственно 240px (15x16) и 576 (36x16), вместо этого оба поля имеют одинаковое измерение.Где я не прав?Может кто-нибудь объяснить мне, почему эти две коробки имеют одинаковое измерение? 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pseudo elements</title>

  <style>
    body {
      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    }

    h1 {
      max-width: 15em;
      margin: 1em auto .5em;
      text-align: center;
      font-family: Georgia, Times, "Times New Roman", serif;
      font-weight: 300;
      font-size: 3em;
      padding-bottom: .5em;
      border-bottom: 1px solid #999;
    }

    .chapter {
      margin: 0 auto;
      max-width: 36em;
      padding-left: 10em;
      position: relative;
    }

    .chapter p {
      font-size: 1em;
      line-height: 1.5;
      margin: 0 0 1.5em;
    }
    
    .chapter::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 1em;
      height: 1em;
      content: '”';
      font-size: 20em;
      line-height: 1;
      margin-top: -0.1em;
      color: #ccc;
      speak: none;
    }
        /**
        * Create a "drop-cap" by floating the first letter.
        */
        .chapter p::first-letter {
          float: left;
          font-size: 3em;
          line-height: 0.8;
          margin-top: .15em;
          margin-right: .1em;
          font-family: Georgia, Times, "Times New Roman", serif;
        }
        /** 
        * Support note: at the time of writing, Google Chrome (and possibly 
        * other Blink/Chromium-based browsers) *still* don’t support the 
        * text-transform property within the ::first-line pseudo-element,
        * for some inexplicable reason.
        */
        .chapter p::first-line {
          font-family: Georgia, Times, "Times New Roman", serif;
          text-transform: uppercase;
        }
      </style>
    </head>
    <body>
      <h1>A Study In Scarlet</h1>
      <section class="chapter">
        <p>In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon.</p>
      </section>
    </body>
    </html>

1 Ответ

0 голосов
/ 20 сентября 2019

Я немного озабочен CSS.em - это измерение относительно самого элемента (не его собственного родителя, за исключением случаев, когда в этом элементе нет измерения font-size).В этом случае размер шрифта для h1 равен 3em, следовательно, размер box = 16x3x15 = 720px. Для .chapter у меня 36em = 36x16 = 576 + отступ 10em = 160px 576 + 160 = 736 меньше или больше того же размера.

...