Чен Чен, фронтенд-инженер команды WeDoctor Cloud Service, программист, который говорит: «Жизнь — это неподвижность».
предисловие
При возникновении таких сценариев, как очистка всплывающих окон, маленьких значков и замена содержимого во время разработки, неизбежно столкновение с атрибутом содержимого.Как правило, это решение Baidu.Сегодня в главе о содержании мы подробно расскажем о механизме использования содержимого. .
Свойство содержимого используется вместе с псевдоэлементами :before и :after для вставки сгенерированного содержимого. Содержимое, вставленное с использованием атрибута содержимого, является анонимным заменяемым элементом. Прежде всего, давайте разберемся, что такое сменный элемент?
заменить элемент
Сначала посмотрите на загрузку изображения:
<img src="1.jpg">
<!--替换-->
<img src="2.jpg">
Изменен атрибут src для img, что привело к изменению отображаемого изображения. Такие элементы, которые могут быть заменены путем изменения содержимого, представленного значением атрибута, называются «замещающими элементами».
Типичный сменный элемент:<img>,<video>,<iframe>,<textarea>а также<input>.
Правила расчета размеров сменных элементов
Существует три правила расчета размеров сменных элементов:
- Внутренний размер: заменяет исходный размер содержимого.
- Размеры HTML: собственные свойства HTML, ширина и высота.
- Размеры CSS: свойства ширины и высоты задаются через CSS
Возьмем img в качестве примера:
<img src="../assets/test1.jpeg">
<img width="300" height="200" class="img-test" src="../assets/test1.jpeg">
<img class="img-box" width="300" height="200" src="../assets/test1.jpeg">
.img-box {
height: 100px;
width: 200px;
}
Эффект следующий:
Первое изображение: по умолчанию отображается исходный размер изображения 267 * 200;
Второе изображение: Установите ширину и высоту размера HTML и отобразите изображение 300 * 200;
Третье изображение: размер CSS установлен на 200 * 100.
Видно, что приоритетом правила отображения размера является размер CSS > размер HTML > собственный размер.
Какова связь между замещающими элементами и содержанием?
Замещающий элемент является замещающим элементом, потому что его содержимое является заменяемым, то есть блок содержимого в блочной модели является заменяемым. Свойство content в CSS используется для замены контента.Можно также сказать, что свойство content определяет, заменять ли элемент или незаменяемый элемент. код показывает, как показано ниже:
<img width="300" height="200" class="img-test" src="../assets/test1.jpeg">
.img-test:hover {
content: url('../assets/test2.jpg');
}
Эффект следующий:В это время, когда мышь зависает, изображение имеет вид «../assets/test2.jpg», а свойство содержимого img используется для замены поля содержимого.
Следует отметить, что атрибут содержимого изменяет только визуальное представление, когда мы сохраняем изображение с помощью щелчка правой кнопкой мыши или других форм, изображение, соответствующее исходному src, все еще сохраняется.
Сценарии использования контента
Как упоминалось в определении контента, он используется в сочетании с псевдоэлементами :before и :after. :before и :after — самые распространенные псевдоэлементы, с которыми должен быть знаком каждый.
Затем кратко представим :before и :after:
- Отображение по умолчанию: встроенный;
- Атрибут содержимого должен быть установлен, иначе он недействителен;
- Пользовательский выбор по умолчанию: нет, то есть содержимое :before и :after не может быть выбрано пользователем;
- Он недоступен через dom, то есть элементы страницы, которые не существуют сами по себе, их нельзя найти в исходном коде HTML, но визуально их можно увидеть.
Рассмотрим основные сценарии использования:
вставить символ
Использование содержимого для вставки символов обычно устанавливает значение по умолчанию для пустых элементов, аналогично атрибуту заполнителя ввода, который отображается только в том случае, если элемент не имеет содержимого.Код выглядит следующим образом:
<p>有内容的段落</p>
<p></p>
<!--:empty 是一个 CSS 选择器，当元素里面无内容的时候进行匹配-->
p:empty::before {
content: '空元素内容';
color: red;
}
Эффект следующий:
Генерация вспомогательных элементов
На данный момент ключевым моментом является не контент, генерируемый контентом, а сам псевдоэлемент. Обычно мы размещаем контент значением свойства задается пустая строка, а другой код CSS используется для создания вспомогательных элементов, или для достижения графических эффектов, или для достижения определенного макета.
Графические эффекты
Используйте псевдоэлемент ::after, чтобы вставить анонимный элемент замены, установите пустое содержимое, этот элемент не имеет содержимого и используйте стили CSS для достижения желаемого графического эффекта. код показывает, как показано ниже:
<div class="content-box"></div>
.content-box {
height: 100px;
width: 200px;
border-radius: 10px;
position: relative;
background: #fff;
}
.content-box::after {
content: '';
position: absolute;
top: 100%;
right: 16px;
width: 4px;
height: 16px;
border-width: 0;
border-right: 12px solid #fff;
border-radius: 0 0 32px 0;
}
Эффект следующий:
очистить поплавок
Основная цель очистки плавающего элемента — решить проблему, заключающуюся в том, что внутренняя высота родительского элемента равна 0 из-за плавающего элемента дочернего элемента Код выглядит следующим образом:
<div class="info-box clear">
<div class="left">左</div>
<div class="right">右</div>
</div>
.clear::after {
content: '';
display: block;
clear: both;
}
Все три вышеперечисленных обязательны:
- content: '': Добавить пустой псевдоэлемент к элементу через ::after.
- clear: Both: Очистить float, чтобы ни одна из сторон элемента не плавала.
- display: block: clear работает только с элементами блочного уровня.
Добавляя элементы для очистки плавающего элемента, коснитесь BFC, чтобы высота элемента могла быть адаптирована к высоте подблока.
генерация изображения
Прямые символы функции URL с отображением изображений, либо до, либо после текста добавляют изображения, а текст можно заменить напрямую.
Картинка сразу заменяет текст, код такой:
<p class="img-test">文字</p>
.img-test {
display: block;
height: 20px;
width: 20px;
border-radius: 100%;
content: url('../assets/test2.jpg');
}
Добавьте картинки до и после текста, код такой:
<!--方案一 -->
.img-test::after {
content: url('../assets/test2.jpg');
}
<!--方案二 -->
.img-test::after {
content: '';
display: block;
height: 20px;
width: 20px;
background: url('../assets/test2.jpg');
}
В схеме 1 псевдоэлемент задает изображение через содержимое, размер изображения нелегко контролировать, а отображаемое изображение имеет исходный размер, который относительно размыт.Как правило, используется фоновое изображение схемы 2, и размер может быть установлен по мере необходимости.
Генерация содержимого значения атрибута attr
Используйте attr для получения значения атрибута элемента для достижения эффекта, обычно используемого для получения соединения тега a, код выглядит следующим образом:
<a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a>
.baidu-link::after {
content: " (" attr(href) ") "
}
Эффект следующий:
генерация контента персонажа
content Генерация содержимого символов заключается в непосредственном написании содержимого символов, могут использоваться как китайский, так и английский языки.Более распространенное применение заключается в сотрудничестве с правилом @font-face для достижения эффекта шрифта значка.
Правила @font-face
Правило @font-face указывает пользовательский шрифт для отображения текста; шрифт может быть загружен с удаленного сервера или из шрифта, установленного локально пользователем. Его свойства аналогичны шрифтам, а именно:
| дескриптор шрифта | описывать |
|---|---|
| font-family | Обязательно: указанное имя шрифта будет использоваться для свойства шрифта или семейства шрифтов. |
| src | Требуется: URL-адрес удаленного расположения файла шрифта или имя шрифта на компьютере пользователя. |
| font-style | стиль для шрифта, на который указывает src |
| font-weight | вес шрифта |
| font-stretch | Определите, как шрифт должен быть растянут |
| unicode-range | Шрифт поддерживает диапазон символов Unicode. |
Код, использующий правило @font-face, выглядит следующим образом:
<!--format 属性是帮助浏览器识别字体的-->
@font-face {font-family: "iconfont";
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
<!--html-->
<div class="look-more">查看更多</div>
<!--css-->
.look-more {
font-size: 14px;
&::after {
font-size: 14px;
font-family: 'iconfont';
content: '\e6a7';
}
}
Эффект следующий:
Как показано выше, стрелка за «Просмотреть больше» — это значок шрифта, определенный выше.
Конечно, @font-face также имеет неизбежные проблемы с совместимостью, вы можете использовать это правило по мере необходимости.
прилавок
Счетчик содержимого использует код CSS для достижения эффекта, при котором по мере увеличения количества элементов значение также увеличивается. Очень мощный, практичный и незаменимый.
Счетчик содержит два свойства и один метод:
- counter-reset: Значение «counter-reset», основная функция состоит в том, чтобы дать счетчику имя. Также сообщает, с какого числа начинать отсчет, значение по умолчанию равно 0, значение может быть отрицательным.
<!--计数器名字为 counter，默认值为 0-->
.count-test { counter-reset: counter; }
<!--计数器名字为 counter，初始计数为 2-->
.count-test { counter-reset: counter 2; }
<!--多个计数器同时命名，使用空格分隔-->
.count-test { counter-reset: counter 2 counterpre -1; }
- counterincrement: Значение «приращения счетчика», значение равно 1 или более ключевым словам сброса счетчика, за которыми следует число, указывающее значение изменения каждого счетчика, значение изменения по умолчанию равно 1, и значение может быть отрицательным.
<!--counter 计数器默认递增 1-->
counter-increment: counter;
<!--counter 计数器递增 2-->
counter-increment: counter 2;
<!--counter 计数器递增 2，counterpre 计数器递减 -1-->
counter-increment: counter 2 counterpre -1;
«Универсальное правило освещения»: сброс счетчика уникален, а приращение счетчика увеличивает значение счетчика один раз за приращение счетчика.
<p class="counter"></p>
<!--counter-increment 普照源 <p> 标签，初始值为 2，counter-reset 值增加，默认递增 1，最终显示为 3-->
.counter {
counter-reset: counter 2;
counter-increment: counter;
}
.counter:before {
content: counter(counter);
}
<!-- counter-increment 直接设置在伪元素上普照自身，和上述一样显示 3-->
.counter {
counter-reset: counter 2;
}
.counter:before {
counter-increment: counter;
content: counter(counter);
}
<!--父元素和子元素都被 counter-increment 普照 1 次，递增了两次，最终显示为 4-->
.counter {
counter-reset: counter 2;
counter-increment: counter;
}
.counter:before {
counter-increment: counter;
content: counter(counter);
}
- counter()/counters(): оба являются методами подсчета, отображают счетчики, а счетчики используются для вложенных счетчиков.
<!--name 就是 counter-reset 的名称-->
counter(name)
<!--style 值就是 list-style-type 支持的那些值，可以是英文等-->
counter(name, style)
<!--string 参数为字符串（需要引号包围的，是必需参数），表示子序号的连接字符串。例如，1.1 的 string 就是'.'，1-1 就是'-'-->
counters(name, string)
counters(name, string, style)
Обычно он используется для подсчета похожих каталогов и регулярных изменений.Ниже приведен пример иерархического каталога.Код выглядит следующим образом:
<div class="reset">
<div class="counter">替换元素
<div class="reset">
<div class="counter">替换元素的尺寸计算规则</div>
<div class="counter">替换元素和 content 是什么关系呢？</div>
</div>
</div>
<div class="counter">content 的使用场景
<div class="reset">
<div class="counter">插入字符</div>
<div class="counter">辅助元素生成</div>
<div class="counter">图片生成</div>
<div class="counter">attr 属性值内容生成</div>
<div class="counter">字符内容生成</div>
<div class="counter">计数器</div>
</div>
</div>
</div>
.reset {
counter-reset: counter;
}
.counter:before {
content: counters(counter, '.') '. ';
counter-increment: counter;
}
- Значение счетчика по умолчанию равно 0, а приращение по умолчанию равно 1;
- Первый сброс имеет две метки одноуровневого счетчика, увеличенные на 1 и 2;
- Под первым счетчиком находится метка сброса, а слой счетчика сброса вложен, поэтому есть 1.1, 1.2 и т. д.;
- Точно так же есть 2,1, 2,2 и т. д. ниже второго счетчика.
Эффект следующий:
Суммировать
Зная свойство контента CSS, макет имеет больше возможностей, и полезно использовать некоторые навыки макета по мере необходимости в повседневной разработке, чтобы сделать маниферу и ясную.