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>

欢迎提出改正建议，我们一起学习！