CSS界面处理技巧总结

本文目录：

1.input样式修改与自定义样式实现
2.纯数字或字母不自动换行
3.个别电脑上的个别浏览器界面样式错乱问题
4.z-index层级无法提高的问题
5.让用户无法通过长按屏幕来复制文本
6.外边距塌陷问题
7.去除表格双倍边框
8.去除图片下方空白缝隙的方法
9.单行文字以及2行文字溢出隐藏，并且显示为省略号
10.:last-child选择器容易引发的bug
11.绘制多层描边
12.图片缩放模式object-fit
13.实现背景模糊效果
14.动画实现简洁 loading 效果
15.自定义文本选中样式
16.H5 深色适配
17.元素竖向的百分比
18.滚动条样式重构
19.页面平滑滚动

1.input样式修改与自定义样式实现

设置input占位符的样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  
    color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
input:-moz-placeholder { /* Firefox 18- */
    color: red;
}

单独改变某个input的时候，将input改为对应的选择器就可以实现对其placeholder样式的改变。
设置input聚焦时的样式

input:focus {   
  background-color: red;
}

取消input的边框

border: none;
outline: none;

在IE等浏览器下，将下面的代码直接加在公共样式文件中，可以去除input（type=password）默认的叉号和小眼睛

::-ms-clear, ::-ms-reveal{
  display: none;
}

去除input输入框自动填充的背景色
有时候我们打开chrome浏览器，输入框会根据历史输入记录自动填充内容，但是也会自动给输入框带上背景（黄灰蓝各种颜色的都有，非常的丑），该问题是由于chrome会默认给自动填充的input、select、textarea等加上:-webkit-autofill私有伪属性造成的，比较好的解决方案就是做样式覆盖，代码如下：

input:-webkit-autofill{
  box-shadow: 0 0 0px 1000px white inset !important;
}
select:-webkit-autofill{
  box-shadow: 0 0 0px 1000px white inset !important;
}
textarea:-webkit-autofill{
  box-shadow: 0 0 0px 1000px white inset !important;
}

自定义input样式
自定义input的样式，首先要让自带的input隐藏起来，然后通过label标签包裹，i标签实现自定义样式展现

<div>
  <label for="gender1">
    <input id="gender1" v-model="gender" type="radio" name="sex" value="0" title="男" />
    <i class="circle" :class="{'lradio':gender === '0'}"></i>
    男
  </label>
  <label for="gender2">
    <input id="gender2" v-model="gender" type="radio" name="sex" value="1" title="女" />
    <i class="circle" :class="{'radio':gender === '1'}"></i>
    女
  </label>
</div>

去掉type="number"的上下箭头

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }

2.纯数字或字母不自动换行

work-break可以改变换行规则，该属性默认值为normal（使用浏览器默认的换行规则）
可以手动将其改为

word-break: break-all;

允许其在单词内换行
如果打算这样做，一般都是添加相关代码到通用样式文件中

3.个别电脑上的个别浏览器界面样式错乱问题

可能性1：
这台电脑上的浏览器有一些插件，和样式的类名有冲突，解决方法是停用相关插件或者改变一下冲突样式的名称。
可能性2：
有些用户的电脑浏览器的缩放比设置不是100%，导致一些样式会出现排版错乱，解决方法是把缩放比改为100%
可能性3：
缓存问题，这种情况一般出现在老项目中，解决方法是强制刷新或者是给静态资源文件添加版本号标识

4.z-index层级无法提高的问题

对于普通盒子而言，如果都是标准流，那么position:relative;可提高层级，如果都有position，那么可以使用z-index提高层级，但是z-index有从父原则，父元素设置了z-index低于别人了，你再怎么提升z-index也是没法让自己的层级高于自己的父元素的。

5.让用户无法通过长按屏幕来复制文本

div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

user-select:none该属性让区域内容无法被选中,可以阻止用户长按复制,也可以避免用户复制无关内容。
如果打算这样做，一般都是添加相关代码到通用样式文件中

6.外边距塌陷问题

