Я относительно новичок в CSS. Я получил лекцию по стилю текста (относительная единица и абсолют). А в лекции в теге body было указано, что размер шрифта составляет 120%, поскольку лектор сказал, что в большинстве браузеров размер шрифта по умолчанию составляет 16 пикселей (абсолютная единица). Он пошел дальше и применил встроенный стиль, чтобы переопределить предыдущее объявление, но использовал модуль «em». Он объяснил: 2em = 240% = 38px (в два раза больше родительского элемента) 0.5em = 50% ... Я попытался сделать то, что понял, чтобы создать макет из двух столбцов ... Вставил 2 абзаца в элемент div и поместил их влево. Я сделал их ширину 50% области просмотра - он работал нормально. Затем я решил заменить 50% на 0.5em, что, я думаю, должно быть половиной родительского элемента (div), поскольку div по умолчанию составляет 100%. Я был удивлен результатом ... Я действительно больше не понимаю!
Вот мой код:
* {
box-sizing: border-box;
}
div {
background-color: #00FFFF;
margin-bottom: 10px;
}
p {
width: 50%; /* worked fine */
border: 1px solid black;
float: left;
padding: 10px;
width: .5em;
margin-top: 0em;
/* when the p width was 50%, as i scaled the browser everything adjusted...but with 18em it doesn't */
margin-top: 0%
}
#p1 {
background-color: #A52A2A;
}
#p2 {
background-color: #DEB887;
float: left;
}
section {
clear: both;
}
</style>
</head>
<body>
<h1>Two Column Design</h1>
<div>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta beatae voluptatibus veniam placeat iure unde assumenda porro neque voluptate esse sit magnam facilis labore odit, provident a ea! Nulla, minima.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima laborum, provident!</p>
<section>This is regular content continuing after the the paragraph boxes.</section>
</div>