珊瑚虫的圣白树开花之神秘人自爆内幕

张鑫旭博客的一篇css3盒模型文章,对我而言,实用价值挺大的,多次重复打开该文章学习,这一次决定转载到我的博客! 一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马,于是习惯性谷歌之,真是不谷不知道,一谷吓一跳.倒不是该属性本身,而是此属性作为导火索,让我了解了下CSS3中新的盒子模型--弹性盒子模型(Flexible Box Model).对于我

有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动web开发中,由于浏览器厂商的系统不同.版本不同,导致有部分机型不支持对弹性滚动,从而在开发中制造了所谓的 BUG.   上图如果在PC端中,我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果,而在手机端遇到的问题如下: ios4 和 andro

说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面的文本或模块.   响应式网页设计出现以来,更多是使用百分比布自适应布局,特别是在移动端,两端对齐的方式显得越来越重要.那么,如何使用css实现两端对齐,相信很多同学会文本对齐的text-align:justify,这是今天要讲的其中一种方式,另外还有两种更精彩的实现方式,请往下看~ 下图是需要实现

PNG是我们经常使用的图片格式,但是你真的了解PNG吗? 此次一淘前端分享会,一丝冰凉将带大家深入了解你不知道的PNG.首先有三个问题: 什么是 PNG?  PNG 有哪些特点? 如何优化 PNG? Png的秘密 from jieorlin Png的秘密 - 内容简介 1. PNG 的秘密-- 你真的了解 PNG吗? By一淘 UX 一丝冰凉             旺旺:yisibl 2. 首先我们来看三个问题: ◆什么是 PNG? ◆PNG 有哪些特点? ◆ 如何优化 PNG? 3. 一.

近期做的一个项目,该项目需要输出的数据很多,在表格中需要生成各种类型的数据,遇到了一个让人头疼的问题:长英文字符串的换行.找了不少资料,最终使用了word-wrap.table-layout各自的一个属性值,并结合项目实际的情况,做了一些兼容性处理,解决该问题,并在团队中做了一次分享,希望可以给大家带来帮助,提升对css长英文或者长字段换行的认识. 长英文或者长字段换行写法总结如下: 需要了解的3个属性 1.word-wrap:break-word  词内换行 只支持连续的英文和数字,在表格中失

通常我们想让内联元素为行块布局显示,有2种方法,最常见的是方法是.selector {float:left;......},第二种方法是.selector {display:inline-block;......},对于第二种方法,在IE浏览器中得到支持,测试结果会认为IE能识别display:inline-block属性,而最近查阅了资料后,得到结果并非如此...... display:inline-block ,简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递.这个属性目在主要

  CSS3和HTML5一样是网页设计的大势所趋,本篇文章来自腾讯内部饭卡充值改版项目的CSS3动画经验总结.虽然大家访问不到腾讯内部的饭卡站点,不过可以由此小窥一下有趣的动画示例哟. 计算法-css3动画帧数计算器"> bboy90:总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . (请使用chrome.safari或firefox浏览器看效果,效果地址) 实现上面"嘀卡萌风骚乱舞"的动画,比较麻烦的是,要凭感觉自己算参数写代码,重复试个千

微信 Android 5.1 和 iPhone 5.1 已正式发布了,据说本12月底,微信将推出 Winphone 5.0版本,全面支持微信支付,它绑定 IE10 浏览器,那么做微信公众号的 H5 页面,除了做好 webkit 兼容外,IE10 的兼容也是必不可少的. 曾经写过<常见CSS3属性对ios&android&winphone的支持>一文,当时写过对Windows Phone 7 和Windows Phone 8的对应的浏览器分别是IE9和IE10做好兼容,但由于产品

微信商户通有这么一个需求,用户打开H5页面后,引导用户到电脑下载设计资源包,由于各种内部原因,被告知无后台资源支持,自己折腾了一段时间找了下面2个办法,简单做下笔记. 使用mailto功能,让用户自己给自己发送一份包含资源包的下载链接 调用QQ邮件分享功能,让用户自己给自己发送一份包含资源包的下载链接   mailto使用方法 1.基础写法 当浏览者点击这个链接时,浏览器会自动调用默认的客户端电子邮件程序,并在收件人框中自动填上收件人的地址下面 <a href="mailto:peun@f