update
This commit is contained in:
539943419 committed
1 parent
8d75346c80
commit
7434accb0e
7 files changed
+614
-187
No files matched your search
+191
-158
@@ -1,194 +1,227 @@
|
||||
# 与 css 相关，多学习 css
|
||||
|
||||
## css inset
|
||||
- inset : top | right| bottom | left
|
||||
- 使用例：
|
||||
```css
|
||||
.className {
|
||||
inset: 4px 8px; /* 上下 | 左右 */
|
||||
inset: 5px 15px 10px; /* 上 | 左右 | 下 */
|
||||
inset: 2.4em 3em 3em 3em; /* 上 | 右 | 下 | 左 */
|
||||
}
|
||||
```
|
||||
|
||||
- 同时设置上下左右等多个属性值
|
||||
- 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;
|
||||
- 有 transition-property、transition-duration、transition-timing-function 和 transition-delay 这几个属性，不过一般使用时应该都是用 transition 合起来写。
|
||||
- 使用例：
|
||||
|
||||
/* Apply to 2 properties */
|
||||
transition: margin-right 4s, color 1s;
|
||||
}
|
||||
```
|
||||
```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
|
||||
- 有时间再写
|
||||
|
||||
- animation-timeline
|
||||
- 有时间再写
|
||||
|
||||
## css 动画
|
||||
|
||||
- 分为“定义”与“使用”两个阶段。
|
||||
- “定义”阶段的 keyword 为@keyframes，例：
|
||||
- 分为“定义”与“使用”两个阶段。
|
||||
- “定义”阶段的 keyword 为@keyframes，例：
|
||||
|
||||
```scss
|
||||
// 每个时间点填对应时间点的style
|
||||
@keyframes animationName {
|
||||
0% {
|
||||
border-radius: 1px;
|
||||
}
|
||||
50% {
|
||||
border-radius: 12px;
|
||||
}
|
||||
100% {
|
||||
border-radius: 123px;
|
||||
}
|
||||
}
|
||||
```
|
||||
```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 有许多属性
|
||||
- “使用”阶段的 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...;
|
||||
}
|
||||
```
|
||||
```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>`
|
||||
- 伪元素不支持嵌套，也就是说伪元素的父元素不可以为伪元素
|
||||
使用例：
|
||||
- 伪元素，通过 content 来指定内容，before 就是在前面，after 就是在后面（哇好有道理呢）
|
||||
- 用途一般是加个 icon 啥的，content 可以为 url(...)
|
||||
- 不能应用在替换元素上，比如 `<img>`
|
||||
- 伪元素不支持嵌套，也就是说伪元素的父元素不可以为伪元素
|
||||
使用例：
|
||||
|
||||
```css
|
||||
a {
|
||||
color: #0000ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
```css
|
||||
a {
|
||||
color: #0000ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a::before {
|
||||
content: '🔗';
|
||||
}
|
||||
```
|
||||
a::before {
|
||||
content: '🔗';
|
||||
}
|
||||
```
|
||||
|
||||
- 使用 inherit 使子元素拥有与父元素相同的特定属性值
|
||||
使用例：
|
||||
- 使用 inherit 使子元素拥有与父元素相同的特定属性值
|
||||
使用例：
|
||||
|
||||
```css
|
||||
div {
|
||||
position: relative;
|
||||
background: url('your-image-url.jpg');
|
||||
}
|
||||
```css
|
||||
div {
|
||||
position: relative;
|
||||
background: url('your-image-url.jpg');
|
||||
}
|
||||
|
||||
div::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
div::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
## !important 相关
|
||||
|
||||
- 不到万不得已不要用，是不好的写法
|
||||
- 如果你的 important 不够 important,那可以写 class 的时候多写点前缀，例：
|
||||
- 不到万不得已不要用，是不好的写法
|
||||
- 如果你的 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;
|
||||
}
|
||||
```
|
||||
```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
|
||||
a {
|
||||
color: blue;
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 以 "#" 开头的页面内部链接 */
|
||||
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;
|
||||
.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
|
||||
|
||||
- 属性不一定要是 href 什么的，自己定也没关系。
|
||||
- 案例：
|
||||
当为none时，所有点击事件无效
|
||||
|
||||
```css
|
||||
/* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
|
||||
div[lang] {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 将所有语言为美式英语的 <div> 元素的文本颜色设为蓝色 */
|
||||
div[lang~='en-us'] {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
/* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
|
||||
div[lang='pt'] {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
##
|
||||
Reference in new issue
Block a user