Нерегулярно обновляемые приемы CSS (2)

внешний интерфейс Ресурсы изображений Icon CSS
Нерегулярно обновляемые приемы CSS (2)

Давно откладывался.Не обращайте внимания на моих младших братьев и сестер.Наконец-то вышли нерегулярно обновляемые CSS-трюки(2), которые сегодня умерли бы в младенчестве (черновик пролежал месяц).Эта статья может содержат много воды.Если у вас есть какие-либо вопросы, пожалуйста, предложите мне, я буду постепенно сливать его

7. Абсолютное дно CSS

Код:

方案一:原理————正(padding)负(margin)抵消法
<style>
* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
}
#wrap {
    height: auto; 
    min-height: 100%;
}
#main {
    padding-bottom: 150px; /* 和footer相同的高度 */
}  
#footer {
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
	background: #0c8ed9
}
</style>

<div id="wrap">
    <div id="main">正文</div>
</div>
<div id="footer">底部</div> <!--底部和外层同级-->

方案二:原理———— flex 布局
<style>
* {
    margin: 0;
    padding: 0;
}
#wrap {
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
}
#main {
    flex:1;
}  
#footer {
    height: 150px;
	background: #0c8ed9
}
</style>
<div id="wrap">
    <div id="main">正文</div>
    <div id="footer">底部</div>
</div>

визуализация

CSS 绝对底部

Восемь, многогранник

Первый на карте эффектов

`border + outline` (伪元素) 方案
Пространство ограничено, рендеры единичные, заинтересовавшиеся младшие братья и сестры могут сами настроить другие эффекты.

Вариант первый:border + outline(псевдоэлементная) схема

Код:
<style>
* {
    padding: 0;
    margin: 0;
}
body {
    margin: 150px;
}
.one-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 310px;
    height: 310px;
}
/*
 * 由于使用伪元素和 outline 制作的边框是脱离文档流的,建议再套一个 div 并使用水平垂直居中 防止影响其他样式
 */
.one {
    width: 150px;
    height: 150px;
    position: relative;
    background-color: #999;
    border: 10px double #ff0000;
    outline: 10px solid rgb(255, 136, 0);
    outline-offset: 0px; /* 控制 outline 的偏移位置 */
}
.one::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    bottom: -40px;
    left: -40px;
    z-index: -1;
    background-color: #f7fc00;
    background-clip: content-box; /* 当使用伪元素的背景做为边框时需要使用该属性控制背景的区域 */
    border: 10px dashed rgb(56, 252, 8);
    outline: 10px inset rgb(3, 194, 252);
}
.one::after {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    bottom: -70px;
    left: -70px;
    z-index: -2;
    background-color: #fc000d;
    background-clip: content-box; /* 当使用伪元素的背景做为边框时需要使用该属性控制背景的区域 */
    border: 10px dotted rgb(56, 252, 8);
    outline: 10px outset rgb(252, 3, 177);
}
</style>
<div class="one-box">
    <div class="one">方案一</div>
</div>
Функции
  1. outlineне подлежитborder-radiusВлияние (можно сделать квадратную рамку и закругленную рамку)
  2. outlineиborderтак же, как возможнопользовательский стиль границы
  3. в состоянии пройтиoutline-offsetУправляет положением контура
  4. Ограниченное количество границ (плюс::before / ::afterизbackground / border / outlineдо 8 границ)

Вариант 2:box-shadowплан

Код:
<style>
* {
    padding: 0;
    margin: 0;
}
body {
    margin: 150px;
}
.two {
    width: 150px;
    height: 150px;
    padding: 110px;
    background-color: #999;
    box-shadow:inset 0 0 0 10px #ff0000,
               inset 0 0 0 20px rgb(255, 136, 0),
               inset 0 0 0 30px rgb(166, 255, 0),
               inset 0 0 0 40px rgb(0, 102, 255),
               inset 0 0 0 50px rgb(255, 0, 221),
               inset 0 0 0 60px rgb(0, 255, 191),
               inset 0 0 0 70px rgb(225, 0, 255),
               inset 0 0 0 80px rgb(81, 255, 0),
               inset 0 0 0 90px rgb(255, 0, 106),
               inset 0 0 0 100px rgb(255, 153, 0),
               inset 0 0 0 110px rgb(30, 255, 0);
    /*
     *对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
     */
}
</style>
<div class="two"></div>
Функции
  1. одиночный стиль границы
  2. Можно делать градиентные границы
  3. Можно сделать закругленные границы
  4. Количество бордюров не так ограничено, как на схеме 1

Рекомендации:

Когда вам нужны два вида бордюров и многостилевые бордюры, вы можете сначала использовать схему 1. Если вам нужны градиентные бордюры и многослойные бордюры, вы можете использовать схему 2. Хотя схема 1 может использовать до 8 видов бордюров после использования псевдоэлементы, существует много кодов стилей, поэтому это не рекомендуется.Конечно, для конкретной ситуации использования вы можете сделать мультифреймы в соответствии с вашими реальными потребностями, или вы можете комбинировать схему 1 и схему 2

благодарный@Vinseaпредложение

9. БФК

Что такое БФК

