pspxuan的博客

Chrome 88 浏览器支持新的 CSS 属性aspect-ratio，可以设置容器的长宽比。

css3有一个直接调用的css，保证隐藏滚动条的同时还可以继续通过滚轮向下翻::-webkit-scrollbar { /*隐藏滚轮*/ display: none;}但是仅限于支持css3的浏览器。

1. 问题app 内嵌 h5 IOS 中显示错误， 如下2. 解决后来发现 ios 对 flex 或者 gird 布局不友好，换成 float 完美解决

可适配移动端，纯 JS 原生编写

***最近在开发小程序的过程中经常使用到flex布局，总结一下这几天用到的属性与问题*属性详解justify-contentflex-directionalign-itemflex-flowflex-wrapalign-centerflex-direction：决定主轴的方向，决定子元素垂直或水平排列flex-direction： row ，row-reser ， ...

在开发过程中经常用到伪类与伪元素清除浮动，今天就来梳理一下二者的关系与概念先来看看官方的解释从w3c给的解释可以看出伪类与伪元素概念上没有区别，都是向css选择器设置特殊效果。而二者的区别就是语法上会有不同伪类:link {color: #FF0000} /* 未访问的链接 */:visited {color: #00FF00} /* 已访问的链接 */:hover {colo...

css代码html,body{ height: 100%; margin: 0; overflow-y: hidden; }.left{ position: absolute; left: 0; right: 0; width: 300px; height: 100%; background: red;}.right{ height: 100%;...

透明度opacity：;//值为0到1filter：alpha（opacity=值）//IE中的透明度兼容，值为0到100的数字。

1. 将文本的容器display设为table2. 将文本display设为table-cell3. 将文本vertical-align设为middle

white-space:nowrap; //文本溢出不换行overflow:hidden //溢出文本隐藏text-overflow:elipsis; //文本溢出时，文本末尾出现省略号。

**Animate中有各种各样酷炫的动画。引入方法：1.从官网地址下载：https://raw.githubusercontent.com/daneden/animate.css/master/animate.css2.导入在线cdn：https://unpkg.com/animate.css@3.5.2/animate.min.css注：这两种方法导入方式与正常引入css文件一样（lin...

实现原理：border属性：在盒子有内容时，border属性的每一条边其实生成的是梯形。当border宽度越来越大，内容越来越少时，每一条border的上底边长度就会越来越小。当没有高度宽度和内容时，这时设置border，每一条border就会是一个三角形。 width: 0; height: 0; //令其高宽为0 content: ""; //令盒子没有内容 ...

当你需要在网页当中设置背景图片时的步骤在元素中设置选取背景图片background-image：url（）； // 此属性设置你所要选取的图片作为背景。 url 为图片路径（绝对或相对）none；// 默认值选取图片后设置图片是否重复显示多张background-repeat：repeat // 将在垂直与水平方向上重复repeat - y // 将在y轴上重复图片...

今日开发过程小程序项目使用了flex布局以及fixed。同时使用时发现两者会有冲突，例：上下各一个盒子，上盒子： flex（父元素）下盒子： fixed下盒子为scroll列表。当下盒子发生滚动时，下盒子会将上盒子顶出屏幕外面解决方案：将下盒子套一个外层盒子，外层定宽高，overflow：scroll（此方法会有问题）设置上下盒子的z-index值，将下层盒子z-index &...

vertical-align属性今天在小程序代码编写过程中，写搜索框时发现搜索图标与文本框没有对齐。于是用了vertical方法使图标与文本框设置了同一属性来对齐属性详解：注：只有元素属于inline或是inline-block ，vertical-align属性才会起作用。vertical-align：middle ， 把元素放在父元素的中部。vertical-...