前端面試知識點準備（HTML、css）

1、iframe的缺點

*iframe會阻塞頁面的onload事件

*搜索引擎的檢索程序無法解讀這種頁面，不利於SEO

*會影響頁面的並行加載

（並行加載：同一時間針對同一域名下的請求）

解決方法：使用js動態給iframe的src加載頁面內容

-》iframe的優點

*重載頁面是不需要重載整個頁面，只需重載頁面中的一個框架頁

*技術易於掌握，使用方便，使用者衆多，主要用於不需要搜索引擎搜索的頁面

*方便製作導航欄

2.盒子模型

內容（content）、填充（padding）、邊框（border）、邊界（margin）

a.IE盒子模型

b.w3c盒子模型

區別：IE盒子模型包括border和padding

（基於此差別，w3c盒子引入box-sizing）

other。。。。。

1.對於行級元素，margin-top和margin-bottom對於上下元素無效，margin-left和margin-right有效（<a>標籤等）

2.對於相鄰的塊級元素margin-bottom和margin-top取值方式

   1）都是正數，取最大

   2）都是負數，取最小

  3）一正一負，正負相加

3.position

position爲元素定位屬性，包含：

1）absolute絕對定位：相對位置爲父元素非static的第一個父元素進行定位。如果找不到，則以窗口定位

2）fixed固定定位：相對瀏覽器窗口（不是body）進行定位

3）relative相對定位：相對其正常（默認定位）位置進行定位

4）static：默認定位

4.樣式導入的方式

共2種：1）<link rel="stylesheet"  href="index.css">

           2）@import

<style type="text/css">
    @import  "index.css";
</style>

區別：1.<link>除了引用樣式文件，還可以引用圖片等資源文件，而import只能應用樣式文件

         2.兼容性不同，<link>不存在兼容性的問題，import在IE5以上支持，是css2.1新增

         3.在樣式文件可以使用import導入其他的樣式表文件，而link不可以（是否可以嵌套導入）

         4.link應用css時，在頁面加載時同時加載，@import需要頁面完全載入後再加載

         5.link支持使用JavaScript控制DOM去改變樣式，而@import不支持。

5.：before和：：before的區別

相同點：1）都可以用來表示僞類對象，用來設置對象前的內容

            2）：before和：：before寫法等效

不同點：1）：before是css2的寫法，：：before是css3的寫法

             2）：before的兼容性要比：：before好，不過在H5中開發建設中使用：：before比較好

===========================================================================

*僞類對象通常會結合content屬性一起使用

*爲了對象會出現在DOM對象中，所以不能通過js來操作，僅僅在渲染層中加入

*爲了對象的特效通常會結合:hover僞類樣式一起使用，如

.test:hover ::after{
/*此時的animation和transaction纔會生效*/
}

6.css樣式的優先級

import>style>權重值

權重值：

1.標籤權重值=1

2.class權重值=10

3.id權重值=12

ps:權重值可以累加

7.如何居中元素

7-1      行級元素：text-align:center

7-2      塊級元素

.div{
    /*設置任意一個寬度後，利用margin屬性居中*/
    width:200;
    margin:0 auto;
}

7-3     浮動元素

7-3-1   不定寬度

<style type="text/css">
     .outer{
	float: left;
        position:relative;
	left:50%;
      }
      .outer div{
	position: relative;
	right:50%;
	}
</style>

<div class="outer">
   <div>水平居中不定寬度的浮動元素</div>
</div>

7-3-2  固定寬度

<style type="text/css">
    .outer{                                                             
       float:left;
       position:relative;
       left:50%;
       width:200px;                                                                                                                height:200px;
       margin-left:-100px;/*width的一半*/
      background-color:pink;/*爲了看到效果*/
    }
</style>

<div class="outer"></div>

7-3-4 絕對定位的div居中

.outer{
     position:absolute;
     left:50%;
     width:200px;
     height:200px;
     background-color: red;
     margin-left: -100px;
}

或者

.outer{
     position:absolute;
     left:0；
     right:0;
     width:200px;
     height:200px;
     background-color: red;
     margin:0 auto;
}

7-4  垂直居中

7-4-1  行級元素    通過設置line-height:{height:300px; line-height:300px;}

7-4-2  塊級元素 （固定高度）   