塌陷主要分2种，一种是上下相邻的盒子上下的垂直外边距margin在同时存在时会发生外边距塌陷。这意味着当一个元素的下边缘接触到另一个元素的上边缘时，只会保留两个margin值中较大的那个。解决办法就是避免出现这种情况。
另外一种就是子盒子设置margin-top属性，会带动着父盒子跟着动，解决办法1是为父盒子添加overflow:hidden;2是可以为父盒子增加一个1px的透明边框，３是为父盒子设定padding值；４是为父盒子添加position：fixed；（都已经通过fixed固定死了，自然也不会被随意改动位置了，但是第４种方法局限性太大，实际中不会这样使用）

7.去除表格双倍边框

当给td设置边框的时候，会发现相邻td的边框会特别的粗，出现这个现象的原因是因为相邻单元格的边框产生了相加在一起的效果，解决方法是将表格设置为合并边框模型，给table元素添加上以下元素即可：
border-collapse: collapse
另外td有很多属性，比如align和valign，可以自定义单元格内容的水平和垂直对齐方式。

8.去除图片下方空白缝隙的方法

常用的有三种，根据实际情况选择其中一种即可
1.img{display:block;}
2.img{vertical-align:middle ;}
3.给img的父级添加font-size: 0; 或者是line-height: 0;
在使用flex布局的页面中，这个问题基本不会出现，如果打算这样做，一般都是添加相关代码到通用样式文件中

9.单行文字以及2行文字溢出隐藏，并且显示为省略号

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

让文本超过2行就在第2行的末尾显示为省略号的方法（存在兼容性问题）
方法一：

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;

方法二：

p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
  word-break: break-all;
}

p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

第二个方法会存在省略号压住末尾文字的情况，体验不好，建议使用方法一

10.:last-child选择器容易引发的bug

有时候在使用:last-child选择元素的时候会不是那么的好用，尤其的在元素产生变化的时候，我们可以尝试着用:last-of-type去进行代替使用。

1.:last-child选取一群兄弟元素中的最后一个元素，且最后的这个元素必须是所声明的指定元素（注意2个条件，必须都要满足才可以，只要有其中1个条件不满足，样式就不会起效果）。
2.:last-of-type选取一群兄弟元素中的最后一个指定类型的元素。
上面说的可能会感觉很难理解，下面举个例子：

p:last-child{
   color: red;
}
p:last-of-type{
   color: blue;
}
<div>
    <p>第一行</p>
    <p>第二行</p>
    <p>第三行</p> 
    <span>我是测试行</span>
</div>

运行的结果显示：没有任何一行显示为红色，第三行显示为蓝色。或许你可能会觉得两个选择器选中的是同一行，但是当你注释掉蓝色选择器的时候会发现，红色依然未被选中。
下面再次解释一下红色未被选中的原因：
:last-child选择父节点最后一个子节点，并且与选择器进行匹配，父节点div的最后一个节点是span，而匹配的选择器是p,两者不对应所以匹配不上。
而另外一个选择器，
:last-of-type是从父节点的子节点中寻找最后一个与选择器相同的子节点，也就是说，这次寻找的并不是最后一个节点，而是最后一个P元素节点，所以只能找到第三行了。
由此可知，使用:last-of-type会更不容易产生意外bug，我更推荐使用它。同理适用于:nth-last-child(n)和:nth-last-of-type(n)

11.绘制多层描边

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
可以使用outline来描边，不占地方，它甚至可以在里面。
示例：

