В мгновение ока до 2019 года осталось менее 12 часов. Оглядываясь назад на прошедший год, я понимаю, что прибыли и убытки сосуществуют. В этот последний момент отправьте статью сообществу и себе.
Эта статья является выдержкой из нескольких хороших проблем CSS, с которыми я столкнулся в своей работе за последний год (не обязательно сложных, но я лично считаю, что все они заслуживают упоминания).Эти проблемы CSS встречаются редко, и даже если они встречаются, они могут быть не известны.Решение, даже если вы знаете решение, вы не обязательно знаете принцип генерации, и в то же время, две JS-задачи подготовлены (я ранее составлял длинную статью о JS-проблемах, так что я не буду делать здесь новый). Эта статья будет обновляться, я надеюсь помочь друзьям. Ждем ваших лайков, спасибо.
1. CSS статьи
1.1 Синяя рамка элемента по умолчанию
inputЭлементы этикетки (например,button,text,areatext) некоторые события, такие какclick,focusд.), во многих браузерах по умолчанию появится синяя рамка, например, при размещении обычногоbuttonизbackgroundа такжеborderнастроены наnoneПосле срабатывания клика стиль выглядит следующим образом:
Это генерируется контуром элемента по умолчанию.Это защитный механизм браузера,который играет роль в подсветке элемента.Достаточно его убить.Метод следующий:
// 方法1:
outline: none / medium;
// 方法2：
outline-width: 0
1.2 Прозрачный фон, непрозрачный текст
мы обычно используемopacityЧтобы сделать фон прозрачным, это свойство поддерживается всеми браузерами и может использоваться смело, с прозрачностью от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный),но этот метод делает все дочерние элементы прозрачными, в настоящее время, если вы хотите сделать фон прозрачным, а другие непрозрачными, вы можете использоватьrgbaФон обработки:
background-color: rgba( red , green , blue , alpha )
из которых этоalphaТо есть для установки прозрачности значение находится между 0 и 1.Этот метод доступен во всех браузерах, кроме IE9 и ниже., посмотрите на эффект:
Таким же образом мы можем также использовать этот метод, чтобы сделать весь фон прозрачным, то есть написать еще одинdivПоскольку модальный слой прозрачен, хорошо видно, что приведенный выше текст не прозрачен:
Код для вышеуказанных эффектов выглядит следующим образом:
// html
<section>
<div class="item-pic">
<header class="header1">
<h4>你会微笑放手,说好不哭让我出新专辑</h4>
</header>
</div>
<div class="item-pic">
<header class="header2">
<h4>你会微笑放手,说好不哭让我出新专辑</h4>
</header>
</div>
<div class="item-pic">
<div class="handle-opacity"> <!-- 透明罩 -->
<header>
<h4>你会微笑放手,说好不哭让我出新专辑</h4>
</header>
</div>
</div>
</section>
<style lang="less">
.header1 {
opacity: .6;
}
.header2 {
background-color: rgba(0, 0, 0, 0.45);
}
.handle-opacity {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.45);
header {
background-color: rgba(0, 0, 0, 0.45);
}
}
</style>
Встроенный элемент div img 1.3, всегда расположенный внизу
использовать одинdivзавернуть одинimg,Будет появлятьсяimgне полностью покрытdivПространство, всегда оставляйте небольшой зазор у нижнего края.
Причиной этого явления являетсяimgЭто встроенный элемент. Браузер оставляет место для нисходящих символов (таких как: g, y, j, p, q). Эти символы будут занимать больше места внизу, чем другие символы (особенно связанные с текущим размером шрифта). , Это правила, которые влияют на встроенные элементы.imgМетки (вертикальное выравнивание по умолчанию основано на базовой линии, т.е.vertical-align: baseline), также встроенные элементы будут сохранять безопасное расстояние от внешних элементов. Правая часть картинки выше — это эффект добавления текста, что делает все более понятным.
Теперь мы знаем, что это явление в основном связано с механизмом защиты строки нисходящего канала иimgЭто вызвано этими двумя факторами встроенных элементов, поэтому решение начинается с этих двух мест и организовано следующим образом:
-
divнастраиватьfont-size: 0илиline-height: 0, а затем высота строки равна 0; -
imgнастраиватьvertical-align: top 或者 middle/, чтобы он больше не соответствовал базовой линии по умолчанию; -
imgнастраиватьdisplay:block, что делает его элементом блочного уровня.
Подводя итог, я лично считаю, что метод 3 лучше всего использовать, а метод 1 не рекомендуется.
1.4 Элементы автоматически заполняются фоновым цветом
Эта сцена в основном появляется в таких сценариях, как ввод формы. Это действительно странно видеть ее впервые. Эффект показан на рисунке:
То есть, когда браузер (хром) автоматически заполняет содержимое поля ввода, он также автоматически переносит фон (желтый или серо-синий) в поле ввода.Эта проблема в том, что хром автоматически заполняет его по умолчанию.input,select,textareaждать плюс:-webkit-autofillИз-за приватного псевдо-свойства лучшим решением является покрытие стиля Код выглядит следующим образом:
input:-webkit-autofill{
box-shadow: 0 0 0px 1000px white inset !important;
}
select:-webkit-autofill{
box-shadow: 0 0 0px 1000px white inset !important;
}
textarea:-webkit-autofill{
box-shadow: 0 0 0px 1000px white inset !important;
}
Худший способ - отключить автозаполнение, но не делайте этого...
1.5 Базовое значение преобразования вызывает размытие шрифтов
Как наиболее гордый атрибут CSS3, преобразование стало незаменимым методом в текущей разработке внешнего интерфейса, но у него есть проблема с рендерингом, то есть, когда элемент настроен на преобразование и его значение является базовым или десятичным, общая высота у коллеги тоже есть база, его внутренний текст станет размытым, как показано на рисунке:
Изображение выше находится в размытом состоянии, а изображение ниже исправлено. Конкретная причина может быть связана с расследованием.transformПреобразование создаст отдельный слой рисования в браузере и перерендерит его.В процессе рендеринга окружающий текст также обрабатывается.Если текст с нечетной высотой может иметь расчетную величину в полпикселя, браузер будет использовать это вычисление полупикселя. Пиксели оптимизированы для рендеринга, поэтому края будут казаться размытыми. Решение:
- Не устанавливайте нечетные и десятичные значения для значения свойства преобразования;
- Отрегулируйте общую высоту элемента, чтобы он не был основанием.
1.6 :последний дочерний элемент и :последний тип
В качестве широко используемого селектора псевдокласса CSS,:last-childОн часто используется, но иногда в крайних случаях он неожиданно выходит из строя, что сбивает с толку.Примеры следующие:
3imgЭтикетка завернута вcard, текущее требование состоит в том, чтобы сделать рамку последнего изображения розовой, и код выглядит следующим образом:
// html
<div class="card">
<img
v-for="(item,i) in pics"
:key="i"
:src="item"
/>
</div>
// css
<style lang="less">
.card {
> img {
width: 150px;
margin-right: 10px;
&:last-child {
border: 5px solid pink;
}
}
}
</style>
Используйте таким же образом:last-of-typeТакже возможно:
.card {
> img {
width: 150px;
margin-right: 10px;
&:last-of-type {
border: 5px solid pink;
}
}
}
Эффект следующий:
теперь кimgдобавить один послеspan,Обнаружить:last-childистекший:
// html
<div class="card">
<img
v-for="(item,i) in pics"
:key="i"
:src="item"
/>
<span>next is ...</span>
</div>
// css
<style lang="less">
.card {
> img {
width: 150px;
margin-right: 10px;
&:last-child {
border: 5px solid pink;
}
}
}
</style>
В настоящее время:last-of-typeВсе еще нет проблем:
Теперь к выводу:
-
:last-childВыберите последний элемент в группе одноуровневых элементов, и последний элемент должен быть указанным объявленным элементом (условия примечания 2); -
:last-of-typeВыбирает последний элемент указанного типа в группе одноуровневых элементов.
знать,:last-of-typeОн более строгий и менее подвержен случайным ошибкам, и я рекомендую его использовать. То же самое относится к:nth-last-child(n)а также:nth-last-of-type(n)
2. Статьи ДОМ
В этом разделе я опишу некоторые упущенные из виду проблемы, возникающие при манипулировании DOM.
2.1 Проблема с отображением даты в IOS
Для друзей, которые часто разрабатывают мобильные терминалы H5, думаю, эта проблема мне знакома, то есть в некоторых версиях IOS (IOS5 и ниже) парсинг строкового формата времени, разделенного знаком "-", не увенчался успехом. Написал такой безвкусный адаптер формата времени:
function DateFormat(date) {
if(!date) return null;
date = new Date(date);
let Y = date.getFullYear();
let M = (date.getMonth() >= 0 && date.getMonth() <= 8) ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`;
let D = (date.getDate() >= 0 && date.getDate() <= 9) ? `0${date.getDate()}`: `${date.getDate()}`;
return `Y-M-D`
}
На данный момент, если вы перейдете в «2019-12-31» под iphone IOS5 и ниже, он покажетNaN-NaN-NaNВ то время как другие версии iOS и Android-систем не проблема.
В ответ на вышеуказанные проблемы нам нужно сделать совместимые адаптации, то есть заменить строки событий, разделенные «-», на «/», это тот же адаптер, и добавить кусок кода:
function DateFormat(date) {
if(!date) return null;
if(typeof date === 'string' && date.indexOf('T')!=-1 && date.indexOf('+')!=-1) {
date = date.replace(/-/g, '/').replace('T',' ').substring(0,date.indexOf('.'))
}
date = new Date(date);
let Y = date.getFullYear();
let M = (date.getMonth() >= 0 && date.getMonth() <= 8) ? `0${date.getMonth() + 1}` : `${date.getMonth() + 1}`;
let D = (date.getDate() >= 0 && date.getDate() <= 9) ? `0${date.getDate()}`: `${date.getDate()}`;
return `Y-M-D`
}
2.2 Нажмите ENTER, чтобы обновить текущую страницу
Это действительно странная проблема. После выполнения отправки клавиши ENTER в форме, если вы откроете новую страницу для отображения результата отправки, вы обнаружите, что текущая страница формы также обновляется. Конечно, это очень плохой опыт. После проверки условия возникновения данной проблемы таковы:Formтолько один изinput, нажатие клавиши ENTER в это время автоматически отправит форму и обновит страницу. Решение тоже очень грубое, напишите скрытую метку прямо возле поля ввода ввода, чтобы было 2 входа, что позволяет избежать ошибки обновления по умолчанию, пример такой:
<form>
<input
type="text"
v-model.trim="searchText"
placeholder="搜索您感兴趣的内容"
@keyup.enter="goSearch"
/>
<input
id="hidden"
type="text"
style="display:none"
@keyup.enter="goSearch"
/>
</form>
Наконец, накануне наступления 2020 года я опубликовал относительно поспешную статью, чтобы завершить свое путешествие в 2019 году. Эта статья будет постоянно обновляться.Если у вас есть разные мнения и вопросы, пожалуйста, оставьте сообщение и укажите его.Я с нетерпением жду ваших лайков. Наконец, я желаю вам удачи в 2020 году.