iframe有那些缺点
- 缺点：
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
会影响页面的并行加载。
- 知识点扩充：什么是并行加载
并行加载：同一时间针对同一域名下的请求。一般情况，iframe和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的。
- 解决方案
使用js动态给iframe的src加载页面内容，示例代码如下：
<iframe id="fram"></iframe>
document.getelementbyid("fram").src="a2.html"
盒子模型你是怎么理解的？
- 盒子模型有两种，W3C和IE盒子模型
（1）W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度
（2）IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border
我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。
(1) content-box 元素的width=content+padding+border
.test1{
box-sizing:content-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
- （2) border-box 元素的width=width（用样式指定的宽度）
.test1{
box-sizing:border-box;
width:200px;
padding:10px;
border:15px solid #eee;
}
1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效
2.对于相邻的块级元素margin-bottom和margin-top 取值方式
- 都是正数： 取最大值
距离=Math.max(margin-botton,margin-top)- 都是负数： 取最小值
距离=Math.min(margin-botton,margin-top)- 上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加
距离=margin-botton+margin-top
元素的定位有哪些
absolute绝对定位
相对位置为父元素为static的第一个父元素进行定位
外层：relative
中间：static
内部： absolutefixed固定定位（IE6不支持）
相对于浏览器窗口进行定位
top left bottom right other windowrelative相对定位
相对于其正常（默认布局）位置进行定位static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）
1、所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
2、absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
） 3、absoulte定位忽略padding，相对位置为相对定位容器的坐上角内边框
样式导入有哪些方式？
- link
import - 不同点
1、link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件
2、兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的
3、在样式表文件可以使用import导入其它的样式表文件，而link不可以
4、link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
5、link支持使用Javascript控制DOM去改变样式；而@import不支持。
::before 和:before有什么区别？
- 相同点
1、都可以用来表示伪类对象，用来设置对象前的内容
2、:befor和::before写法是等效的
- 不同点
1、:befor是css2的写法， ::before是css3的写法
2、:before的兼容性要比::before好，不过在H5开发中建议使用::before比较好
- 新想法
1、伪类对象要配合content属性一起使用
2、伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
3、伪类对象的特效通常要使用:hover伪类样式来激活
.test:hover::before { /* 这时animation和transition才生效 */ }
css样式的优先级是怎么样的？
- 样式优先级规则
1、优先级顺序为：!import>style>权重值
2、如果权重相同，则最后定义的样式的起作用，应该避免这种情况
- 权重规则
1、标签的权重为1
2、class的权重为10
3、id的权重为100
- 权重取值示例
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如何居中一个元素（正常、绝对定位、浮动元素）?
- 元素居中的方式
1、行级元素水平居中对齐（父元素设置 text-again:center）
<div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">
<span>行级元素垂直居中</span>
</div>
2、块级元素水平居中对齐（margin:0 auto）
<div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">
<div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 块级元素水平居中</div>
</div>
3、浮动元素水平居中
- 宽度不固定的浮动元素
