【Я впервые участвую в Gengwen Challenge15День, подробности о событии уточняйте:Обновить вызов"]
Лично я считаю, что CSS — это основа, которую должен освоить каждый фронтенд-разработчик, чтобы выполнить соответствующее взаимодействие и отклик терминального устройства. При разработке проекта некоторые небольшие проблемы, которые легко упустить из виду, приводят к тому, что связующий код появляется позже в проекте. В этой статье собраны 10 советов по использованию CSS при разработке некоторых проектов.
1. Используйте относительные единицы
Обычно при разработке проектов мы используемpxв качестве единицы измерения вместо использования относительных единиц, например:rem,emЖдать. В эпоху Интернета всего лучший способ — относительные единицыrem,vh,vwСовременные макеты CSS (такие как flexbox и grid) для максимальной поддержки различных терминальных устройств.
абсолютная единица
-
px: это абсолютная единица, главным образом потому, что она фиксирована и не меняется в зависимости от измерения любого другого элемента.
Относительная единица
-
vw（viewpoint width）: ширина относительно области просмотра -
vh（viewpoint height）: высота относительно области просмотра -
rem（font size of the root element）: относительно корневого ( ) элемента (размер шрифта по умолчанию обычно составляет 16 пикселей) -
em（font size of the element）: относительно родительского элемента -
%: относительно родительского элемента
/* 不提倡 */
.wrap {
font-size: 14px;
margin: 10px;
line-height: 24px;
}
/* 建议 */
.wrap {
font-size: 1.2rem;
margin: 0.5rem;
line-height: 1.6em;
}
2. Повторное использование кода
Многие разработчики считают, что повторение кода является высоким, когда речь идет о CSS, что не является хорошей практикой при разработке проектов. К счастью, существуют препроцессоры CSS (sass/scss, less, stylus, Turbine), которые позволяют нам лучше планировать код CSS и улучшать возможность его повторного использования.
Конечно, повторное использование кода нуждается в улучшении, и для разработки структуры кода необходима определенная основа CSS, а именно:
/* 不提倡 */
.container {
background-color: #efefef;
border-radius: 0.5rem;
}
.sidebar {
background-color: #efefef;
border-radius: 0.5rem;
}
/* 建议 */
.container,
.sidebar {
background-color: #efefef;
border-radius: 0.5rem;
}
3. Сброс CSS
Каждый браузер имеет свои собственные стили по умолчанию, поэтому, когда веб-страница не содержит CSS, браузер добавляет к тексту некоторые базовые стили по умолчанию, отступы, поля и т. д.
С помощью универсального селектора*сброс настроекpadding,margin,box-sizingа такжеfont-familyдля достижения этой цели.
так:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
ul,
li {
list-style: none;
}
Однако эти проблемы в основном решает фреймворк, новичкам рекомендуется подражать, но не рекомендуется использовать фреймворк с самого начала.
4. Не используйте названия цветов
Не используйтеred,blueи т. д. Вместо имен цветов рекомендуется использовать шестнадцатеричное значение цвета.
Зачем? потому что при использовании чего-то вродеredТакие названия цветов будут отображаться по-разному в разных браузерах или устройствах.
/* 不提倡 */
.container {
background-color: red;
}
/* 建议 */
.container {
background-color: #ff0000;
}
5. Используйте сокращенные свойства
В CSS сокращенные свойства используются чаще, а отдельные свойства используются реже. В частности, какие свойства являются сокращенными, а какие являются индивидуальными. Ниже приведен список некоторых общих свойств, основанных на принципе общих проектов.
сокращенное свойство
background,font,margin,padding,border,transition,transform,list-style,border-radius
индивидуальные свойства
rotate,scale,background-color,background-image,background-position,padding-left,padding-right,padding-top,padding-bottom,margin-left,margin-top,margin-right,margin-bottom,border-top,border-right,border-bottom, border-left,border-width,border-color,border-style,
/* 不提倡 */
.container {
background-image: url(bg.png);
background-repeat: no-repeat;
background-position: center;
}
/* 建议 */
.container {
background: url(bg.png) no-repeat center;
}
6. Перехват текста
При разработке проекта некоторые списки должны отображать только одну строку текста, а некоторые списки должны отображать текст фиксированных функций.В прошлом это было реализовано путем перехвата символов, но перехват не был равномерным (текстовое содержимое было разные на английском, китайском, знаках препинания и т. д.), а затем в сочетании с адаптацией различных терминалов сейчас нехватка увеличивается.
Лучший способ сделать это прямо сейчас — сделать это с помощью CSS, добавив многоточие в конце текста (…).
однострочный перехват
элемент должен бытьblockилиinline-block, если переполнение скрыто, переполнение текста не действует, и элемент должен иметь определенную ширину или установленную максимальную ширину.
p {
display: inline-block;
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Многострочный перехват
Вот способ справиться с этим, если вы заинтересованы, вы можете обратиться к "Изящно обрабатывайте усечение переполнения текста", который вводит другие методы обработки.
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 需要显示的行数 */
overflow: hidden;
}
7. Центрируем по вертикали
Вертикальное центрирование является очень распространенным требованием, существует множество способов добиться вертикального центрирования чего-либо внутри гибкого контейнера:
.flex-vertically-center {
display: flex;
align-items: center;
}
inline,inline-block,table-cellБлок вертикального выравнивания:
img {
/* 只对block有效 */
display: inline-block;
vertical-align: middle;
}
Абсолютный элемент с вертикальным центрированием в относительном контейнере, следующий код:.sub-containerсуществует.containerЦентрировать по вертикали:
.container {
position: relative;
}
.sub-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
8. Горизонтально по центру
Подобно вертикальному выравниванию, но центрировать его по горизонтали немного проще.
блок по центру
.block-element {
display: block;
margin: 0 auto;
}
Центрирование встроенного или встроенного текста
.container {
text-align: center;
}
Горизонтально центрируйте абсолютный элемент внутри относительного контейнера:
.container {
position: relative;
}
.sub-container {
position: absolute;
top: 50%;
transform: translateX(-50%);
}
Любой контент внутри гибкого контейнера центрируется по горизонтали:
.flex-vertically-center {
display: flex;
justify-content: center;
}
9. Стилизуйте следующий или предыдущий одноуровневый элемент
Стилизация элементов перед и за элементами, полезная при разработке проекта. Например, для 10 кнопок следующие и следующие одноуровневые элементы текущей кнопки имеют разные цвета.
HTML-код выглядит следующим образом:
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button class="current">current</button>
<button>+ button</button>
<button>~ button</button>
<button>~ button</button>
<button>~ button</button>
<button>~ button</button>
</div>
css-код:
.current ~ button {
background-color: #000;
color: #ffffff;
}
.current {
background-color: #ff0000;
}
.current + button {
background-color: #333;
}
Эффект следующий:
Затем установите стиль передней части текущей кнопки, код css выглядит следующим образом:
button {
padding: 10px 15px;
border: 1px solid #444444;
font-size: 12px;
background-color: #ff0000;
color: #000;
}
.current {
background-color: #000;
color: #fff;
}
.current ~ button {
background: initial;
}
.container {
width: 1000px;
margin: 50px auto;
text-align: center;
}
Эффект следующий:
10. Соотношение сторон
Если вы хотите, чтобы бокс-контейнер имел определенное соотношение сторон, например размер видеопроигрывателя, вы можете сделать это несколькими способами, один из которых является наиболее интуитивным. можно использоватьcalcфункция для установки верхнего заполнения (height * width) / 100%.
Как показано ниже, создайте720pxШирокий16 x 9прямоугольник:
html-код:
<div class="container">
<div class="box"></div>
</div>
css-код:
.container {
width: 720px;
}
.box {
padding-top: calc((9 / 16) * 100%);
background: #efefef;
}
Эффект следующий
также можно использоватьafterПсевдоэлемент для создания пропорционального размера.
.box::after {
content: "";
display: block;
padding-top: calc((9 / 16) * 100%);
background: #eee;
}
Приведенное выше решение приведет к тому, что все элементы внутри должны быть перемещены вверх или должны использовать абсолютное позиционирование. Хорошая новость заключается в том, что CSS добавляетaspect-ratioАтрибуты.
aspect-ratioЗадает ожидаемое соотношение сторон контейнера box, которое можно использовать для расчета автоматических размеров и выполнения других функций макета.
Суммировать
CSS — это весело, мощно и постоянно растет и совершенствуется.