Afeyer的博客

有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？前言webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这个滚动条demo2（纯

前言 今天无意间查看页面样式的时候无意间发现了User Agent Stylesheet,查询之后发现这个属性是浏览器默认样式如何修改浏览器默认样式 通常浏览器默认样式优先度相对比较低，因此我们如果需要修改某一样式的话只需要在自己代码中直接从写样式属性就可以了例如：修改input下面background-color样式,我们只需要在代码中写：input { background-

有好长一段时间没有写移动端Web页面了，今天下午在优化公司一个原有的一个移动web商城时发现商城在IOS系统中出现顶部搜索条和底部菜单栏在页面滚动式偶尔出现错位的问题，查看源码发现是由于顶部搜索条和底部菜单栏使用的是Flex定位导致的。在此稍稍整理下思路，把这个小方法分享给大家，希望可以帮到一些刚入坑的友友。解决思路解决方法其实挺简单，就是更改页面布局，使用 absolute绝对定位取代flex定

今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。骰子布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明，本节的HTML模板一律如下。<div class="box"> <span class="item"></span></div>上面代码中，div元素（代表骰子

很多前端开发者通常在写CSS样式的时候并不一定会注意到calc这个好用的计算属性，尤其在配合flexbox进行页面布局的时候，只能用amazing来形容。calc()语法calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示calc()的运算规则calc()使用通用的数学运算规则，但是也提供更智能的功能：使用“+”、“-”、“*” 和 “/”