Flexbox布局功能主要具有以下几点:
第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局;
第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小;
第三,可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间;
第四,可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;
第五,可以控制元素在页面上的布局方向;
第六,可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局;
第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小;
第三,可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间;
第四,可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;
第五,可以控制元素在页面上的布局方向;
第六,可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
2015-10-22
如果用left:50%类似的实现左右居中还可以这样写
.wrapper{position:absolute;left:50%;width:100px;margin-left:-50px}
上下居中类似
.wrapper{position:absolute;left:50%;width:100px;margin-left:-50px}
上下居中类似
2015-10-22
如果有not的话 应该是四种吧
:nth-of-type(2n+1)
:not(:nth-of-type(2n))
:nth-of-type(odd)
:not(:nth-of-type(even))
:nth-of-type(2n+1)
:not(:nth-of-type(2n))
:nth-of-type(odd)
:not(:nth-of-type(even))
2015-10-22
这教程真是误人子弟, 明明是在偶数次向后播放;
W3C官方的说法如下:
如果 animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。
W3C官方的说法如下:
如果 animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。
2015-10-21
border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 17 16 repeat;
这个数字到底应该怎么计算?我试了很久试出来的这些数字。
这个数字到底应该怎么计算?我试了很久试出来的这些数字。
2015-10-21
/*使用伪元素制作导航列表项分隔线*/
.nav li:after {content:"";width:1px;height:10px;background-color: black;position: absolute;top:20px;right:0px;}
.nav li:last-child:after {content:'';width:0px;height:0px;}
.nav li:after {content:"";width:1px;height:10px;background-color: black;position: absolute;top:20px;right:0px;}
.nav li:last-child:after {content:'';width:0px;height:0px;}
2015-10-21