div {
  width: 100px;
  height: 100px;
  background: #off;
  border: 10px solid red;
  outline: 10px solid green;
  outline-offset: 0;

此时div会有10px的红色边框，同时最外框还紧贴着一层10px的绿色边框，其中outline-offset: 0;为默认值，当设置为10px的时候，则绿色边框向外10px，设置为-10px的时候，绿色边框会完全覆盖住红色边框，负值越大，outline越内缩。
在怪异盒模型下，outline和border还有一个区别：
outline不计算大小，border计算大小

12.图片缩放模式object-fit

背景图片可以通过background-size来改变其尺寸，其实在使用img引入图片，并对img的尺寸做了规定之后，也可以通过设置object-fit来改变其缩放模式，默认值为fill，其中contain和cover可以保证图片的比例不变。

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容部分区域不可见。

实际项目中建议统一使用cover模式

13.实现背景模糊效果

最简单直接的方式就是给当前的img标签增加上filter属性

img {
    filter: blur(5px);
}

但是这样的缺点是img盒子的边缘部分会有毛边，这不是我们想要的。所以为了达到边缘整齐的效果，需要进行“曲线救国”：
通过CSS给img盒子添加一个伪类，然后对这个伪类进行模糊处理

&:after {
    content: "";
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    // width: 100%;
    // height: 100%;
    position: absolute;
    left: -40px;
    top: -40px;
    //背景图片继承父盒子
    background: inherit;
    //模糊
    filter: blur(20px);
}

注意点一：伪类的默认宽度达不到父盒子一样，所以我们需要动态计算，增大伪类的宽高，同时定位位置向左向上偏移点。
注意点二：img盒子增加上overflow:hidden;这样就可以实现边缘整齐了

14.CSS实现简洁 loading 效果

这个loading效果是纯文字形式的

效果示意图.png

<p class="loading">
    正在加载
 </p>

CSS样式代码：

.loading {
    text-align: center;
}
.loading:after {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: "\2026";
  -webkit-animation: ellipsis 1s infinite;
}

/* 动画部分 */
@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
  }

15.自定义文本选中样式

<div class="element">
    正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载
</div>

注意只能修改这两个属性字体颜色选中背景颜色

.element::selection {
  color: green;
  background-color: red;
}
.element::-moz-selection {
  color: green;
  background-color: red;
}

16.H5 深色适配

prefers-color-scheme是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。利用其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。light 适配浅色主题，dark 适配深色主题，no-preference 表示获取不到主题时的适配方案。
CSS代码：

@media (prefers-color-scheme: light) { 
  .article {  
    background:#fff; 
    color: #000;  
  } 
} 
@media (prefers-color-scheme: dark) { 
  .article {  
    background:#000;  
    color: white;  
  } 
} 
@media (prefers-color-scheme: no-preference) { 
  .article {  
    background:#fff; 
    color: #000;  
  } 
}

如果样式代码过多，则会将代码放在专门的文件中，通过link 标签相关属性设置实现动态的引入：

<link href="./common.css" rel="stylesheet" type="text/css" /> 
<link href="./light-mode-theme.css" rel="stylesheet" type="text/css" media="(prefers-color-scheme: light)"  /> 
<link href="./dark-mode-theme.css" rel="stylesheet" type="text/css" media="(prefers-color-scheme: dark)" />

17.元素竖向的百分比

元素竖向的百分比设定是相对于父容器的高度吗？
如果是height的话，是相对于父容器的高度。
如果是padding或者margin竖直方向的属性值则是相对于父容器的宽度。
为了避免这种意外BUG的发生，在使用padding和margin属性的时候，应避免使用百分比属性值

18.滚动条样式重构

HTML结构

<ul class="scroll-container">
  <li style="height:800px"></li>
</ul>

CSS样式

.scroll-container {
   width: 500px;
   height: 150px;
   border: 1px solid #ddd;
   overflow: auto;     /*必须*/
 }
/* 滚动条轨道及手柄的宽度和背景色 */
 .scroll-container::-webkit-scrollbar {
   width: 8px;
   background: white;
 }
 .scroll-container::-webkit-scrollbar-corner,
 .scroll-container::-webkit-scrollbar-track {
   /* 滚动条轨道背景色 */
   background-color: rgba(180, 160, 120, 0.1);
   /* 滚动条轨道阴影 */
   box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
 }
 .scroll-container::-webkit-scrollbar-thumb {
   /* 滚动条手柄 */
   background-color: blue;
 }

效果：

效果示意图.png

调整上面的样式代码，可以将默认的滚动条改成自己想要的样式

19.页面平滑滚动

纯css就可以实现

html {
  scroll-behavior: smooth;
}

ie不支持，但是无所谓了