1、frame 不能脱离 frameSet 单独使用，iframe 可以

2、frame 不能放在 body 中,否则不能正常显示

　frame 不能和 body 同时使用　iframe 可以和 body 同时使用

3、嵌套在frameSet中的iframe必需放在body中,不嵌套在frameSet中的iframe可以随意使用

4、frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制

区别：
frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架，可以用它将一个HTML文档嵌入在另一个HTML中显示。最大区别是网页中嵌入 iframe 包含的内容与整个页面是一个整体，而 frame 包含的内容是独立的个体，是可以独立显示的。

另外，iframe 还可以在页面中多次显示同一内容，而不必重复这段内容的代码。

5、 iframe 可以放到表格里面。frame 则不行。

    <table> 
       <tr> 
        <td><iframe id="" src=""></iframe></td><td></td> 
       </tr> 
    </table> 

6、iframe 是活动帧， 而 frame 是非活动帧

iframe 用起来更灵活，不需要frame那么多讲究，而且放的位置也可以自己设。

iframe 是内嵌的，比较灵活，不过也有不好的地方，就是位置在不同的浏览器和分辨率下有可能不同，有时会把本来好好的页面搞得变形。

iframe 是一个网页中的子框架,两网页间是父子关系，

iframe 是一个浮动的框架,就是在你的页面里再加上一个页面。

frame 用来把页面横着或竖着切开，iframe 用来在页面中插入一个矩形的小窗口。

frame 是把网页分成多个页面的页面。它要有一个框架集页面 frameset。

转自： <iframe> 和 <frame> 区别 - ~永无止境~ - cnblogs

有这样特别的需求，不需要使用 ajax，页面上也不存在这样的 form 表单，最好的方式就是通过 js 或者 jQuery 进行动态创建。

找到如下样例：

$(document).ready(function(){
    $("a.delete").click(function(event){
        action = this.getAttribute("action")
        form = $("<form></form>")
        form.attr('action',action)
        form.attr('method','post')
        input1 = $("<input type='hidden' name='input1' />")
        input1.attr('value','input1 value')
        input2 = $("<input type='text' name='textinput' value='text input' />")
        form.append(input1)
        form.append(input2)
        form.appendTo("body")
        form.css('display','none')
        form.submit()
    })
})

$().each

$().each 在 dom 处理上面用的较多。如果页面有多个 inpu 标签类型为 checkbox，对于这时用 $().each 来处理多个
checkbook，例如：

$("input[name='ch]").each(function(i){
    if($(this).attr("checked")==true)
    {
    //一些操作代码
    }
}
//回调函数是可以传递参数，i就为遍历的索引。

$.each()

遍历一个数组通常用$.each()来处理 例如：

$.each([{name:"JasonLi",email:"1207543053@qq.com"},{name:"hehe",email:"jasonli@seasidecrab,com"}],function(i,n)
{
    alert("索引:"+i+"对应值为："+n.name);
});
//参数i为遍历索引值，n为当前的遍历对象.

实现原理

其实jQuery里的each方法是通过js里的call方法来实现的。

call 调用一个对象的一个方法，以另一个对象替换当前对象。”网上更多的解释是变换上下文环境，也有说是改变上下文this指针

经典案例：

function add(a,b){
alert(a+b);}

function sub(a,b){
alert(a-b);}

add.call(sub,3,1);

jQuery each 源码

each: function( obj, callback ) {
        var length, i = 0;

        if ( isArrayLike( obj ) ) {
            length = obj.length;
            for ( ; i < length; i++ ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        }

        return obj;
    }

不多说，直接上代码：

.outDiv{
  width:30px;
  height:30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outDiv .blingbling{
    border: 6px solid #73BF00;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    -webkit-animation: scaleout 2.5s infinite ease-in-out;
    animation: scaleout 2.5s infinite ease-in-out;
  }
  @-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(1.0) }
    100% {
      -webkit-transform: scale(1.1);
      opacity: 0;
    }
  }
  @keyframes scaleout {
    0% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    } 100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        opacity: 0;
      }
  }

只要把这个样式加到你的图标或<div>上，就有效果啦~

