CSS平时积累知识点

移动端100vh问题

在移动端使用 100vh 时，发现在 Chrome、Safari 浏览器中，因为浏览器栏和一些导航栏、链接栏导致不一样的呈现。

你以为的 100vh === 视口高度

实际上 100vh === 视口高度 + 浏览器工具栏（地址栏等等）的高度

解决方案安装 vh-check:

npm install vh-check --save

import vhCheck from 'vh-check';
vhCheck('browser-address-bar'); 

定义一个 CSS Mixin

@mixin vh($height: 100vh) {
  height: $height;
  height: calc(#{$height} - var(--browser-address-bar, 0px));
}

文本域防止拖拽 resize

resize:none

文本内容过长，溢出，省略号 (单行文字)

p {
    width: 300px;
    overflow: hidden;
    /*文本不会换行*/
    white-space: nowrap;
    /*当文本溢出包含元素时，以省略号表示超出的文本*/
    text-overflow: ellipsis;
  }

文本内容过长，溢出，省略号(多行文本)

对于多行文本，一种方法是使用webkit的css扩展属性，该方法适用于Safari、chrome和大多数移动端浏览器。

p {
    width: 300px;
    overflow: hidden;
    /*将对象作为弹性伸缩盒子模型显示*/
    display: -webkit-box;
    /*设置子元素排列方式*/
    -webkit-box-orient: vertical;
    /*设置显示的行数，多出的部分会显示为...*/
    -webkit-line-clamp: 3;
  }

使用伪元素实现，将伪元素放在最后一个字的上方，达到显示省略号的目的。该方法兼容性较好，但文字未超出的情况下也会出现省略号。

p {
    position: relative;
    line-height: 1.2em;
    max-height: 3.6em;
    width: 300px;
    /*设置文本为两端对齐*/
    text-align: justify;
    overflow: hidden;
  }
  
  p::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    /*将省略号的大小设置为1个字体大小*/
    width: 1em;
    /*设置背景，将最后一个字覆盖掉*/
    background: #fff;
  }

text-overflow：表示当文本溢出时是否显示省略标记，ellipsis表示省略号效果，clip 表示截取的效果。 overflow:hidden; 将文本溢出的内容隐藏。 white-space:nowrap; 是禁止文字换行。 width： （可选）可以写固定值，也可以根据宽度自适应显示效果。

flex布局实现子元素文本垂直居中

父元素设置 display：flex；子元素就不能使用height,line-height属性

深层选择器

背景：有时需要修改第三方的样式，scoped中又不能移除，就需要用到深层选择器 （/deep/）

<style scoped>
>>> .scoped-third-party-class {
  color: gray;
}
</style>

<style scoped>
/deep/ .scoped-third-party-class {
  color: gray;
}
</style>

<style scoped>
::v-deep .scoped-third-party-class {
  color: gray;
}
</style>

input输入框，小写转化为大写

<input style="text-transform:uppercase"> 

first-child与first-of-type的区别

• first-child匹配的是父元素的第一个子元素，结构上的第一个子元素。
• first-of-type匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素。

<div>
   <p></p>
   <span></span>
</div>

p:first-child匹配到P元素。 span:first-of-type匹配到span元素。

图片覆盖在另一张图片上

别忘记设置z-index

对于列表循环，最后数据border为none

<div class="list" v-for="item in list">
</div>
.list{
 border-bottom:1px solid red
}
.list:last-child{
border:none
}