前端开发相关实用篇【CSS技巧与前端概念】前端实际开发中常用的一些技巧，css包括一些概念【分辨率等等】技巧写在前，概念

TODO：

- [ 前端UI、分辨率]

常用技巧

一、【溢出隐藏效果】

场景一：常用版本：

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

场景二：中间显示省略号

juejin.cn/post/732996… 【js处理】

codepen.io/xboxyan/pen… 【纯css处理】

<ul class="con">
    <li class="wrap">
        <span class="txt">CSS 实现优惠券的技巧 - 2021-03-26</span>
        <span class="title" title="CSS 实现优惠券的技巧 - 2021-03-26">CSS 实现优惠券的技巧 - 2021-03-26</span>
    </li>
    <li class="wrap">
        <span class="txt">CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26</span>
        <span class="title" title="CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26">CSS
            测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26</span>
    </li>
    <li class="wrap">
        <span class="txt">CSS 拖拽?</span>
        <span class="title" title="CSS 拖拽?">CSS 拖拽?</span>
    </li>
    <li class="wrap">
        <span class="txt">CSS 文本超出自动显示title</span>
        <span class="title" title="CSS 文本超出自动显示title">CSS 文本超出自动显示title</span>
    </li>
</ul>

.con {
    font-size: 14px;
    color: #666;
    width: 600px;
    margin: 50px auto;
    border-radius: 8px;
    padding: 15px;
    overflow: hidden;
    resize: horizontal;
    box-shadow: 20px 20px 60px #bebebe,
        -20px -20px 60px #ffffff;
}

.wrap {
    position: relative;
    line-height: 2;
    height: 2em;
    padding: 0 10px;
    overflow: hidden;
    background: #fff;
    margin: 5px 0;
}

.wrap:nth-child(odd) {
    background: #f5f5f5;
}

.title {
    display: block;
    position: relative;
    background: inherit;
    text-align: justify;
    height: 2em;
    overflow: hidden;
    top: -4em;
}

.txt {
    display: block;
    max-height: 4em;
}
.title::before{
    content: attr(title);
    width: 50%;
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}

实现效果：

二、图标箭头纯css实现

.more-link{
  margin-left: 16px;
  color: #DB1A2C;
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

.more-link::after {
  content: "";
  position: absolute;
  display: inline-block;
  -webkit-transform: translate(0, -50%) rotate(-135deg);
  transform: translateY(0, -50%) rotate(-135deg);
  height: 6px;
  width: 6px;
  border-width: 0 0 2px 2px;
  border-color: #DB1A2C;
  border-style: solid;
  top: 50%;
  opacity: .8;
  -webkit-transition: -webkit-transform .3s ease;
}
.more-link:hover::after {
  -webkit-transform: translate(3px, -50%) rotate(-135deg);
  opacity: 1;
}

实现效果：

三、绘制平行四边形

www.zhangxinxu.com/wordpress/2…

<view class="skew">
    <text class="orders-lable">准时达</text>
</view>
#css部分
.skew{
     border: 1px solid #F53C28;
     color: #F53C28;
     transform:skewX(-20deg);
     border-radius: 6rpx;
     padding: 0 4rpx;
}
.orders-lable{
     display: block;
     transform: skewX(20deg);
}

实现效果：

前端相关概念理解

【待完善】前端UI单位【px、rem、100%、vw、wh、DPR、分辨率、2倍图】

juejin.cn/post/719072… 【解释物理像素、逻辑像素、并且举例说明了rem的由来】

juejin.cn/post/734572… 【像素比】

三个问题弄清楚：

font-size动态变化【sign-app】
echart项目中的单位转化
taro项目中机型适配

为什么使用二倍图：

假设一张图的在设计稿上的大小是1200px * 56px【这个是逻辑像素】，我们使用二倍图，二倍图的实际大小为2400px * 112px【图片的物理像素】，将二倍图【2400px * 112px】放在【1200px * 56px】的空间中，相当于缩放，也就意味着更清楚，此外，由于是二倍图，计算DPR 为2

SEO

juejin.cn/post/684490… 【搜索引擎原理介绍，比较详细了】

SEO优化建议：

页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
logo使用建议换成h1标签+background-image的方式

优点：利于后续seo、img图片加载异常的时候显示空、img标签资源加载靠前

blog.csdn.net/hu4545/arti… 【logo的seo】

juejin.cn/post/710682… 【介绍seo含义+seo的出发点以及注意事项】