css
昔人'
觉今是而昨非
展开
-
【vue】ios中返回到列表页出现空白的问题
问题:ios机器上点击返回列表页的时候,会出现空白现象,触屏一下或者拉动一下,数据才会显示出来,解决方案:给当前组件最外层元素添加以下样式overflow-y: auto;-webkit-overflow-scrolling: touch;position: absolute;top:0;left:0;width:100%;height:100%;...转载 2020-06-18 16:50:59 · 812 阅读 · 0 评论 -
h5移动端输入框随键盘上升
var xxxxxxxx = document.getElementById('#xxx');setInterval(function(){ xxxxxxxx.scrollIntoView(false);},200)Element.scrollIntoView()说是还在试验中的属性,mdn: https://developer.mozilla.org/zh-CN/docs/We原创 2017-11-20 10:39:59 · 6469 阅读 · 1 评论 -
只要三句话就可以实现不定宽高水平垂直居中。
justify-content:center;//子元素水平居中align-items:center;//子元素垂直居中display:-webkit-flex;在父级元素上面加上上面3句话,就可以实现子元素水平垂直居中。转载 2017-10-12 17:05:37 · 334 阅读 · 0 评论 -
webp如何使用,webp是什么?webp如何生成,
之前项目中使用图片,图标有时候是png,jpg格式的,对于太大的图片处理,其中可以利用一些工具压缩一下,推存网站可以在线压缩也比较省事:https://tinypng.com/对于移动端项目,使用到图片或图标是设计师把其做成矢量图,前端使用时把其当作字体形式使用即可。但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致, 若想改变现状开辟新局面,便要有釜底抽薪原创 2017-07-24 23:48:56 · 4923 阅读 · 0 评论 -
设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等
一、对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。#wrap{white-space:normal; width:200px; }或者#wrap{word-break:break-all;width:200px;}2.(Firefox浏览器)white-space:normal; word-br转载 2017-06-06 17:50:35 · 18142 阅读 · 0 评论 -
清除浮动-------网页布局之浮动
1哥哥浮动要影响弟弟()。2弟弟浮动要看哥哥(哥哥不浮动 / 哥哥浮动)。弟弟浮动(哥哥不浮动): (当弟弟浮动时候哥哥也浮动)哥哥弟弟一起浮动:3哥哥弟弟浮动都不会超出父亲。原创 2016-12-15 11:13:26 · 635 阅读 · 0 评论 -
html img图片不变形等比例缩放,兼容ie6
方法1 img 只定义宽(或高)度可以等比例缩放,外面加个框,设置宽高和 overflow:hidden; 即可方法2 在img标签里面只设置宽,不设置高,图片就会等比例缩放。方法3或者把图片作背景图片。background-position: center center tips:使用max-width:30转载 2017-05-19 12:05:19 · 36095 阅读 · 0 评论 -
CSS 三角形绘制方法
:from: http://www.jb51.net/article/42513.htm CSS 三角形绘制方法复制代码代码如下:#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px soli转载 2017-05-09 15:26:34 · 389 阅读 · 0 评论 -
Photoshop投影与CSS中box-shadow的转换
来自:http://www.jb51.net/css/404167.html"混合模式":Photoshop提供了各式各样的混合模式,但是CSS3阴影只支持正常模式(normal)。"颜色(color)":阴影颜色。对应于CSS3阴影中的 color 值。"不透明度(opacity)":阴影的不透明度。对应于CSS3阴影的颜色 rgba() 中的 a 值。"角度转载 2017-05-27 09:33:07 · 2994 阅读 · 0 评论 -
div css
传送门 https://buluo.qq.com/p/detail.html?bid=314687&pid=3951568-1488176075转载 2017-03-04 08:48:47 · 334 阅读 · 0 评论 -
css3动画简介以及动画库animate.css的使用
此博主总结的挺好,不在复制过来 了。。。。http://www.cnblogs.com/2050/p/3409129.html转载 2016-12-15 17:09:30 · 458 阅读 · 0 评论 -
CSS布局奇葩技巧之--各种居中
居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。先来说几种简单的、人畜无害的居中方法1. 把margin设为auto具体来说就是把要居中的元素的margin-left和m转载 2016-12-13 13:21:16 · 438 阅读 · 0 评论 -
css选择器中:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码:p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素;h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个;span:first-child 匹配不到任何元素,因为在这里两个转载 2016-12-13 13:12:06 · 595 阅读 · 0 评论 -
css3之canvas 基础
DOCTYPE html>html>head>metacharset="utf-8">title>title>styletype="text/css">#myCanvas{box-shadow:10px 10px10px black;}style>head>body>canvasid="myCanvas" wi原创 2016-12-14 19:05:46 · 666 阅读 · 0 评论 -
网页布局之》》》》弹性盒子》》》
网页弹性盒子》》》》box-flex 属性 按比例占据父元素的尺寸。定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 200 像素:#p1{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari 和 Chrome */box-fl原创 2016-12-13 19:44:31 · 589 阅读 · 0 评论 -
ease,seae-in,ease-in-out,ease-out,效果
值描述linear规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。(匀速)ease规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))(相对于匀速,中间快,两头慢)。ease-in规定以慢速开始的过渡效果(等于 cubic-转载 2016-12-10 13:11:46 · 33466 阅读 · 2 评论