css
文章平均质量分 65
qiqi_77_
git地址:https://github.com/seven77Zhou
展开
-
css 实现六边形的两种方式,非canvas
方式一三个盒子旋转拼成实现原理:这个效果的主要css样式有:1.>transform: rotate(120deg); 图片旋转2.>overflow:hidden; 超出隐藏3.>visibility: hidden; 也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小...原创 2018-01-19 19:53:31 · 1332 阅读 · 0 评论 -
BFC
BFC的概念BFC(Block formatting context)直译为"块级格式化上下文"。block:Block-level box,块级盒子(div,p,section...),display 属性为 block, list-item, table 的元素inline:inline-level box, 内联级盒子(span,em...)display 属性为 inline, inlin...转载 2018-03-21 17:16:59 · 168 阅读 · 0 评论 -
rem 产生的小数像素问题
本文转载自:http://taobaofed.org/blog/2015/11/04/mobile-rem-problem/rem 产生的小数像素问题作者: 颂晨 发表于: 2015-11-04由于日常需求以无线居多,所以可以在业务中做一些尝试,如 rem,刚接触这个特性的时候,曾经一度爱不释手,仿佛在无线开发的坎坷路上寻找到一条捷径。然而随着使用范围的扩大,慢慢的发现了一些使用 rem 带来的问...转载 2018-03-12 12:51:29 · 2611 阅读 · 0 评论 -
css 高度随宽度比例变化
方案一:padding实现原理:一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此。使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果,将 padding-bottom设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bo...原创 2018-02-23 11:07:58 · 22669 阅读 · 2 评论 -
flex布局遇到过的小问题
想要使用flex布局实现上面这种效果,html:<ul> <li><span></span></li> <li><img width="100%" src="https://dummyimage.com/400x400/f5a2a5/FFF&text=product-原创 2018-03-01 18:08:15 · 6837 阅读 · 0 评论 -
div支持placeholder属性/模拟输入框的placeholder属性
实现方式:cssdiv:empty:before{content: attr(placeholder);color:#bbb;}div:focus:before{content:none;}转载 2018-04-02 11:03:56 · 1439 阅读 · 0 评论