css 的 一些 常用 样式
在css中，单纯的指单页面的css。
1、用的最多的也就是清除各个盒子模型的边距
一般使用全局清除：
*{
margin:0;
padding:0;
list-style: none;
text-decoration: none;
}
这里顺手就把一些如 li 元素前面的序号，a 标签的下划线 等样式也给清除了。
2、假如一行文字过长，就将他们多余的部分以省略号的形式显示
div{
width:300px;
height:90px;
line-height:90px;
以下为设置成省略号的必须三个语句（只显示一行）。
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行文本必用的四行语句（-webkit-line-clamp: 3; 显示3行 -webkit-line-clamp: 4; 显示4行）
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
2.1、文本样式
.one{
text-decoration:none; //无样式
}
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| blink | 定义闪烁的文本。 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
3、图片垂直水平居中
#one{
width: 500px;
height: 500px;
margin:0 auto;
border: 1px saddlebrown solid;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#one img{
width: 150px;
height: 100px;
}
4、背景透明
backgroun-color:transparent
5、uniapp的textarea 输入数字或字母不换行
word-break:break-all;
word-wrap:break-word;
6、查询屏幕大小（max-width: 420px 当设备最大宽为420px时，使用大括号里面的css样式）
7、让文字竖排，并将内部的数字横着排（直接复制就可以看到效果）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .two{ writing-mode: vertical-rl; } .two b{ text-combine-upright: all; } </style> </head> <body> <div class="two"> <p>诗词<b>45</b>满江红</p> <p>怒发冲冠，凭栏处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。</p> <p>三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切。</p> <p>靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。</p> <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p> </div> </body> </html>
8、一段文字左右对齐，最后一行的左对齐
.one{
text-align:justify; 文字两端对齐
text-justify:inter-ideograph; 文字最后一行对齐
}
9、下划线（使用定位，点击根据 当前元素下标 改变left）
.inquire_bot_title_line{
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 33.33%;
background-color: #D48A3F;
transition: all .3s;
}
10、设置文字字体
<style type="text/css">
@font-face{
font-family: 'xingkai';
src: url('./font/华文行楷.ttf');
/* src: url('字体文件路径') */
}
.shiwen{
font-family: 'xingkai';
font-size: 60px;
}
</style>
11、滚动条隐藏(class = "one")
.one::-webkit-scrollbar{width:0;}
