CSS3 flex的使用方法

CSS3 Flex实现元素的水平居中和垂直居中 转载 2017年03月06日 23:07:20 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技术,下面我就把这种布局叫Flex布局. 元素居中,相信作为前端工程师的你肯定会经常用到,不管是在水平方向居中,还是垂直方向居中,都可在你的职业生涯中徘徊.不过很多时候要实现垂直居中,还是比较麻烦的.不过你

如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE9支持CSS3和HTML5的标准.让IE支持CSS3的解析方法有很多种,(HTML5 Shiv – 让该死的IE系列支持HTML5吧)下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言

转自:http://www.tuicool.com/articles/auEbMzU   感谢他的分享, 一.图片自适应居中 实例图: 实例HTML: <div class="demo"> <img src="http://dummyimage.com/100x100" alt=""> </div> <div class="demo"> <img class="&

IE兼容CSS3圆角border-radius的方法 优化网站js效果,网上看见一个很简单方便的兼容圆角的方法,记下来. 和大家分享一下,知道的高手就当捧个过场.嘻嘻 1.下载border-radius.htc 2.CSS .radius{ -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc); } 优点: 一.最为方便让IE实现圆角

1.再说css3 flex 一旦一个容器赋予了display:flex属性,将会有以下特点: 项目无法设置浮动. 列表的样式会被清除. 无法使用vertical-align设置垂直对齐方式. 目前互联网上关于flex流动布局的文章很少,搜索关于flex的文章,大部分还介绍的是旧的知识点,显然已经不符合当前的w3c标准了,要想了解flex的相关内容,可以参考http://qianduanblog.com/2549.html.并且,支持flex的浏览器也很少,只有谷歌浏览器完全支持,其他低版本的we

判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false * @version 1.0 * @author ydr.me * 2014年4月4日14:47:19 */   function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [],

Flex采用遮罩方法图片裁剪 在线预览 http://rj.8634.com/xiaoshandong/ImageCropperDemo/ImageCropperDemo.html 源码工程下载 http://files.cnblogs.com/files/ffmpeg/ImageCropper.zip 截图    源代码 ImageCropperDemo.mxml <?xml version="1.0" encoding="utf-8"?> <m

上次我们用css3做动画,都是定义动画,其实我们有个简单的方法,就是使用动画库,所谓的动画库就是一个已经写好的css文件,它里面包含了很多做好的动画,我们使用时只要调用就可以了,它的步骤有这几步: 1:先用link引入动画库css文件. 2:给希望要动画的元素设置class(动画名  animated). 3:动画播放完毕,移除class. 这里要考虑到浏览器的兼容性: 这里用到一个one,它是一次性事件,这样写的话,等于每次执行注册事件都会绑定一次兼容和清除class.这样很占资源,我们我们一

原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚至它们是动态的或者不确定大小的新布局模型.Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间. 很多的设计师和开发者发现Flex布局很容易使用,它定位元素简单因此很多复杂的布局能够用很少的代码实现,引领更简单的开发过程.Flex布局的算法是基于方向的,不同于基