css
chiuwingyan
掘金:https://juejin.im/user/5b0919e151882538b1096f08
展开
-
padding和margin设置百分比
https://www.jianshu.com/p/d6d080e7267f?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=weixin-friends总结:一、块级子元素的padding、margin的百分比取值都是相对于父元素的内容区域宽度来计算的,无论是padding-top...转载 2018-02-27 10:55:59 · 1232 阅读 · 0 评论 -
IOS input 光标大小调整
做的是移动端的页面,在做项目的过程当中,发现input输入框ios的表现和安卓不一样,ios会比较大,撑满整个input输入框。原因:IE:不管该行有没有文字,光标高度与font-size一致。 FF:该行有文字时,光标高度与font-size一致。该行无文字时,光标高度与input的height一致。 Chrome:该行无文字时,光标高度与line-height一致;该行有文字时,光标高度从in...原创 2018-05-04 11:45:59 · 3843 阅读 · 0 评论 -
移动端实现四条边框1px粗线
.border{background-image:linear-gradient(180deg, #F73125, #F73125 47%, transparent 50%), linear-gradient(270deg, #F73125, #F73125 49%, transparent 50%), linear-gradient(0deg, #F73125, #F7312...原创 2018-05-18 15:17:52 · 251 阅读 · 0 评论 -
使用CSS3实现圆形进度条
https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html转载 2018-05-14 16:01:16 · 6347 阅读 · 0 评论 -
移动端给body设置overflow:hidden失效的问题
在移动端,给body增加overflow:hidden;width:100%;height:100% 无效的问题。在网上找了几种解决办法1、body加position:fixed; —-可行2、给要滚动的元素添加一个父级,设定高度,overflow:auto;3、html,body{height:100%;overflow:hidden}我这里是限制x轴上不能滑动,因此用的是第三种方法...原创 2018-05-08 15:39:41 · 3797 阅读 · 0 评论 -
overflow-scrolling解决滚动卡顿问题
前言如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。解决方法以下代码可解决这种卡顿的问题:-webkit-overflow-scrolling: touch;,是因为这行代码启用了硬件加速特性,所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动...原创 2018-05-23 19:11:59 · 11450 阅读 · 1 评论 -
CSS中translate和position: relative设置的偏移有什么区别?
从页面布局的角度看transform 和 position:relative 的效果是一样的。差别在于,transform 可以简单地作用于 position:absolute 的元素上面,而 position:relative; 还得加额外的 html从动画角度来说使用 transform 或 position 实现动画效果时是有很大差别。使用 transform 时,可以让...原创 2018-10-09 14:01:12 · 3115 阅读 · 0 评论 -
CSS: 潜藏着的BFC
https://mp.weixin.qq.com/s/HlvuVCamWUY_euxCVTsT4Q转载 2017-12-12 10:19:30 · 174 阅读 · 0 评论