1.文字溢出显示省略号
- 单行文字：
一定要设置宽度
p{
• width:200px;
• overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}- 多行文字溢出显示省略号
p{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
}
2.中英文自动切换
只对英文起作用
p{
word-wrap:break-word;
white-space:normal;
word-break:break-all
}3.文字阴影
h1{
text-shadow:5px 5px 5px #ff0000;
}4.设置placeholder的字体样式
input::-webkit-input-placeholder{
• color:red
}5.不固定高宽 div 垂直居中的方法
- 方法一
.box{
display:inline-bolck;
vertical-align:middle;
}- 方法二 flex
.box-wwrap{
height:300px;
jusstify-content:center;
align-items:center;
display:flex;
background-color:#666;
}
6.解决IOS页面滑动卡顿
body,html{
-webkit-overflow-scrolling:touch;
}
7.用css实现带边框的三角形
<div id="blue"></div>
#blue{
positon:relative;
width:0;
height:0;
border-width:o 40px 40px;
border-style:solid;
border-color:transparent transparent blue;
}
#blue:after{
content:'';
positon:absolute;
top:1px;
left:-38px;
border-width:0 38px 38px;
border-style:solid;
border-color:transparent transparent yellow;
}
8.Table表格 边框合并
table ,tr,td{
border:1px solid #666;
}
table{
border-collapse:collapse;
}
9.文字之间的距离
p{
text-indent:10px;//单词抬头距离
letter-spacing:10px;//间距
}
10.元素占满整个屏幕
.dom{
width:100%;
heigbt:100vh;//height如果使用100%，会根据父级的高度来决定，所以使用100vh单位
}
11.CSS实现文字两端对齐
.wrap{
text-align:justify;
text-justify:distribute-all-lines;
text-align-last:justify;
-moz-text-align-last:justify;
-webkit-text-align-last：justify;
}
12.实现文字竖向排版
.wrap{
width:15px;
line-height:18px;
height:auto;
font-size:12px;
padding:8px 5px;
word-wrap:break-word;//英文的时候需要加上这个 自动换行
}
13.使元素鼠标事件失效
.wrap{
pointer-events:none;
cursor:default;
}
14.使硬件加速 可以有效的减少资源的利用
.wrap{
transform:translateZ(0);
}
15.将一个容器设置为透明
.wrap{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity：0.5；
opacity:0.5;
}
16.select内容居中显示 下拉内容右对齐
select{
text-align:center;
text-align-last:center;
}
select option{
direction:rtl;
}
17.修改input输入框中光标的颜色 不修改文字的颜色
input{
color:#fff;
caret-color:red;
}
18.子元素固定宽度 父元素宽度被撑开
//父元素下的子元素是行内元素
.wrap{
white-space:nowrap;
}
//父元素下的子元素是块级元素
.wrap{
white-space:nowrap;//z子元素不被换行
dispaly:inline-block;
}
19.让div里的图片和文字同时上下居中
//通过vertival-align来达成效果
.wrap{
height:100;
line-height:100;
}
img{
vertival-align:middle;//行内元素起作用
}
20.实现宽高等比例自适应矩形
<div class="scale">
<div class="item">
这里是所有字元素的容器
</div>
</div>
.scale{
width:100%;
padding-bottom:56.25%;
height:0'
position:relative;
}
.item{
position:absolute;
width:100%;
height:100%;
background-color:#99900;
}
21.文字渐变效果实现
<div class="text">你好呀</div>
.text{
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-image:linear-gradient(to right,#ec2239,#40a4e2,#ea96f5);
width:320px;
}
22.好看的背景渐变
<div class="text"></div>
.text{
width:500px;
height:100px;
background:linear-gradient(25deg,rgb(79,107,208),rgb(98,141,185),rgb(102,175,161),rgb(92,210,133),rgb(182,228,253));
}
23.实现立体字的效果
<div class="text">你好呀</div
.text{
font-size:32px;
text-align:center;
font-weight:bold;
line-height:100px;:relative;
background-color:#33;
color:#fff;
text-shadow:
0 1px 0 #cococo,
0 2px 0 #b0b0b0,
0 3px 0 #a0a0a0,
0 4px 0 #909090,
0 5px 10px rgba(0,0,0,0.6);
}
24.全屏背景图片的实现
.swper{
background-imgage:url(./img/bg.jpg);
width:100%;
height:100%;//父级高不为100%时请使用100vh
zoom:1;
background-color:#fff;
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
background-position:center 0 ;
}
25.元素透明度的实现
//普通方式
.dom{
opacity:0.4;
filter:alpha(opacity=40);
}
//设置颜色透明度
.demo{
background:rgba(255,0,0,1);
}
26.图片自适应
img{
width:100%;
height:100%;
object-fit:cover;
}