1
2
3
| top:50%;
left:50%;
transform: translate(-50%, -50%);
|
1
2
3
4
5
| .class{
display:flex;
justify-content:flex-start;
align-items:center;
}
|
1
| outline: 9999px solid rgba(0,0,0,.76);
|
1
2
3
4
5
6
7
8
9
10
11
12
| overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
word-wrap:break-word;
word-break:break-all;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
word-wrap:break-word;
word-break:break-all;
|
1
2
| flex-grow: 0;
flex-shrink:0;
|
-webkit-overflow-scrolling : touch;
.className::-webkit-input-placeholder {
color: #B7B7B7;
}
各个参数的含义：linear-gradient(方向, 开始颜色 大小, 结束颜色 大小);
1
2
3
| .node {
background-image: linear-gradient(to right, #000 1px, transparent 0px);
}
|
1
2
3
4
5
6
| .node {
background-image: linear-gradient(to right, #000 1px, transparent 0px);
background-size: 1px 50%;
background-position-y: 50%;
background-repeat: no-repeat;
}
|
这段样式可以画半个左边框。其中用到了渐变色属性。
1
2
3
4
5
6
7
8
9
10
| .text{
background-image: -webkit-gradient(linear,0% 0%,25% 100%,from(#ff2c2c),to(#7a5e91));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
span {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
|
1
2
3
| input,textarea{
-webkit-appearance: none;
}
|
在标准文档流中，竖直方向的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。
margin的塌陷现象分两种情况：
1.兄弟关系的盒子：
比如ul的li，相邻的li之间的margin会重叠取较大的一个;
2.父子关系的盒子。
子盒子的margin-top大于父盒子时，子的margin-top会覆盖父的。
解决方法：
当给父盒子设置边框或padding时，不会出现父子盒子的塌陷现象。
当父盒子设置display:flex;时，不会出现这2种坍塌现象。
!important最高
行内style属性 > 内联style标签 > 外联css文件
id > class > tag
计算：
行内style属性 = 1000
ID选择器 = 100
类选择器、属性选择器、伪类 = 10
元素/伪元素 = 1
*通配选择器 = 0
伪元素：
::before
::after
::placeholder
::first-line
伪类：
:first-child
:nth-child
:empty
解决方法：在这些inline-block元素的父元素设置样式——fontsize：0；
1
2
3
4
5
6
7
8
9
10
11
| #wrapper {
display: table;
width: 100%;
height: 100%;
}
#centred {
display: table-cell;
vertical-align: middle;
text-align: center;
}
|
.a{
width:596px;
text-align:justify;
text-align-last:justify;
}
background-attachment: fixed;
1
| filter: grayscale(100%);
|
1
2
3
4
5
6
7
8
9
| .error {
border: 1px #f00;
background-color: #fdd;
&--serious {
@extend .error;
border-width: 3px;
}
}
|
在vscode的配置文件中加这个：
"css.lint.unknownProperties": "ignore"
clip-path: inset(0 10px 0 10px);
这个可以剪裁元素内容，依次为上右下左，以边缘为起点，剪裁掉这么多宽度。
参考：https://www.zhangxinxu.com/wordpress/2014/12/css3-svg-clip-path/
和：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
body::-webkit-scrollbar {
display: none;
}