CSS工作技巧总结

最新推荐文章于 2021-12-21 15:41:16 发布

庚中

最新推荐文章于 2021-12-21 15:41:16 发布

阅读量284

点赞数 1

CC 4.0 BY-SA版权

分类专栏：七.H5C3新特性二.CSS 文章标签： CSS工作技巧总结

本文链接：https://blog.youkuaiyun.com/xiaodi520520/article/details/90236200

二.CSS 同时被 2 个专栏收录

6 篇文章

订阅专栏

七.H5C3新特性

5 篇文章

订阅专栏

本文分享了15条实用的CSS技巧，包括文字显示控制、字体大小调整、首行缩进、文字省略显示、文字对齐、元素居中、滚动条隐藏等，帮助提升网页布局与样式设计效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 让文字一行显示

 /* 让文字一行显示 */
    word-break: keep-all;
    white-space: nowrap;

2. 字体让它小于12px;

    /* 字体让它小于12px */
    transform: scale(0.8);

3.首行空两格

p{
   text-indent: 2em;//首行空两格
 }

4.文字超出不换行,多的用点代替(三者不能缺少)

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

5.文字两端对齐

text-align:justify;

6.水平垂直居中

display: flex;
justify-content: center; /* 水平居中 */
align-items: center;     /* 垂直居中 */

7.flex布局注意点

在这里插入图片描述

8.使用伪类去除button边框(当outline和border都没有效果时)

.container .codeBtn::after{
  border: none;
}

9.flex上下左右垂直居中

  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中,记住呀副轴是align-items */

10.设置文字间距

letter-spacing:2px

11.antd里的顽固按钮去除默认样式方法

.btn{
    background-color: #0ac986 !important;
    border: none;
  	outline: none;
  	color: #fff;
}
.btn:hover{
    background-color: #0ac986 !important;
    border: none;
    outline: none;
    color: #fff;
}
.btn:focus{
    background-color: #0ac986 !important;
  	border: none;
    outline: none;
    color: #fff;
}

12.定位居中办法

 	width: 600px;
 	height: 400px;   
    position: absolute;
    left: 50%;
    top: 50%;   
    margin-top: -200px;    /* 高度的一半 */  
    margin-left: -300px;    /* 宽度的一半 */

13.隐藏滚动条

.element::-webkit-scrollbar {display:none}

在这里插入图片描述
14.sticky滚动粘性定位,跟top值后变为固定定位(下面代码表示滚动到top:0后变成固定定位)

position: sticky;
top: 0px;

15.简单添加异步的方法
比如:如果让some变成同步后再执行操作那可以写成下面这个.
在这里插入图片描述