css操作技巧

1、选中穿透

场景：再实现 input 上传的时候，默认的样式太丑了，都是使用一个自定义元素盖在 input 元素上，但是点击该元素的时候，又需要触发到 input 身上，这个时候只需要让改元素可穿透就可以

img{
   pointer-events: none;
}

2、实现自定义原生 select 控件的样式

场景：默认的 select 控件样式太丑，但是设计又符合需求，但是直接修改样式在 IOS手机上又不行了，这个时候只需要禁用原有的样式就行了

select {
  -webkit-appearance: none;
}

3、文本溢出处理

场景：移动设备相对来说页面较小，很多时候显示的一些信息都需要省略部分。最常见的是单行标题溢出省略，多行详情介绍溢出省略

/* 单行 */
.single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 多行 */
.more {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //指定行数
}

4、开启弹性滑动

注意：这个在 Andriod 设备上不支持，可以使用插件 Iscroll 解决

body {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

5、一像素边框设置

场景：很多时候，想保持边框的大小在任何设置上都是 1px，但是因为 1px 使用 2dp 渲染，也就是说会显示为 2px 大小。所以，要采用 css3 缩放一下。

.folder li {
  position: relative;
  padding: 5px;
}
.folder li + li:before {
  position: absolute;
  top: -1px;
  left: 0;
  content: " ";
  width: 100%;
  height: 1px;
  border-top: 1px solid #ccc;
  -webkit-transform: scaleY(0.5);
}

6、防止鼠标选中事件

<div class="mask" onselectstart="return false"></div>
<div class="link">
  <a href="javascrip;;">登录</a>
</div>

7、兼容 IE 浏览器的透明度处理

.ui {
  width: 100%;
  height: 100%;
  opacity: 0.4;
  filter: Alpha(opacity=40); //兼容IE浏览器的处理
}

8、-webkit-line-clamp

可以把 块容器 中的内容限制为指定的行数。并且在超过行数后，在最后一行显示”…”

9、可以将属性重置以及继承：all

将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值，或继承值。

它有三个值：

• unset：默认值-表明该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值
• initial：变该元素所有属性的值至初始值。

• inherat：改变该元素的值 至 从父元素继承的值

  10、当元素跨多行、多列或多页时，元素的片段的展现（box-decoration-break）

  影响的属性有

• background

• border
• border-image
• box-shadow
• margin
• padding
• clip-path

  box-decoration-break: clone; /* slice,clone,initial,inherit,unset */
  -webkit-box-decoration-break: clone;

  

  11、定义光标的颜色 caret-color

  caret-color : red

  12、自定义元素显示的可显示区域（clip-path、shape-outside）

  例子太多，具体可以进 https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
  https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/clip-path

/*椭圆环绕*/
clip-path: ellipse(130px 140px at 10% 20%);
shape-outside: ellipse(130px 140px at 20% 20%);

13、object-fit / object-position

object-fit 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 object-position 属性来指定被替换元素的内容对象在元素框内的对齐方式。

14、设置字体伸缩（font-stretch）

详情：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-stretch

font-stretch:normal 默认字体
                         semi-condensed, condensed, extra-condensed, ultra-condensed 小于默认字体
                         semi-expanded, expanded, extra-expanded, ultra-expanded 大于默认字体

15、控制大写字母的使用（font-variant-caps）

详情：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant-caps

16、max-content / min-content / fill-available / fit-content

这几个属性都可以在height、width、max-width、max-height、min-width、min-height的值中使用 注意：display 必须为 inline-block 或者 block，否则上面的值不起作用。

1、fill-available

元素撑满可用空间。参考的基准为父元素有多宽多高。 类似子元素的 div 撑满父元素的宽，fill-available 不仅可以撑满宽还能撑满高。

w1
假如里面的有个元素，是 img 呢？它也是 inline-block，应该也满足情况。

2、max-content

它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个长度最长(按照文字不换行时计算)的元素即可。 参考的基准为子元素有多宽多高。

<div class="parent">
  <div class="current" style="width: 200px; height: 300px; background-color:gray;">
    <p>这是普通的p元素行，内容为文字</p>
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/balloon-small.jpg"/>
  </div>
</div>

3、min-content

它的宽度或者高度，会自动调整为，刚刚好容纳下子元素中那个“最小宽度值”最大的元素即可，剩余超长的要么换行，要么溢出 参考的基准为子元素“最小宽度值”有多宽多高。 什么是“最小宽度值”？ 比如图片，最小宽度值，就是图片原始的宽高；如果是一串中文，则最小宽度值为单个汉字的宽高；如果是一串英文，则最小宽度值为里面单词最长的那个。

4、fit-content

表示元素自动伸缩到内容的宽度，和 max-content 的区别为，都是刚刚好容纳下子元素中那个长度最长的元素即可。 不同的是 max-content 在计算时按照文字不换行时计算，如果超过父元素，则不换行，直接产生滚动条；而 fit-content 在超过父元素后，换行，不产生滚动条。

17、定位居中兼容edge

如果外层盒子给的 fixed 定位，内层盒子给的 absolute 之后，在edge老版本浏览器上渲染就会出现渲染的位置跟显示的位置不一致的问题

解决：
这个时候只需要把fixed定位改为 absolute 定位就行