随笔分类 -  CSS

postcss
摘要：一、简介 PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比 阅读全文
posted @ 2018-05-11 11:41 leaf+ 阅读(377) 评论(0) 推荐(0)
布局中的BFC---重点是前言
摘要：一、前言 说实话，听到BFC这个概念我心里一阵咯噔，这到底是什么？有种似曾相识的感觉，但是又很模糊。问了一下度娘，看到张鑫旭的《CSS深入理解流体特性和BFC特性下多栏自适应布局》。呀，原来是这东东啊。BFC应该是前端的基础知识，也许很多前端er工作中经常用到，但是未必真的归纳总结过（自己躺枪），反 阅读全文
posted @ 2018-05-06 18:37 leaf+ 阅读(216) 评论(0) 推荐(0)
svg和css实现波浪动效
摘要：效果： 截图有点模糊~ 实现： 《svg教程》 三、原形进度条 阅读全文
posted @ 2018-03-26 12:14 leaf+ 阅读(2647) 评论(0) 推荐(0)
绝对定位的子元素依靠内容自动撑开，移动到边缘不换行。
摘要：white-space: nowrap; 阅读全文
posted @ 2018-02-06 16:10 leaf+ 阅读(787) 评论(0) 推荐(0)
解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况
摘要：添加以上样式，官方说法是开启硬件加速，亲测有效。 兼容ios不支持:active伪类 阅读全文
posted @ 2017-12-05 17:00 leaf+ 阅读(469) 评论(0) 推荐(0)
去掉textarea和input在ios下默认出现的圆角
摘要：-webkit-appearance:none;/*清除ios默认圆角*/ border-radius:0; 阅读全文
posted @ 2017-11-07 15:47 leaf+ 阅读(1115) 评论(0) 推荐(0)
设置元素text-overflow: ellipsis后引起的文本对齐问题
摘要：给元素设置了这个属性之后，该行内元素和旁边的行内元素不对齐，解决办法： 给改元素设置： 阅读全文
posted @ 2017-08-10 10:19 leaf+ 阅读(531) 评论(1) 推荐(1)
css修改浏览器默认的滚动条样式
摘要：//滚动条样式 ::-webkit-scrollbar { width: 10px; } /* 垂直滚动条的滑动块 */ ::-webkit-scrollbar-thumb:vertical { border-radius: 4px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color:#71727... 阅读全文
posted @ 2017-07-31 18:35 leaf+ 阅读(1305) 评论(0) 推荐(0)
在移动端画出真正的1px边框
摘要：一、问题 写H5的样式时候，设置元素的边框为1px,不幸的事情在IOS设备上发生了，设计师会说，咦，边框怎么那么大，这是2px了吧？改成1px。我明明设置成1px了啊。 二、为什么边框变粗了？ IOS使用的是retina屏，因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在deviceP 阅读全文
posted @ 2017-06-11 23:56 leaf+ 阅读(4336) 评论(0) 推荐(0)
js原生获取元素的css属性
摘要：习惯了用jQuery的css()的方法获取元素的css属性，突然不用jquery了，当要获得元素的css时候，我瞬间停顿了一下，咦？咋获取元素的css值？比如获取元素的width。是这样么？document.getElementById("id").style.width? 一、getCompute 阅读全文
posted @ 2017-06-11 13:46 leaf+ 阅读(11077) 评论(0) 推荐(1)
用background-image做成条纹背景
摘要：效果： 实现： 阅读全文
posted @ 2017-06-05 16:57 leaf+ 阅读(408) 评论(0) 推荐(0)
页面常见布局以及实现方法--flex
摘要：页面布局是前端工程师的基本功之一，总结分析各种布局实现方法，可以让自己快速定位哪种方法实现功能，同时可以做到现最大程度的兼容。 一、水平居中 假设：最基本机构 .parent>.child 1、行内元素、文本元素、行内块元素 说明：只对行内元素有效；属性会继承影响到后代行内元素； 2、单个块级元素 阅读全文
posted @ 2017-01-22 16:44 leaf+ 阅读(653) 评论(0) 推荐(0)