<style type="text/css">
     /*第一步  設置父元素的height與line-height一致*/
     .outer{
	height:200px;
	line-height:200px;
	background-color:pink;
     }
   /*第二步  設置居中元素的vertical-align和display屬性*/
      .outer  div{
	 vertical-align: middle;
	 display: inline-block;/*inline或者inline-block*/
       }
</style>

<div class="outer">
     <div>垂直居中</div>
</div>

7-4-3 塊級元素（不定高度）

父級元素的padding-top=padding-bottom

.outer{
	padding-top:100px;
	padding-bottom:100px;
	background-color: pink;
}

<div class="outer">
    <div></div>
</div>

8.display

8-1  常見屬性：1.none(隱藏元素)  2.block(塊級元素) 3.inline-block(內聯塊級元素) 4.list-item(列表項目) 5.table(<tabke>) , table-row-group , table-row(<tr>)  , table-cell(<td>)

8-2  行級元素浮動以後，display屬性值默認爲block

8-3  flex（彈性盒子）點擊打開鏈接

9.爲什麼要初始化css樣式

1.因爲瀏覽器的兼容性問題，有些標籤在各個瀏覽器的默認值不同，因此導致不同瀏覽器顯示的差異

2.初始化css樣式對SEO有一定的影響

10.代碼實現“品”字佈局

<style type="text/css">
	.main{
	     position: fixed;
	     left:0;
	     top:0;
	     width:100%;
	     height:100%;
	}
	.upper{
	    position: relative;
	    top:0;
	    height:50%;
	    width: 100%;
	}
	.down{
	   position: relative;
	   bottom:0;
	   height:50%;
	   width: 100%;
	}
	.square-1,.square-2,.square-3{
	   border:2px solid black;
	}
	.square-1{
	   width:50%;
	   margin:0 auto;
	   height: 100%;
	}
	.square-2{
	   position: absolute;
	   left:0;
	   bottom:0;
	   height:95%;
	   width:46%;
	}
	.square-3{
	   position: absolute;
	   right:0;
	   bottom:0;
	   height:95%;
	   width:46%;
	}
</style>

<div class="main">
     <div class="upper"> 
	<div class="square-1"></div>
     </div>
     <div class="down">
	<div class="square-2"></div>
	<div class="square-3"></div>
     </div>
</div>

11.均分原理實現“三角形”結構

.main{
      width:0;
      height:0;
      border:100px solid red;
      border-left-color: white;
      border-right-color: white;
      border-bottom-color: white;
}

<div class="main"></div>

或者利用反向思維

.main{
      width:0;
      height:0;
      border:100px solid transparent;
      border-bottom-color:red;
}

12.清除浮動

12-1  使用clear=both清除浮動

12-1-1  在浮動元素後使用一個含有clear:both屬性的塊級元素

<style type="text/css">
  .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
   }
   .float{
	height:200px;
	background-color: #000;
	float:left;
    }
    .clear{
	clear: both;
	/*確保清除浮動不佔用任何空間*/
	height:0;
	font-size:0;
	overflow: hidden;
     }
</style>

<div class="main">
      <div class="float"></div><!--浮動的元素-->
      <div class="clear"></div><!--清除浮動-->
</div>

12-1-2  使用<br  clear="all"/>

<div class="main">
     <div class="float"></div>
     <br  clear="all">
</div>

12-1-3  zoom:1+after

<style type="text/css">
   .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
   }
   .float{
	height:200px;
	background-color: #000;
	float:left;
   }
   .clear{
	zoom:1;
   }
   .clear::after{
	clear: both;
	content: "";
	display: block;
	height: 0;
   }
</style>

<div class="main  clear">
      <div class="float"></div>
</div>

12-2  使用overflow

<style type="text/css">
    .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
	overflow: hidden;/*hidden或者auto*/
     }
     .float{
	height:200px;
	background-color: #000;
	float:left;
      }
</style>

<div class="main">
      <div class="float"></div>
</div>

12-3  display:inline-block

<style type="text/css">
    .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
	display: inline-block;
     }
     .float{
	height:200px;
	background-color: #000;
        float:left;
     }
</style>

<div class="main">
       <div class="float"></div>
</div>

缺點：元素不再居中，需要利用position、margin-left等屬性調整

12-4  父級元素浮動

<style type="text/css">
     .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
	float:left;
     }
     .float{
	height:200px;
	background-color: #000;
        float:left;
     }
</style>

<div class="main">
      <div class="float"></div>
</div>