Определение W3C: Плавающие, абсолютно позиционированные элементы, встроенные блоки, ячейки таблицы, заголовки таблиц и элементы переполнения, значение которых не видно (за исключением случаев, когда значение было передано в окно просмотра), создадут новый формат уровня блока вверх и вниз. вниз

условия производства

  1. floatЗначение неnone
  2. positionЗначение неstaticилиrelative
  3. displayзначениеtable-cell, table-caption, inline-block, flex, илиinline-flexодин из
  4. overflowЗначение неvisible
  5. display:flow-root: Самый безопасный и без побочных эффектов (носовместимыйГоловная боль)

характеристика

  1. Внутренние ящики располагаются вертикально друг за другом, начиная сверху.
  2. Вертикальное расстояние Box определяется полем. Поля двух соседних блоков, принадлежащих одному и тому же BFC, будут наложены друг на друга.
  3. Левая сторона поля поля каждого элемента и граница содержащего блока
  4. Левая сторона поля соприкасается (для форматирования слева направо, иначе наоборот). Это верно, даже если есть поплавки.
  5. Область BFC не пересекается с поплавком.
  6. BFC — это изолированный и независимый контейнер на странице. Дочерние элементы внутри контейнера не будут влиять на внешние элементы, и наоборот.
  7. При расчете высоты БФК в расчете также участвует плавающий элемент

сцены, которые будут использоваться

  1. Используется для очистки поплавка, расчета высоты BFC
ul {
    overflow: hidden; /*创建 BFC */
}
li {
    float: left;
    width: 100px;
    height: 200px;
    background-color: #f7fc00;
    overflow: hidden;
}
li:first-child{
    background-color: #fc000d;
}
</style>
<ul>
    <li></li>
    <li></li>
</ul>
  1. Адаптивный двухколоночный макет
<style>
.aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #ff0000;
}
.main {
    height: 200px;
    background: #f7fc00;
    overflow: hidden; /*创建 BFC */
}
</style>
<div class="aside"></div>
<div class="main"></div>
  1. Решить проблему с наложением полей

Количество мест ограничено, если вы хотите узнать больше, вы можете перейти кw3cplus BFC подробное объяснение

благодарный@Байкао Гарденпредложение

10. Новое поколение операций с переменными (пользовательские свойства CSS)

визуализация

Извините еще раз за картинку музыкального плеера, просто потому что я люблю слушать музыку

效果图

код (то, что я использую в музыкальном проигрывателе)

  1. Корневой элемент устанавливает глобальные настраиваемые атрибуты
:root {
	--THEME: var(--USER-THEME-COLOR, #e5473c);
	--THEME-COLOR: var(--USER-THEME-COLOR, #e5473c);
}
  1. Установите для глобального пользовательского свойства значениеSASSПеременная
$theme-color: var(--THEME);
$theme-bg: var(--THEME);
  • зачем использоватьSASSПеременные как носители пользовательских свойств
    1. Простота управления (унифицированный файл var.scss для записи переменных темы)
    1. Избегайте прямого изменения глобальных настраиваемых свойств
  1. JS изменяет глобальные пользовательские свойства
const elm = document.documentElement
const colorArr = ['#e5473c', '#31c27c', '#0c8ed9', '#f60']
elm.style.setProperty('--USER-THEME-COLOR', colorArr[i])
i = (i + 1) % colorArr.length

Больше введения ==>Руководство по использованию пользовательских свойств CSS

Отображение адреса Github

Отображаемый адрес музыкального проигрывателя

11. CSS-технология произвольного присвоения цвета маленьким иконкам в формате PNG

Код:

<style>
.icon-color{
	display: inline-block;
	width: 144px;
	height: 144px;
	background: url('https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/7/31/164f0e6745afe2ba~tplv-t2oaga2asx-image.image') no-repeat center / cover;
	overflow: hidden;
}
.icon-color:after{
	content: '';
	display: block;
	height: 100%;
	transform: translateX(-100%);
	background: inherit;
	filter: drop-shadow(144px 0 0 #42b983); // 需要修改的颜色值
}
</style>

<i class="icon-color"></i>

визуализация

PNG 格式小图标的 CSS 任意颜色赋色技术

принцип:

использоватьCSS3фильтрfilterсерединаdrop-shadow.

  1. drop-shadowФильтры могут добавлять тени к элементам или непрозрачным областям изображения.
  2. Применение тени без размытия к значку PNG с прозрачным фоном эквивалентно созданию значка другого цвета.
  3. пройти сноваoverflow:hiddenи обработка смещения, чтобы скрыть исходный значок

PS: я протестировал большинство устройств, и они все еще работают, но то, что я написалдемо (реагирующий музыкальный плеер)Это включает в себя множество странных трюков, поэтому я все еще не упоминаю

Оригинальный адрес: плодовитый Чжан Синьсюй

благодарный

Личная домашняя страница Чжан Синьсюй

w3cplus_Лидер Интернета, создание превосходных руководств по интерфейсу

Tips

Когда вы сталкиваетесь с проблемами макета, вы можете перейти к основнымUIФреймворк просматривает код эффекта, которого вы хотите достичь, и смотрит, как они его решают.Ямы, с которыми я столкнулся в макете стиля, в основном исправляются так, если только это не очень редко, это можно решить таким образом.

Ссылка на последний выпуск -- хитрости CSS, которые время от времени обновляются (1)