iframe有那些缺點

• 缺點：

iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
會影響頁面的并行加載。

• 知識點擴充：什么是并行加載

并行加載：同一時間針對同一域名下的請求。一般情況，iframe和所在頁面在同一個域下面，而瀏覽器的并加載的數(shù)量是有限制的。

• 解決方案

使用js動態(tài)給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的盒子模型唯一區(qū)別就是元素的寬度，元素的width=content+padding+border

• 我個人認為W3C定義盒子模型與IE定義的盒子模型，IE定義的比較合理，元素的寬度應該包含border（邊框）和padding（填充），這個和我們現(xiàn)實生活的盒子是一樣的，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 取值方式

1. 都是正數(shù)： 取最大值
   距離=Math.max(margin-botton,margin-top)
2. 都是負數(shù)： 取最小值
   距離=Math.min(margin-botton,margin-top)
3. 上面是正數(shù)，下面是負數(shù)或者 上面是負數(shù)，下面是正數(shù)： 正負相加
   距離=margin-botton+margin-top

元素的定位有哪些

• absolute絕對定位
  相對位置為父元素為static的第一個父元素進行定位
  外層：relative
  中間：static
  內部： absolute

• fixed固定定位（IE6不支持）
  相對于瀏覽器窗口進行定位
  top left bottom right other window

• relative相對定位
  相對于其正常（默認布局）位置進行定位

• static
  默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 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需要頁面網(wǎng)頁完全載入以后加載。
5、link支持使用Javascript控制DOM去改變樣式；而@import不支持。

::before 和:before有什么區(qū)別？

• 相同點

1、都可以用來表示偽類對象，用來設置對象前的內容
2、:befor和::before寫法是等效的

• 不同點

1、:befor是css2的寫法， ::before是css3的寫法
2、:before的兼容性要比::before好，不過在H5開發(fā)中建議使用::before比較好

• 新想法

1、偽類對象要配合content屬性一起使用
2、偽類對象不會出現(xiàn)在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入
3、偽類對象的特效通常要使用:hover偽類樣式來激活

.test:hover::before { /* 這時animation和transition才生效 */ }

css樣式的優(yōu)先級是怎么樣的？

• 樣式優(yōu)先級規(guī)則

1、優(yōu)先級順序為：!import>style>權重值
2、如果權重相同，則最后定義的樣式的起作用，應該避免這種情況

• 權重規(guī)則

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、浮動元素水平居中

• 寬度不固定的浮動元素