记录一些小技巧-CSS篇

单行文本截断

.text{
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;    
}

多行文本截断

-webkit-line-clamp属性值为需要截断的行数

.text{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical ;
  overflow: hidden;
}

:not() 选择器

选中不在此范围内的元素，例如：div:not(:last-child)，选中除最后一个div的所有div元素

有时候在做列表时需要为每项添加下边框线，但最后一个项不需要边框线

.item:not(:last-child){
    border-bottom: 1px solid #ddd;
}

阻止元素成为鼠标事件的target

pointer-events 指定鼠标如何与元素进行交互，设置为none，阻止任何鼠标事件对其的作用

.item{
  pointer-events: none;  
}

设置行高，文字顶部对齐

vertical-align 用来指定行内元素（inline）或 表格单元格（table-cell）元素的垂直对齐方式。

子元素设置line-height:1，为了不继承父元素的行高

<p>
    <span>顶部对齐</span>
</p>

p{
  line-height:3;  
}
span{
  line-height:1;
  vertical-align:top;  
}

vue深度选择器

有时候需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。

此时只能通过>>>，穿透scoped。

有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符或 ::v-deep( >>> 的别名)

<style scoped>

外层 >>> 第三方组件类名 {
      样式
}

/deep/  第三方组件类名 {
      样式
}

</style>

高宽等比例自适应正方形

当宽度设置为一些自适应的值时（%、vw等），高度的值无法确定，这时可以使用 padding-top:100% 来解决高度的问题，因为 padding 的值参照于 width

<div class="parent">
    <div class="child">
        这里是内容
    </div>
</div>

.parent{
  position: relative;
  width: 50vw;
  height: 0;
  padding-top: 100%;    
}
.child{
  position: absolute;
  width: 100%;
  height: 100%;   
}

改变input元素光标颜色

input{
  caret-color: #dd3131;  
}

不规则投影

一般投影效果都会使用box-shadow来完成，但在一些不规则的形状下达不到预想的效果，这时可以使用drop-shadow来完成。

div{
  filter: drop-shadow(0 0 6px #ddd); 
}

ios移动端滚动卡顿

在ios端中滚动容器不会有惯性滚动，用户在滑动时会出现明显的卡顿感，添加以下属性可解决问题

-webkit-overflow-scrolling: touch;

列表最后一行左对齐

.list {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 10px;
}
.item{
  width: 100px;
  background: skyblue;
}

@supports特性查询

检测浏览器是否支持CSS的属性值，通过则应用代码块

.box{
  width: 100px;
  height: 100px;
  background: skyblue;
}
@supports (display: grid) {
  .box{
    background: slateblue;
  }
}
/* 两个属性支持即通过，类比 && */
@supports (display: grid) and (display: flex) {
  /* css style */
}
/* 其中一个属性支持即通过，类比 || */
@supports (display: grid) or (display: flex) {
  /* css style */
}
/* 该属性不支持即通过，类比 ! */
@supports not (display: grid) {
  /* css style */
}

查看兼容性：https://www.caniuse.com/#search=%40supports

活动锚点选择器（:target）

地址栏后面跟有锚名称 #，指向文档内某个具体的元素。比如，地址为 loacalhost:3000#red，则选择中ID属性值为red的元素，可以应用到网页换肤功能中。

<style>
div{
  display: inline-block;
  width: 200px;
  height: 200px;
}
#red:target{
  background: lightpink;
}
#blue:target{
  background: lightblue;
}
</style>
<body>
  <div id="red">
    <span>红色</span>
  </div>
  <div id="blue">
    <span>蓝色</span>
  </div>
  <p>
    <a href="#red">红色</a>
    <a href="#blue">蓝色</a>
  </p>
</body>

outline-offset 实现加号图标

想要实现加号需要符合以下几点：

1.容器是个正方形 2.outline 边框的尺寸不能太小 3.outline-offset 的取值范围: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度)

.plus {
    width: 100px;
    height: 100px;
    background: #f4f4f4;
    outline: 50px solid #333;
    outline-offset: -99px;
}

mask属性

mask-image的图片一定要是png图片才看得出效果，两张图片结合会取相交的区域显示，如果用过ps的话，和蒙版是差不多的功能。

mask和background差不多，同样拥有size、repeat、position等属性。

除了IE不支持外，谷歌、火狐、Edge、Safari、Opera等主流的浏览器都支持该属性。

兼容性：https://www.caniuse.com/#search=mask-image

.mask{
    width: 100%;
    height: 600px;
    background-image: url(../static/images/bg.jpg);
    -webkit-mask-image: url(../static/images/pikaqiu.png);
    -webkit-mask-size: 300px 300px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
}

attr函数

attr() 函数返回选择元素的属性值

<p data-unit="km">89</p>

p[data-unit]{
  font-size: 20px;
  color: #333;
}
p[data-unit]::after{
  content: attr(data-unit);
  color: #999;
}

currentColor

currentColor不是一个css属性，而是color的属性值，currentColor 返回当前元素继承的文字颜色。

比如当前元素 color 属性值为 red，currentColor 的值也为 red。currentColor相当于color属性值的别名，利用这一特点，我们可以统一管理元素的颜色。

div{
  width: 100px;
  height: 100px;
  color: red;
  border: 1px solid currentColor;
}

selection

::selection伪元素应用于文档中被用户选中的部分

<div class="demo">我是一段很长很长很长很长很长很长长很长很长长很长很长的文字</div>

.demo::selection{
  background: purple;
  color: #fff;
}

一根细线

高度为1px的伪元素，利用背景渐变可以得到比1px更细的边线

.comment-bar::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to bottom, rgba(172,172,172,.3), transparent);
}

两端文本对齐

text-align-last: justify;

以下为 text-align-last 属性值：

justify: 两端对齐
center: 居中对齐
start: 左对齐（也可用left）
end: 右对齐（也可用right）

margin排版重轻布局

一个flex布局的列表想要实现左重右轻的布局（即最后一个元素右对齐），可以为最后一个元素添加 margin-left: auto

当然，如果你需要最后两个元素右对齐，只需为倒数第二个加上。

不定时更新~