1. 垂直居中
html
<div class="parent">
<div class="child">东西南北我居中</div>
</div>
css
.parent {
border: 3px solid #eee;
background: #f5f6f9;
height: 100px;
/* 关键代码 */
display: flex;
justify-content: center;
align-items: center;
}
.child{
font-size: 14px;
font-weight: 400;
}
效果图
2. calc
html
<div class="parent">
<div class="child"></div>
</div>
// 绘制Progress 进度条
.parent {
border: 1px solid #eee;
background: #ebeef5;
border-radius: 4px;
width: 200px;
height: 6px;
overflow: hidden;
}
.child {
/* 关键代码 */
width: calc(100% - 50%);
background: #409eff;
height: 100%;
}
3. 文本超出显示...
html
<div class="txt">
如果上天能够给我重来一次的机会,我不会用爱换一场英雄梦.青春不再是遗憾了半生匆匆的别离,我会对她说三个字我爱你
</div>
css
.txt {
border: 1px solid #eee;
background: #ebeef5;
border-radius: 4px;
width: 400px;
height: 30px;
font-size: 14px;
line-height: 30px;
padding-left: 5px;
color: #333;
/* 关键代码 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
效果图
4. 设置input placeholder
样式
html
<div class="parent">
<input class="placeholder" type="text" placeholder="注重细节,从小事做起,因为你根本做不了大事" />
</div>
.parent{
width: 360px;
}
.placeholder {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: 14px;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
/* 关键代码 */
.placeholder::-webkit-input-placeholder {
color: #1E90FF;
}
效果图
5. 移除type="number"
尾部的箭头
html
<div class="parent">
<input type="number" value="99" />
<input class="spin" type="number" value="99" />
</div>
css
.parent {
width: 360px;
}
.spin,
input {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
font-size: 14px;
color: #1E90FF;
}
.spin{
margin-top: 16px;
}
/* 关键代码 */
.spin::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
效果图
6. 移除input状态线
html
<div class="container">
<input placeholder="作为好朋友,长得比我丑,是对我最起码的尊重。" />
<input class="outline" placeholder="作为好朋友,长得比我丑,是对我最起码的尊重。" />
</div>
css
.container {
width: 360px;
}
input {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: 14px;
height: 40px;
line-height: 40px;
width: 100%;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
/* 关键代码 */
.outline {
outline: none;
margin-top: 16px;
}
效果图
7. 选择器
html
<ul class="container">
<li>我是一条鱼,曾经快乐的游来游去</li>
<li>我是一条鱼,曾经快乐的游来游去</li>
<li>我是一条鱼,曾经快乐的游来游去</li>
<li>我是一条鱼,曾经快乐的游来游去</li>
</ul>
css
* {
padding: 0;
}
.container {
width: 360px;
}
.container li {
-webkit-appearance: none;
border-radius: 4px;
color: #606266;
display: inline-block;
font-size: 14px;
height: 40px;
line-height: 40px;
width: 100%;
padding: 0 15px;
margin-bottom: 8px;
}
/* 关键代码 */
.container li:first-child {
border: 1px solid #7CFC00;
}
.container li:last-child {
border: 1px solid #00BFFF;
}
.container li:nth-child(even) {
color: #FFC0CB;
}
.container li:not(:last-child) {
background: #F5F5F5;
}
效果图
8. 自定义文本选择样式
html
<div class="txt">
一万和一百万都是一样的,因为我都没有!
</div>
<div class="txt">
一万和一百万都是一样的,因为我都没有!
</div>
css
txt::selection {
color: #ffd476;
}
效果图
9. 改变光标颜色
html
<div class="container">
<input class="cursor" />
</div>
css
.container {
width: 360px;
}
input {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: 14px;
height: 40px;
line-height: 40px;
width: 100%;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
/* 关键代码 */
.cursor {
caret-color: #ffd476;
}
效果图
10. 图片自适应
html
<div class="container">
<img src="./1.jpeg" class="img"/>
</div>
css
.container {
width: 360px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
/* 关键代码 */
.img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
效果图
.img {
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。