Кто-то задал мне вопрос по CSS

HTML CSS
Кто-то задал мне вопрос по CSS

by zhangxinxu from Ууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууууу
Эта статья может быть воспроизведена в полном тексте без разрешения при условии сохранения оригинального автора, источника и ссылок в тексте.

1. Кто-то задал мне вопрос по CSS

некоторое время назад@Зовите меня мистер ХанВ личном сообщении мне был задан следующий вопрос:

题目

Слова на скриншоте немного меньше, и я их переставил:

Требования темы:

  1. Максимальная ширина тега P не может превышать 10 % ширины текста тега H2.

    Здесь должно быть так, что максимальная ширина тега P определяется шириной предыдущего анонимного встроенного элемента (то есть шириной большого размера шрифта).Пожалуйста, обратитесь к GIF для конечного желаемого эффекта.

  2. Теги H2 не могут терять высоту (высота текста H2 + высота тега P = высота тега H2)

HTML-структура(модификация не допускается)

<h2>
IPHONE XR<br>
IS THE FUCKING<br>
BEST EVER MADE
<p>iPhone XR has not been authorized as required by the rules of the Federal Communications Commission. iPhone XR is not, and may not be, offered for sale or lease, or sold or leased, until authorization is obtained.</p>
</h2>

Основные стили CSS

h2{
    font-size: 52px;
    font-weight: bold;
    color: #000;
}
p{
    font-size: 12px;
    color: #333;
}

первоначальный эффект

初始GIF效果

желаемый эффект

预期效果gif截图

Я хотел бы спросить, если у вас есть идеи для реализации, вы можете написать соответствующий код CSS вЭта онлайн демонстрация(Откройте браузер Chrome) Область «Ваш CSS», вы можете увидеть эффект в реальном времени:

输入你的CSS代码到“你的CSS”

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

Два, несколько методов реализации макета

Сначала покажите мою реализацию:

h2 {
    width: min-content;
    white-space: nowrap;
}
p {
    white-space: normal;
}

Вы можете нажать здесь:Демонстрация реализации макета под min-content

Эффект следующий:

min-content下的布局效果截图

width:min-contentУказывает, что ширина уменьшена до минимума. Если это состояние по умолчанию, ширина должна быть шириной самого узкого слова.white-space:nowrap, следовательно, ширина равна ширине самой длинной строки символов (если вы не понимаете, то можете купить копию "Мира CSS", в которой есть подробное объяснение), т.к. установлен тег Pwhite-space:normal, поэтому окончательная ширина равна ширине самой длинной строки заголовка с большим шрифтом, и желаемый эффект, наконец, достигается. если правильноmin-contentЯ еще мало что знаю об этом, см.Понимать максимальное/минимальное содержимое CSS3, подходящее содержимое и другие значения ширины."Эта статья.

Ниже приведена реализация вопросника:

h2 {
    display: table;
}
p {
    display: table-caption;
    caption-side: bottom;
}

Вы можете нажать здесь:Демонстрация реализации макета под min-content

Эффект следующий:

min-content下的布局效果截图

Этот метод лучше и совместимее (IE8+).

display:table-captionУказывает, что уровень отображения элемента представлен в виде заголовка таблицы, который автоматически адаптируется к ширине контейнера внешней таблицы.caption-side:bottomВы можете установить заголовок таблицы внизу, аdisplay:tableШирина элементаautoКогда он выполняется, он «усаживается по размеру», поэтому достигается желаемый эффект.

3. Добро пожаловать, чтобы добавить свой метод реализации

Различные свойства CSS подобны основным элементам, из которых состоит мир.Для достижения определенного эффекта часто существует несколько комбинаций, каждая со своими преимуществами и недостатками.Я полагаю, что здесь будут и другие методы реализации макета. Вы можете добавить их.

Конечно, если у вас есть навыки CSS, которые вы считаете хорошими, вы можете общаться со мной, и я также могу пройти тест!

考我CSS题目

"Мир CSS"Подписанная версия является эксклюзивной, бесплатная доставка, можно указать сообщение,Нажмите, чтобы показать код покупки

(Конец этой статьи) // Хотите награду? нажмитездесь. Есть что сказать? нажмитездесь.

Категории