227 lines
5.1 KiB
Markdown
227 lines
5.1 KiB
Markdown
# 与 css 相关，多学习 css
|
|
|
|
## css inset
|
|
|
|
- 同时设置上下左右等多个属性值
|
|
- inset : top | right| bottom | left
|
|
- 使用例：
|
|
```css
|
|
.className {
|
|
inset: 4px 8px; /* 上下 | 左右 */
|
|
inset: 5px 15px 10px; /* 上 | 左右 | 下 */
|
|
inset: 2.4em 3em 3em 3em; /* 上 | 右 | 下 | 左 */
|
|
}
|
|
```
|
|
|
|
## css 过渡 transition
|
|
|
|
- 有 transition-property、transition-duration、transition-timing-function 和 transition-delay 这几个属性，不过一般使用时应该都是用 transition 合起来写。
|
|
- 使用例：
|
|
|
|
```css
|
|
.className {
|
|
/* property name | duration | timing function | delay */
|
|
transition: margin-right 4s ease-in-out 1s;
|
|
|
|
/* Apply to 2 properties */
|
|
transition: margin-right 4s, color 1s;
|
|
}
|
|
```
|
|
|
|
## css 动画 滚动条驱动
|
|
|
|
- animation-timeline
|
|
- 有时间再写
|
|
|
|
## css 动画
|
|
|
|
- 分为“定义”与“使用”两个阶段。
|
|
- “定义”阶段的 keyword 为@keyframes，例：
|
|
|
|
```scss
|
|
// 每个时间点填对应时间点的style
|
|
@keyframes animationName {
|
|
0% {
|
|
border-radius: 1px;
|
|
}
|
|
50% {
|
|
border-radius: 12px;
|
|
}
|
|
100% {
|
|
border-radius: 123px;
|
|
}
|
|
}
|
|
```
|
|
|
|
- “使用”阶段的 keyword 为 animation，使用 animation 绑定动画，例
|
|
```scss
|
|
div {
|
|
animation: animationName 5s;
|
|
}
|
|
```
|
|
- animation 有许多属性
|
|
|
|
```scss
|
|
div {
|
|
// 绑定的动画名
|
|
animation-name: animationName;
|
|
// 动画执行总时长
|
|
animation-duration: 5s;
|
|
// 速度曲线。默认是 "ease"。
|
|
animation-timing-function: linear;
|
|
animation-delay: 2s;
|
|
// 播放次数，默认1
|
|
animation-iteration-count: infinite;
|
|
// 是否在下一个周期逆向播放
|
|
animation-direction: alternate;
|
|
// 是否正在播放（）
|
|
animation-play-state: running;
|
|
// 简写
|
|
animation: animationName 5s linear 2s infinite alternate;
|
|
// 多个动画之间使用逗号进行隔开
|
|
animation: a1..., a2...;
|
|
}
|
|
```
|
|
|
|
## before 与 after
|
|
|
|
- 伪元素，通过 content 来指定内容，before 就是在前面，after 就是在后面（哇好有道理呢）
|
|
- 用途一般是加个 icon 啥的，content 可以为 url(...)
|
|
- 不能应用在替换元素上，比如 `<img>`
|
|
- 伪元素不支持嵌套，也就是说伪元素的父元素不可以为伪元素
|
|
使用例：
|
|
|
|
```css
|
|
a {
|
|
color: #0000ff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a::before {
|
|
content: '🔗';
|
|
}
|
|
```
|
|
|
|
- 使用 inherit 使子元素拥有与父元素相同的特定属性值
|
|
使用例：
|
|
|
|
```css
|
|
div {
|
|
position: relative;
|
|
background: url('your-image-url.jpg');
|
|
}
|
|
|
|
div::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: inherit;
|
|
z-index: -1;
|
|
}
|
|
```
|
|
|
|
## !important 相关
|
|
|
|
- 不到万不得已不要用，是不好的写法
|
|
- 如果你的 important 不够 important,那可以写 class 的时候多写点前缀，例：
|
|
|
|
```scss
|
|
// 一般
|
|
.ant-slider-rail {
|
|
background-color: rgb(141, 93, 56) !important;
|
|
}
|
|
// 优先级特别高
|
|
.slider .ant-slider .ant-slider-rail {
|
|
background-color: rgb(141, 93, 56) !important;
|
|
}
|
|
```
|
|
|
|
## xx[a=xxx]的使用
|
|
|
|
- 这玩意叫属性选择器
|
|
- 案例：
|
|
|
|
```css
|
|
a {
|
|
color: blue;
|
|
}
|
|
|
|
/* 以 "#" 开头的页面内部链接 */
|
|
a[href^='#'] {
|
|
background-color: gold;
|
|
}
|
|
|
|
/* 包含 "example" 的链接 */
|
|
a[href*='example'] {
|
|
background-color: silver;
|
|
}
|
|
|
|
/* 包含 "insensitive" 的链接，不区分大小写 */
|
|
a[href*='insensitive' i] {
|
|
color: cyan;
|
|
}
|
|
|
|
/* 包含 "cAsE" 的链接，区分大小写 */
|
|
a[href*='cAsE' s] {
|
|
color: pink;
|
|
}
|
|
|
|
/* 以 ".org" 结尾的链接 */
|
|
a[href$='.org'] {
|
|
color: red;
|
|
}
|
|
|
|
/* 以 "https" 开始，".org" 结尾的链接 */
|
|
a[href^='https'][href$='.org'] {
|
|
color: green;
|
|
}
|
|
```
|
|
|
|
- 属性不一定要是 href 什么的，自己定也没关系。
|
|
- 案例：
|
|
|
|
```css
|
|
/* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
|
|
div[lang] {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 将所有语言为美式英语的 <div> 元素的文本颜色设为蓝色 */
|
|
div[lang~='en-us'] {
|
|
color: blue;
|
|
}
|
|
|
|
/* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
|
|
div[lang='pt'] {
|
|
color: green;
|
|
}
|
|
```
|
|
|
|
## grid
|
|
|
|
```css
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 100px 20px 80px);
|
|
/* repeat 配合auto-fill/auto-fit 配合minmax 实现自适应布局 */
|
|
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
|
|
grid-row-gap: 20px;
|
|
grid-column-gap: 20px;
|
|
/* 先行后列，尽可能填满 */
|
|
grid-auto-flow: row dense;
|
|
}
|
|
.item-1 {
|
|
/* 边框所对应的网格线 */
|
|
/* grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。 */
|
|
grid-column-start: 2;
|
|
grid-column-end: 4;
|
|
grid-column: 2/4;
|
|
grid-row: 1/2;
|
|
}
|
|
```
|
|
## point-event
|
|
|
|
当为none时，所有点击事件无效
|
|
|
|
## |