![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
cvory
这个作者很懒,什么都没留下…
展开
-
iPhone安全区域 底部小黑条在H5的适配
在H5上的解决方案使用苹果官方推出的适配方案Css函数env()和constant()设置viewport设置为cover,这样这两个函数才能生效<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">用@support隔离兼容样式,当浏览器支持bottom: constant(safe-area-inset-bottom)或者bottom: env(safe原创 2021-06-30 13:36:09 · 553 阅读 · 0 评论 -
web移动端自适应解决方案 按比缩放还原设计图(less函数)
需求移动端的设备尺寸较多,需要页面的显示是可自适应良好的设计图一般是按照某固定尺寸进行设计要对设计图进行 比例缩放还原解决方案思路: 不论字体大小或者各元素的宽高 都按照统一比例缩放code:less的函数使用.pxToVW (@px, @attr: width) { @vw: (@px / 750) * 100; @{attr}:~"@{vw}vw";}.title{ .pxToVW(300,width) .pxToVW(32,font-size)}这里是指,设计图原创 2021-06-29 17:54:02 · 387 阅读 · 0 评论 -
原生CSS瀑布流写法:flex,position,column-count,效果图及缺点
原生CSS瀑布流写法1. 设置column-count:原理: 将子元素分两列展示,从而实现简单的瀑布流布局效果:缺点:纵向布局,和现在市面以及用户的使用习惯不符需要一次性拿到所有数据(与瀑布流的数据处理方式不符)2. 使用flex布局code:display:flex;flex-wrap:wrap原理: 超出一行的向下横向布局效果:缺点: 虽然是横向布局,但是每一行是不能上下插空3. 使用position:absolute效果:原理: 计算每一个块的位置,赋原创 2021-05-18 13:59:50 · 790 阅读 · 0 评论 -
css去掉div中图片多余空白高度
bug显示:描述:在做card,但是图片下方无缘无故有多余的空白,但是video没有,所有对齐有问题解决方案:在图片外层套个div,给div设置 line-height:0实测有用原创 2020-12-28 18:00:45 · 594 阅读 · 0 评论 -
【css】给图片添加内阴影
需求:给图片添加内阴影原理:给img外面套一个div加给div不会生效 因为图片会遮住<div class='box-shadow'> <img src='https://image.zhangxinxu.com/image/study/s/s256/mm1.jpg'></div>css:.box-shadow { display:i...原创 2019-11-21 18:34:22 · 1713 阅读 · 0 评论 -
div文字超宽度换行
css:div{ width: 100%; word-wrap: break-word; word-break: break-all; overflow: hidden;}原创 2019-11-21 18:27:09 · 281 阅读 · 0 评论