1、img 標籤中的alt 與title的區別：

alt 

alt屬性的實質作用是在圖片無法正確顯示時起到文字替代的作用，不過在IE6下還起到了title的作用。

title

滑鼠滑過時顯示的文字提示。

對SEO優化的影響：

搜尋引擎對圖片理解是通過alt屬性，所以在圖片alt屬性中包含關鍵字的簡要文字說明，也是頁面優化的一部分。

（SEO優化：Search Engine Optimization,中文意譯為“搜尋引擎優化”。SEO是指通過對網站內部調整優化及站外優化，使網站滿足搜尋引擎收錄排名需求，在搜尋引擎中提高關鍵詞排名，從而把精準使用者帶到網站，獲得免費流量，產生直接銷售或品牌推廣。）

2、padding與margin區別：

padding是控制元件的內容相對控制元件的邊緣的邊距，margin是控制元件邊緣相對父控制元件的邊距。

在CSS中margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。在CSS中padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離。

2.1   padding

語法結構：（1）padding：10px;               四邊統一內邊距

                     （2）padding：10px 20px;         上下、左右內邊距

                     （3）padding：10px 20px 30px;       上、左右、下內邊距

                     （4）padding：10px 20px 30px 40px;          上、右、下、左內邊距

2.2    margin

語法結構：（1）margin：10px 20px;            上下、左右外邊距

                     （2）margin：10px 20px 30px;       上、左右、下外邊距

                     （3）margin：10px 20px 30px 40px;      上、右、下、左外邊距

3、img標籤的垂直居中問題：

img標籤在div中垂直居中靠上問題：網上的方法有很多，但是大多有副作用，比如將外部div設為table-cell，那麼這個div就是一個table的單元格了，margin就對他失效了，目前，找到的比較適合的方法是：

<div class="detail_title">
                        <img src="./index/img/燈泡_bulb3.svg" alt="">
                        <label>如何使用mideo</label>           
</div>

.detail_title{height:4rem;line-height:4rem;vertical-align:middle;padding:0 1rem;}
.detail_title img{width:2rem;height:2rem;vertical-align:middle;}
.detail_title label{font-size:1.8rem;vertical-align:middle;}

4、浮動元素的垂直居中問題：

在想要浮動的元素外面套一層span標籤，將浮動元素的float移到span標籤上，然後設定span的height和line-height與它父元素的一樣。

5、使div居中的方式：（cvte校招筆試題）

	<div id="root">
		<div id="child" style="width:200px">make me center</div>
	</div>

		#child{
			margin-left: 50%;
			margin-right: 50%;
			width: 0px;
		}

		#child{
			margin-left: auto;
			margin-right: auto;
		}

		#child{
			left: auto;
			right: auto;
		}

④不行

		#child{
			left: 50%;
			right: 50%;
		}