思渝崖

css多个宽度不同图片（高度相同）在一行，并且需要随着屏幕宽度自适应：height 用 vw 为单位来写–> vw参照的是浏览器视窗的宽度，即将视窗宽度平分为100份，看每个容器占视窗宽度的几份–> 假设此时是1920分辨率，且浏览器全屏，一个容器宽度是192px，那么它占的份数就是192/1920*100=10vw。–> 然后图片宽度设置为auto例如：img{ width: auto; height: 2.396vw;// 图片原本设置的高度为46px, 46/1

如题，如下代码在电脑端浏览器缩放是响应效果，但是在模拟手机的时候响应式样式没有生效在手机端打开页面也是没有生效用的是nuxtjs 框架@media screen and (max-width: 900px) { //css //...}解决：–原因： nuxtjs 框架不想vue 框架,没有index.html ，所以一般html 里都会有的meta标签之类，它都没有，所以说需要手动加入该响应式的meta标签–方法：在 nuxtjs 的nuxt.config.js 里加入meta//

场景： 写了一个通用块，有禁用样式 和 hover样式然后 被禁用的时候 希望 hover的样式 可以不生效解决：.wrap:not(.is-disabled).wrap{ &.is-custom { //一些样式... &:not(.is-disabled):hover { display: block; box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.08); //...其他hove

需求： 拼接后端返回内容，并按照代码缩进格式展示，并且可以保留排版复制分析：因为要复制，所以只能放在一个dom盒子里面，不能拆不同dom写样式解决：style="white-space: pre-wrap"note: 我这里实行的比较简单，大家如果是很多的代码串展示的话，可以尝试在’><’ 直接加上分隔符试试，或者有其他的办法可以给我指下路^ V ^复制的话可以去看下我的另一篇文章js实现复制文本及其排版格式<div id="'code-wrap'" class="co

flex-direction为column时设置水平居中.parent-class{ display: flex; flex-direction: column; align-items: center; }flex布局为竖向时：align-items转为管理横向布局justify-content 管理竖向布局

Safari 兼容问题累积1-- css去除Safari浏览器默认tooltip1-- css去除Safari浏览器默认tooltip问题场景： 文案超出一行显示省略号，一般会写下面的css.className{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;​}safari中会有个自带的类似图片alt的的提示框，需要手动隐藏解决方案：在这个元素的里面加一个空的dom元素（div、p、span）..

其实就是:在文案的下面垫一张彩色背景图文字颜色设置成transparent.text { color: transparent; background-image: url("xxx.jpg"); background-size: cover; background-clip: text; -webkit-background-clip: text; background-r...

直接在要换行的容器里写样式：.xxx{ white-space: normal;}