JIZQAQ学习&踩坑笔记本

目录介绍思路样例代码介绍我这边用的是Vue+Vant，在手机端显示一张图片，高度固定为屏幕的60%，宽度按照比例缩放，超出屏幕宽度部分不显示。思路css中吧高度和其他样式都写好，通过js计算应该设置的宽度。我们获得到屏幕的高度*60%，在查看原图长宽比按照比例获得宽度的像素。样例代码<van-image class="login_pic" :style="getWidth()" :src="require('../../asse

思路里面其实就是一个普通的矩形div，但是将它设置的比外面的div长宽都要大，然后做旋转处理。外面的div把超出的部分做hidden处理，中间那个只显示部分看起来就是一个梯形了。样例代码因为提取修改的是项目代码里面部分，我需要画的是贴底的梯形，所以那部分的样式也保留了，主要关注下面rotate那部分代码就是了<div class="title_box"> <div class="lighter_box"></div>.title_b.

一.实际应用项目里面遇到一个问题，就是选中某个颜色之后，需要显示一圈颜色更深的边框表示选中状态。但是加上之后，明显框框变大了，一点也不美观。于是想找找能不能把border改成内边框的方法。在css中加了一行box-sizing: border-box;完美解决问题这里涉及到了一个我以前一直没有深入了解过的知识，就是CSS的盒模型。二.盒模型先来简单说一下，什么是盒模型。1.盒模型基本元素盒模型从外到里由以下几个元素组成：外边框（margin） 边框（b..

之前有个设计稿上没有的颜色，我直接偷懒，在vscode里面写css的时候选了，大概类似下面这个样子。电脑上看的时候是没问题的，chrome显示正常，我们测试手机是苹果，IOS也显示正常。结果隔了一段时间，我自己想要尝试一下的时候，在我的安卓机上发现这个颜色就是不显示。我自己的手机是华为的mate 20 pro，我手头上也没有别的安卓机，不知道是华为的问题还是安卓的问题。最后解决方案是，改成rgba格式正常显示，带透明度的颜色还是乖乖先用着rgba吧泪目…...

100 - Thin(Hairline)200 - Extra Light (Ultra Light)300 - Light400 - Regular (Normal、Book、Roman)500 - Medium600 - Semi Bold (Demi Bold)700 - Bold800 - Extra Bold (Ultra Bold)900 - Black (Heavy)

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