css骚操作，学会了至少减少一百行代码！
display: flex
// 会覆盖align-items，允许一个项目中有与其他项目不一样的对齐方式
align-self
// flex的三个属性：1）拉伸（默认为0，如果为1的话会占据剩余空间），2）缩小（默认为1，即空间不足时会自动缩小），3）占百分比
flex: 0 0 25%;
// 让footer始终固定在底栏
.box {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.cont {
flex: 1;
}
footer {
height: 200px;
}
<div class="box">
<div class="cont"></div>
<footer></footer>
</div>
// 左右两列，高度都是不固定的，左列高度变化时，右侧高度也要变成等高.
.box {
display: flex;
}
.left {
flex: 1;
background: grey;
}
.right {
flex: 2;
background: yellow;
}
<div class="box">
<div class="left"></div>
<div class="right">实现等高</div>
</div>
// 实现元素水平垂直居中
* {
margin: 0;
padding: 0;
}
.box {
min-height: 100vh; // 必须
display: flex;
}
.cont {
width: 100px;
height: 100px;
margin: auto;
background: red;
}
<div class="box">
<div class="cont"></div>
</div>
vh:view height简写,指可视窗口的高度
// 假设浏览器高度900px,
1 vh = 900px/100 = 9px
// height: 100vh 与 height:100%的区别
height: 100vh：当元素没有内容时候，会撑开，与屏幕高度保持一致
height: 100%：当元素没有内容时候，不会撑开
使用vw,calc()代替rem
html {
font-size: calc(100vw / 7.5); // 注意：运算符左右必须要有空格
}
div {
width: calc(100% - 10px);
}
css将字符串转换为驼峰等方式
const str = 'this package'
.toCapital{
text-transform: capitalize; // This Package
text-transform: uppercase; // THIS PACKAGE
text-transform: lowercase; // this package
}
相邻兄弟选择器，=> 制作类似表格的border时用到
ul {
width: 90%;
list-style: none;
border: 1px solid red;
}
ul>li+li {
border-top: 1px solid red;
}
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
渐变色实现
background: linear-gradient(90deg, blue, red);
动画
(1)// animation和transform搭配使用
.box {
width: 100px;
height: 100px;
margin: 20px;
background-color: pink;
animation: go 1s linear infinite; /*声明动画*/
}
/*定义动画*/
@keyframes go {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.box:hover {
animation-play-state: paused; // 停止旋转
}
(2)// transition通常和hover结合使用
.box {
width: 100px;
height: 100px;
background: red;
transition: width 1s linear;
}
.box:hover {
width: 200px;
}
css滤镜实现背景虚化，一般弹出模态框时让背景有个虚化的效果
filter: blur(2px);
resize属性，让普通元素可以像textarea那样拖动
.box {
resize: both;
resize: horizontal; // 只可调整宽度
resize: vertical; // 只可调整高度
}
文字竖向排版，例如诗
div {
writing-mode: vertical-rl; // div里元素会竖向排版
}
使用text-align-last对齐两端文本
// 适用于 未知字数的文本两端对齐
ul li {
text-align-last: justify;
}
使用not指定元素不使用设置的样式
li span:not(:last-child)::after {
content: ','
}
<li class="first-line">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
</li>
使用transform描绘1px边框
// 适用于移动端，分辨率较低的屏幕下显示1px的边框会变模糊
.thin {
position: relative;
width: 200px;
height: 80px;
line-height: 80px;
text-align: center;
&::after {
position: absolute;
left: 0;
top: 0;
border: 1px solid $red;
width: 200%;
height: 200%;
content: "";
transform: scale(.5);
transform-origin: left top;
}
}
<div class="thin">0.5px</div>
margin-left排版左重右轻列表
// 适用右侧/左侧是logo的导航
ul {
display: flex;
align-items: center;
width: 600px;
height: 60px;
}
li {
padding: 0 10px;
height: 40px;
background-color: orange;
line-height: 40px;
font-size: 16px;
color: #fff;
margin-left: 10px;
}
li:last-child {
margin-left: auto;
}
使用pointer-events禁用事件触发
// 发送请求，避免多次点击等情景；相当于button的disabled属性
p {
pointer-events:none
}
使用animation-delay保留动画起始帧
// animation-delay设置负值时，延保留动画起始帧，让动画进入页面不用等待即可运行。
li {
animation-delay: -2s;
}
使用filter: grayscale(100%)实现图片变黑暗
img {
filter: grayscale(100%);
}
动态边框
.linearBorder {
width: 200px;
height: 80px;
background:
linear-gradient(0, red 2px, red 2px) no-repeat left top/0 2px,
linear-gradient(-90deg, red 2px, red 2px) no-repeat right top/2px 0,
linear-gradient(-180deg, red 2px, red 2px) no-repeat right bottom/0 2px,
linear-gradient(-270deg, red 2px, red 2px) no-repeat left bottom/2px 0;
cursor: pointer;
line-height: 80px;
text-align: center;
font-weight: bold;
font-size: 50px;
color: red;
transition: all 300ms;
}
.linearBorder:hover {
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
<div class="linearBorder">动态边框</div>
欢迎提出改正建议，我们一起学习！
