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;

 

 word-break: break-all;  　　　　// 数字代表文字需要显示几行（配合下面的 多行文本 使用）

 

多行文本必用的四行语句（-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样式）

@media screen and (max-width: 420px) {
 
}

7、让文字竖排，并将内部的数字横着排（直接复制就可以看到效果）

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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;} 

 

 

posted @   伊人兮明眸秋水  阅读(116)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示