关于BFC平时用的也挺多的 只是之前一直没有总结过 这次就整理一下

定义

BFC(Block Formatting Context )中文意思就是 块级格式上下文的意思 w3c的定义是

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

这里重点讨论一下CSS3中可以实现的动画效果的animation属性

animation

Web 动画 API的动画接口表示一个单个动画播放器并且提供用于一个动画节点或源的回放控制和一个时间轴 animation属性在css3中可以用来动画化许多其他的css属性 比如color，background-color,height,width等 每个动画都需要使用@keyframes来定义规则 然后使用animation属性调用比如这样：

1
2
3
4
5
6
7
8
9
10
11

.ele{
    animation:changeColor 6s infinite;
}
@keyframes changeColor{
    0%{
       background: #0e0;
    }
    100%{
       background: #ff4;
    }
}

  最近在做IFE的任务，其中一个任务是利用CSS3实现3D轮播图 简单来说就是利用css3中transform属性中的rotateY实现轮播图的角度偏转 利用translateZ()让图片沿Z轴平移 利用transform-style: preserve-3d 实现3D效果 用persepective展现出3D视距 然后利用animation属性实现转动 接下来仔细说说这个过程和其中涉及到的这几个CSS3的属性说之前先看一下最终效果

  今天碰上一道这样的题 然后想说的是关于ES6的新特性 模板字符串

Description:

You probably know the “like” system from Facebook and other pages. People can “like” blog posts, pictures or other items. We want to create the text that should be displayed next to such an item.Implement a function likes :: [String] -> String, which must take in input array, containing the names of people who like an item. It must return the display text as shown in the examples:

1
2
3
4
5

likes [] // must be "no one likes this"
likes ["Peter"] // must be "Peter likes this"
likes ["Jacob", "Alex"] // must be "Jacob and Alex like this"
likes ["Max", "John", "Mark"] // must be "Max, John and Mark like this"
likes ["Alex", "Jacob", "Mark", "Max"] // must be "Alex, Jacob and 2 others like this"

For more than 4 names, the number in and 2 others simply increases.

做练习的时候发现这样一道题

Description:

Your goal in this kata is to implement an difference function, which subtracts one list from another.It should remove all values from list a, which are present in list b.If a value is present in b, all of its occurrences must be removed from the other:

1
2
3
4
5
6

difference([1,2],[1]) == [2]
difference([1,2,2,2,3],[2]) == [1,3]
difference([1,2,2,3,3,4],[3]) == [1,2,4]
function array_diff(a, b) {
  //your code
}