1. Вопросы первого этапа викторины CSS
Тема следующая, очень простая и распространенная раскладка:
Список, упорядоченный слева и справа, с меткой слева и описанием справа.
После публикации вопроса в фан-группе WeChat было получено в общей сложности около 50 ответов. Полный список ответов см. в следующих выпусках:GitHub.com/palmless/…
Также приглашаем подписаться на этот проект на github.
Сегодня утром на станции B был проведен прямой эфир с вопросами и ответами. Эта статья является отредактированной текстовой версией.
2. Спорная реализация
1. Проблема сброса подстановочных знаков
Довольно много ответов появилось со следующим CSS:
* { padding: 0; margin: 0; }Это ленивый метод написания сброса CSS. Лично я не рекомендую этот метод написания. Он принесет больше накладных расходов ресурсов, а эти накладные расходы совершенно не нужны. Такое ощущение, что вырубили весь лес на несколько деревьев. , во всех тегах HTML , по умолчанию существует всего несколько значений отступов, и нет необходимости использовать подстановочные знаки для сброса; во-вторых, для некоторых элементов значение по умолчаниюmarginПолезны атрибуты, такие как переключатели и флажки в элементах формы. Значение поля по умолчанию может поддерживать разумный интервал со следующим текстом. Если вы сбросите его с помощью подстановочных знаков, он будет переполнен в кучу, и чтение не будет хорошим .
2. Проблема высоты контейнера
Когда кто-то это реализует, контейнер пишется в мертвую высоту, в реальной разработке мы не можем гарантировать, изменятся ли требования, например, добавление данных записи. Если высота нашего контейнера фиксированная, то неизбежно будут баги верстки при добавлении новых элементов, что снизит отказоустойчивость и ремонтопригодность, поэтому избегайте установки высоты.
3. 50% вопросов
При реализации этого макета может быть почти 1/3 людей,dtа такжеddШирина составляет 50% каждый, независимо от того, плавает ли он влево или вправо,flexрасположение или использованиеinline-blockрасположение.
Индикация следующая:
dt, dd{
width: 50%;
}
dt{
float: left;
}
dd{
float: right;
text-align: right;
}Если решать эту проблему, то можно сказать, что она едва проходима, но если ее поставить в реальную разработку, ограничения будут относительно большими. из-заddСодержимое ярлыка является динамическим, и может быть длинный раздел параметров, похожий на примечания.ddШирина 50% будет проблемой. На мобильной стороне ширина, которую мы отображаем, может быть только больше 300 пикселей, поэтому макет может выглядеть следующим образом:
А по моему тесту ширина общего контейнера меньше 290 пикселей, да и время упадет, т.к. 50% не самое лучшее значение в реальной разработке, его можно регулировать. Лучше всего иметь безопасную ширину слева, а оставшееся пространство справа будет автоматически выделено.
4. Проблема абсолютной реализации
Вот пример абсолютного позиционирования с использованием тега dd:
Использование тега dd для поиска по одному абсолютно, самая большая проблема заключается в том, что ремонтопригодность слишком плохая.Если вы хотите добавить запись, вы должны переписать часть CSS.Если есть 20 строк данных, вам нужно добавить более 20 утверждений?
На самом деле можно использовать абсолютное позиционирование тега dd, но нет необходимости использовать top для позиционирования по одному, как показано ниже:
Другой CSS лишний, достаточно только следующих строк, и с совместимостью все в порядке.
dl {
border: 1px solid #000;
position: relative;
}
dd {
position: absolute;
right: 0;
margin: -1.2em 0 0 0;
}Почему это полезно? Я не буду расширять это здесь. В части абсолютного позиционирования книги "Мир CSS" есть ответ. Если вам интересно, вы можете купить копию.
5. Проблема относительной реализации
relativeПозиционирование иногда очень полезно, здесь оно просто не подходит:
dd {
position: relative;
top: -20px;
}Самая большая проблема этоrelativeКогда элемент позиционируется, пространство, которое он первоначально занимал, все еще остается зарезервированным, поэтому остается пустая область. Здесь мы можем положитьtopизменить наmargin-topвоздействие на него.
6. Проблема плавания влево и вправо
Существуют и другие реализации, которые напрямую плавают влево и вправо без фиксированной ширины:
dt{
float: left;
clear: left;
}
dd{
float: right;
clear: right;
}Этот метод лучше, чем ширина 50% слева и справа, и применимая сцена шире.
здесьclear:rightявляется избыточным и не имеет никакого эффекта. Лучший способ написать это:
dt{
float: left;
clear: both;
}
dd{
float: right;
}Однако, если принять во внимание экстремальные ситуации, простое плавание влево и вправо может привести к смещению, например, когда у нас больше описаний справа:
Это приводит к следующему более важному моменту: хорошая реализация макета должна быть в состоянии справиться с различными экстремальными сценариями.
5. Необходимо учитывать экстремальное содержание
Для текстового контента возможны следующие экстремальные сценарии:
- много текста;
- Непрерывная строка английских символов;
- Без текстового содержания.
Если викторина в этой статье является вопросом собеседования, то итоговая оценка кандидата — это не использование какой-либо новой технологии или использование каких-либо странных и хитроумных приемов, а возможность предсказать возможные сценарии встречи и совершить ошибку. -толерантная обработка на уровне кода. Это может отражать не только достаточный опыт разработки, но и общую осведомленность, а также очень важные базовые навыки.
Мы подходим по одному.
Первый — сплошные английские символы. Это просто, мы можем использоватьword-breakАтрибуты:
word-break: break-all;Во-вторых, отсутствие текстового содержания. Эта проблема на самом деле является горшком развития.Когда контент выводится, если нет данных, область должна быть «недоступна» или информация по умолчанию, такая как «-».Однако многолетний опыт подсказывает мне, что из вывод и презентация контента, мы не должны доверять бэкенд разработчикам, мы должны держать свои руки, иначе будут проблемы с версткой, а отчетный лист упоминается здесь на фронтенде.
Мы можем справиться с этим следующим образом:
dd:empty::before {
content '-';
color: #999;
}Таким образом, даже если в теге dd не будет выводиться текст, будут заполнители символов, поэтому макет будет очень стабильным.
Наконец, текстового контента много, так что это зависит от стратегии вёрстки.
3. Лучшая реализация
Лучшая реализация этого макета такова: левая сторона имеет фиксированную ширину, ширина достаточно безопасна, а правая сторона автоматически заполняет оставшееся пространство.
Согласно моему многолетнему опыту разработки, хотя описание ярлыка слева также имеет динамические характеристики, содержание определяется менеджером по продукту, а не вводится пользователем, поэтому количество контролируемо, не беспокойтесь о более чем четырех иероглифы, китайский язык имеет эту особенность. Следовательно, мы можем смело установить пространство, занимаемое левой меткой dt, как5. должен использовать
ememединицы, не используйтеpxилиrem, таким образом, независимо от размера шрифта контейнера, левая ширина не будет исчерпана, что очень гибко и отказоустойчиво.
Затем все, что осталось, — сделать так, чтобы ширина содержимого правого тега dd автоматически заполнила оставшееся пространство.
Есть много способов.
1. Абсолютное позиционирование метки dt
Вот ответ одного из них, отличный ответ с небольшим кодом:
dt { position: absolute; }
dd {text-align: right; }Однако, если текстового содержимого много, содержимое тега dd будет перекрываться с тегом dt:
Итак, мы добавляем5emразмер слеваmarginВот и все.
dt { position: absolute; }
dd {text-align: right; margin-left: 5em; }Эффект следующий:
Этот метод имеет очень хорошую совместимость и также поддерживается более ранними версиями браузеров IE, ноposition:absoluteМежду прочим, укладка элементов относительно высока.Если макет страницы сложный и есть сцена, где элементы сложены, этот метод необходимо учитывать, потому что он, вероятно, увеличит сложность макета (дополнительныеz-indexдля иерархического управления).
2. Реализация гибкого макета
Гибкая компоновка также может достичь желаемого эффекта, код выглядит следующим образом:
dl {
display: flex;
flex-wrap: wrap;
}
dt {
width: 5em;
}
dd {
width: calc(100% - 5em);
text-align: right;
}Эффект следующий:
О Flex layout, если вы его не знаете, можете обратиться к статье, которую я писал ранее: "Учебник по макету display:flex, написанный для меня".
Преимущество макета Flex заключается в том, что представление макета глупое и приятное, и его легко понять. Недостатком является то, что на некоторых старых телефонах Android будут проблемы с совместимостью.
3. Реализация макета сетки
Реализация макета сетки является наиболее отказоустойчивым и семантически лучшим методом.Его самым большим преимуществом является то, что текст описания ярлыка слева составляет 5 китайских символов и 6 китайских символов, и макет по-прежнему силен.
код показывает, как показано ниже:
dl {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
}
dd {
text-align: right;
}Эффект следующий:
О макете сетки, если вы этого не знаете, вы можете обратиться к моей предыдущей статье: "Учебник по разметке display:grid, написанный для меня".
Это лучшая реализация, если нет ограничений совместимости.
4. Плавающая реализация с плавающей запятой
Некоторые люди использовали следующий метод для достижения этого, и они все еще хорошо понимают базовые знания CSS.
dt {
width: 5em;
float: left;
}
dd {
text-align: right;
overflow: hidden;
}Ключ здесьoverflow:hidden, текстовое содержимое не будет плавать и обтекаться, конкретный принцип можно найти в этой статье"Углубленное понимание CSS адаптивного макета с несколькими столбцами в соответствии с характеристиками жидкости и характеристиками BFC.".
Эффект следующий:
Совместимость этого метода очень хорошая, пока браузер IE7 не поддерживает его, IE6 не поддерживает, если вы хотите быть совместимым с IE6, вы можете попробовать добавить предложение_display:inline-block.
5. Достигается с исходными свойствами жидкости
Этот метод — последний добавленный мной метод, о котором никто не упоминал, и его проще всего реализовать:
dd {
margin: -1.5em 0 0 5em;
text-align: right;
}Все кончено.
Ширина адаптивная, размер шрифта адаптивный, количество символов адаптивное.
Эффект следующий:
Этот метод обладает наибольшей совместимостью, поддерживает все браузеры до IE6, имеет наименьшее количество кода и имеет различные преимущества.Он не требует освоения каких-либо flex-макетов, grid-макетов, BFC и других концепций, достаточно простого одиночногоmarginСвойство сделано, и это лучшая реализация в реальной разработке проекта. Однако, по крайней мере, среди людей, ответивших на вопрос, никто не знал этого метода Почему?
В заключение
Вышеупомянутые пять методов, хотя код отличается, но конечный эффект точно такой же.
Увидеть значит поверить, вы можете безжалостно нажать здесь:Тест CSS 1 — хорошая демонстрация реализации 5 макетов.
На демонстрационной странице можно настроить ширину и размер шрифта контейнера, и мы видим, что все 5 макетов работают хорошо, как показано на следующей записи экрана в формате GIF:
Полный код реализован следующим образом:
/* 公共部分 */
dl {
line-height: 1.5;
margin: 0; padding: 10px;
border: 1px solid #ccc;
background-color: #fff;
}
dd {
word-break: break-all;
text-align: right;
margin-left: 0;
}
dd:empty::before {
content: '-';
color: #999;
}
/* absolute实现 */
dt {
position: absolute;
}
dd {
margin-left: 5em;
}
/* flex实现 */
dl {
display: flex;
flex-wrap: wrap;
}
dt {
width: 5em;
}
dd {
width: calc(100% - 5em);
}
/* grid实现 */
dl {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
}
/* float实现 */
dt {
width: 5em;
float: left;
}
dd {
overflow: hidden;
}
/* 流体特性实现 */
dd {
margin: -1.5em 0 0 5em;
}5. О фан-базе, небольшом тесте и прямом эфире
На прошлой неделе была создана новая фан-группа.В среду был размещен небольшой тестовый вопрос.Каждую неделю CSS,DOM и JS были в порядке.В субботу утром я отвечал на вопросы.Отвечать на вопросы можно было в прямом эфире и в группе чат. По моим оценкам, на следующей неделе группа будет заполнена, и я, возможно, не смогу прийти, если захочу. Если вы хотите присоединиться к группе, вы можете добавить моего друга: zhangxinxu-job, подать заявку на информацию «вступить в группу», лучше всего указать свое имя, чтобы я мог делать заметки.
Живой адрес:live.bilibili.com/21193211
Прямая трансляция вопросов и ответов проходит с 10:00 до 11:00 каждую субботу, и иногда она может немного задерживаться во время сна.
Вступление в группу и прямой эфир бесплатно.Если вы чувствуете, что что-то обрели и хотите выразить свою благодарность, вы можете подписатьсямой публичный аккаунт, или купите мою копию"Мир CSS"Вот и все.
(Конец этой статьи)