例如：

<div class="outDiv">
        <img src="../img/xinhao.png" />
        <div class="blingbling"></div>
      </div>

其中1.3s是闪烁的频率，宽高自己调整。

转自：： CSS实现图标闪烁效果 - 宁晓 - CSDN

前言

首页上要加一个公司介绍的视频，一开始打算采用将视频上传到优酷，然后获取地址，用 iframe 进行播放（可以直接在视频下方分享处获取到相关的 iframe 代码）。后来采取的方式是将视频放到阿里云的云存储 OSS 上，拿到视频地址，然后直接 h5 video 标签播放。

不得不说，付费的就是强，视频预加载后很快就能播放。相比之前的，直接播放放在自家服务器上的视频（小视频要等一会儿，大视频基本没戏），要顺畅好多。

<video src="https://lejiao1688.oss-cn-hangzhou.aliyuncs.com/xx.mp4" controls="controls" autoplay="autoplay" loop="loop" width="380" poster="images/video_poster.jpg">
    您的浏览器不支持 video 标签。
</video>

video 几个基本属性介绍一下：

• controls
• autoplay
• loop
• poster

controls 决定是否展示播放的按钮，autoplay 决定是否在加载后之后自动播放，loop 是否自动循环播放，poster 存放的是未播放时的视频海报，默认取视频第一帧作为海报。

问题

因为视频是固定在首页的靠上的部分，如果在播放过程中上划页面，那么视频就看不到了。想要实现的效果跟很多视频网站一样，播放页上划后，视频进入画中画模式，在桌面（注意，不是浏览器视口内部）右下角会出现一个新的播放页面。

- 阅读剩余部分 -

前言

最近公司前端一直空缺，但项目还是得继续推进，没办法，我被顶包做了两天前端的工作。

可能在前端的心里，写页面比较简单，但对于我这一个半吊子的前端来说，是有些难点的。

碰到了非普通盒子布局的页面，就是内容溢出了盒子。还有菱形方块布局。这些都是之前没有想过的。

也接触了 flex 布局，以及 box-sizing 属性。菱形方块元素布局主要是通过 translate 实现。

这些以后再说，这次先聊多分辨率适配的问题。

问题

碰到一个按钮组相对于 banner 进行定位的情况，就是按钮得在 banner 内容的某一块上，不能覆盖内容或者离开特定的区域。

按钮组本身是我自己合的，要实现类似 switch 的效果的两个按钮组成的按钮组。实际效果如下：

这个按钮组合我是这样搞的：父级相对定位，左边短按钮，右边长按钮。两个按钮绝对定位，调整连个按钮重合在一起，左边按钮文字居中，右侧靠右然后通过调整内距实现右侧按钮居中效果。并且如果左侧按钮被覆盖，可以设置 z-index 使其上浮展示。

按钮得在 banner 图上，且在图上文字的正下面，通过调整按钮组合的 top 和 left 实现。但是因为 banner 宽度设成了 100%，这样高度就会随着视口的宽度变化和变化。那么按钮组合的位置也会变动，甚至从 banner 区域消失。

解决方案

通过 media screen 匹配不同的宽度区间，分别设置样式。

看到之前的小伙伴已经做了两组适配

@media only screen and (min-width: 1600px) {
...
}

@media screen and (width:1920px){
...
}

之前在 bootstrap 源码中又看到类似的代码，主要功能是解决不通屏幕的适配问题的。大概意思也能看得懂，上面是屏幕宽度最小 1600px，下面是屏幕宽度等于 1920px。因为放在正常样式下面，所以如果条件符合，就能够覆盖基本样式，实现动态适配的效果。

因为按钮组合比较大，所以屏幕宽度的区间要设置的多一些，如 (min-width: 1920px)， (min-width:1600px) and (max-width:1920px)。虽然在几个主要的区间里显示还好，但是随着视口宽度的变化，效果还是不够理想。主要因为没有设置按钮，按钮一直保持那么大，分辨率较低的情况下，很容易溢出或覆盖文字。

但总体效果还是实现了的，先这样吧，之后有更好的方案再替换。