Давно откладывался.Не обращайте внимания на моих младших братьев и сестер.Наконец-то вышли нерегулярно обновляемые 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>
визуализация
Восемь, многогранник
Первый на карте эффектов
Пространство ограничено, рендеры единичные, заинтересовавшиеся младшие братья и сестры могут сами настроить другие эффекты.Вариант первый: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>
Функции
-
outline
не подлежитborder-radius
Влияние (можно сделать квадратную рамку и закругленную рамку) -
outline
иborder
так же, как возможнопользовательский стиль границы - в состоянии пройти
outline-offset
Управляет положением контура - Ограниченное количество границ (плюс
::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
Рекомендации:
Когда вам нужны два вида бордюров и многостилевые бордюры, вы можете сначала использовать схему 1. Если вам нужны градиентные бордюры и многослойные бордюры, вы можете использовать схему 2. Хотя схема 1 может использовать до 8 видов бордюров после использования псевдоэлементы, существует много кодов стилей, поэтому это не рекомендуется.Конечно, для конкретной ситуации использования вы можете сделать мультифреймы в соответствии с вашими реальными потребностями, или вы можете комбинировать схему 1 и схему 2
благодарный@Vinseaпредложение
9. БФК
Что такое БФК
Определение W3C: Плавающие, абсолютно позиционированные элементы, встроенные блоки, ячейки таблицы, заголовки таблиц и элементы переполнения, значение которых не видно (за исключением случаев, когда значение было передано в окно просмотра), создадут новый формат уровня блока вверх и вниз. вниз
условия производства
-
float
Значение неnone
-
position
Значение неstatic
илиrelative
-
display
значениеtable-cell
,table-caption
,inline-block
,flex
, илиinline-flex
один из -
overflow
Значение неvisible
-
display:flow-root
: Самый безопасный и без побочных эффектов (носовместимыйГоловная боль)
характеристика
- Внутренние ящики располагаются вертикально друг за другом, начиная сверху.
- Вертикальное расстояние Box определяется полем. Поля двух соседних блоков, принадлежащих одному и тому же BFC, будут наложены друг на друга.
- Левая сторона поля поля каждого элемента и граница содержащего блока
- Левая сторона поля соприкасается (для форматирования слева направо, иначе наоборот). Это верно, даже если есть поплавки.
- Область BFC не пересекается с поплавком.
- BFC — это изолированный и независимый контейнер на странице. Дочерние элементы внутри контейнера не будут влиять на внешние элементы, и наоборот.
- При расчете высоты БФК в расчете также участвует плавающий элемент
сцены, которые будут использоваться
- Используется для очистки поплавка, расчета высоты 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>
- Адаптивный двухколоночный макет
<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>
- Решить проблему с наложением полей
Количество мест ограничено, если вы хотите узнать больше, вы можете перейти кw3cplus BFC подробное объяснение
благодарный@Байкао Гарденпредложение
10. Новое поколение операций с переменными (пользовательские свойства CSS)
визуализация
Извините еще раз за картинку музыкального плеера, просто потому что я люблю слушать музыку
код (то, что я использую в музыкальном проигрывателе)
- Корневой элемент устанавливает глобальные настраиваемые атрибуты
:root {
--THEME: var(--USER-THEME-COLOR, #e5473c);
--THEME-COLOR: var(--USER-THEME-COLOR, #e5473c);
}
- Установите для глобального пользовательского свойства значение
SASS
Переменная
$theme-color: var(--THEME);
$theme-bg: var(--THEME);
- зачем использовать
SASS
Переменные как носители пользовательских свойств -
- Простота управления (унифицированный файл var.scss для записи переменных темы)
-
- Избегайте прямого изменения глобальных настраиваемых свойств
- 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
Отображаемый адрес музыкального проигрывателя
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>
визуализация
принцип:
использоватьCSS3
фильтрfilter
серединаdrop-shadow
.
-
drop-shadow
Фильтры могут добавлять тени к элементам или непрозрачным областям изображения. - Применение тени без размытия к значку PNG с прозрачным фоном эквивалентно созданию значка другого цвета.
- пройти снова
overflow:hidden
и обработка смещения, чтобы скрыть исходный значок
PS: я протестировал большинство устройств, и они все еще работают, но то, что я написалдемо (реагирующий музыкальный плеер)Это включает в себя множество странных трюков, поэтому я все еще не упоминаю
Оригинальный адрес: плодовитый Чжан Синьсюй
благодарный
Личная домашняя страница Чжан Синьсюй
w3cplus_Лидер Интернета, создание превосходных руководств по интерфейсу
Tips
Когда вы сталкиваетесь с проблемами макета, вы можете перейти к основнымUI
Фреймворк просматривает код эффекта, которого вы хотите достичь, и смотрит, как они его решают.Ямы, с которыми я столкнулся в макете стиля, в основном исправляются так, если только это не очень редко, это можно решить таким образом.
Ссылка на последний выпуск -- хитрости CSS, которые время от времени обновляются (1)