掌握css技巧，解决疑难杂症

杨羊羊_01

已于 2022-03-09 16:19:34 修改

阅读量128

点赞数 1

分类专栏： css 文章标签： css css3

于 2022-03-07 16:50:46 首次发布

本文链接：https://blog.csdn.net/m0_63872974/article/details/123333901

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.强制文本单行显示并将溢出文本以省略号显示

white-space:nowrap;//强制文本不换行
text-overflow:ellipsis;//溢出文本以省略号显示
overflow:hidden;

/*
text-overflow: clip | ellipsis | ellipsis-word 三个属性值：
clip:表示直接裁剪溢出的文本，不会显示省略号，直接截断。
ellipsis:文本溢出，显示省略号（。。。）标记，省略标记代替最后一个字符。
ellipsis-word:同ellipsis相同，不同在于省略标记代替最后一个词。
*/

2. 强制文本多行显示并将溢出文本以省略号显示

display:-webkit-box;//对象作为弹性伸缩盒子模型显示。
-webkit-box-clamp:2;//限制在一个块元素显示的文本的行数。
-webkit-box-orient:horizontal | vertical;//设置框内子元素的排列方式。
text-overflow:ellipsis;
overflow:hidden;

3.css强制换行

word-break:break-all; /*支持IE，chrome，Firefox不支持*/

word-wrap:break-word;/*支持IE，chrome，Firefox*/

4.字符间距

letter-sapcing:2px; //设置每个字符之间的间距

5.设置段落首行缩进

text-indent:2em;//首行缩进两个字符

6.颜色透明值设置问题

background:#012356;//颜色设置
opacity:0.8;//透明度设置
/*该方法设置的透明度会导致整个框内元素都继承了该透明度属性，若要针对某一个元素的属性设置透明度，如背景设置透明度，则建议采用*/
background:rgba(255,255,255,0.8)//针对背景颜色单独设置透明度，但是IE8不识别。

7.input，textarea相关常用css样式

textarea去掉拖拽大小，隐藏滚动条

overflow:hidden;//隐藏滚动条

resize:none;//禁止拖拽修改textarea大小

8.元素占满整个屏幕

高度如果使用100%，会根据父级的高度来决定，所以使用100vh单位。

.dom{ width:100%; height:100vh;}

9. 隐藏滚动条

第一个滚动条是可见的，第二个滚动条是隐藏的。这意味着容器可以被滚动，但滚动条被隐藏起来，就像它是透明的一样。

关键代码：

.box-hide-scrollbar::-webkit-scrollbar { display: none; /* Chrome Safari */ }

事例地址：https://codepen.io/qianlong/pen/yLPzLeZ

10.使用 “filter:grayscale(1)”，使页面处于灰色模式。

关键代码：

body{ filter: grayscale(1); }

11.绘制小箭头

关键代码：

.box {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
  transform: rotate(270deg);
}
/*上*/
.arrow.top {
  transform: rotate(90deg);
}
/*左*/
.arrow.left {
  transform: rotate(180deg);
}
/*右*/
.arrow.right {
  transform: rotate(0deg);
}

12.元素的高度与 window 的高度相同

如何使元素与窗口一样高？答案使用 height: 100vh;

13.使用 `caret-color` 来修改光标的颜色

可以使用 caret-color 来修改光标的颜色，如下所示：

caret-color: #ffd476;

14.删除 `type="number"` 末尾的箭头

默认情况下，在type="number"的末尾会出现一个小箭头，但有时我们需要将其删除。我们应该怎么做呢？

关键代码：

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

15.`outline:none` 删除输入状态线

当输入框被选中时，它默认会有一条蓝色的状态线，可以通过使用 outline: none 来移除它。

如下图所示：第二个输入框被移除，第一个输入框没有被移除。

16.解决iOS滚动条被卡住的问题

在苹果手机上，经常发生元素在滚动时被卡住的情况。这时，可以使用如下的 CSS 来支持弹性滚动。

body,html{
-webkit-overflow-scrolling: touch;
}

17.解决 img 5px 间距的问题

你是否经常遇到图片底部多出5px间距的问题？不用急，这里有4种方法可以解决。

方案1：设置父元素字体大小为 0


.img-container{
  line-height: 5px;
}

方案2：将 img 元素设置为 display: block
```
img{
  display: block;
}
```
方案3：将 img 元素设置为 vertical-align: bottom
```
img{
  vertical-align: bottom;
}
```
解决方案4：给父元素设置 line-height: 5px
```
.img-container{
  line-height: 5px;
}
```