如果設置一個div 裝兩張以上的圖片，如果不設置好div的寬度和高度，就會使圖片溢出。
我們知道，div是可以由圖片撐開其寬高的，也就是說如果只放一張圖片的情況下，不設置div的寬高，div的寬高會默認是圖片的寬高。
但是如果是多張圖片要放進一個div 這樣雖然也可以，但是會影響后邊整體的布局，比如圖片外間距的設置，還有需要隱藏圖片時就不好處理了。
經過嘗試發現，如果設置給div 的寬度太小不足以容納所有圖片，則圖片會默認豎直排列，這時就發生溢出了，可以用 overflow: hidden; 樣式來隱藏溢出部分。
overflow常常用於父元素清除子元素浮動造成父元素的高度塌陷。
clear：both 常用於清除兄弟元素浮動的浮動，使其不會占據兄弟元素的位置。
有時候，我們是需要溢出的這部分的，比如要實現圖片的二維翻轉效果時，這時需要使用 CSS3的樣式 backface-visibility: hidden; 來設置隱藏div中的第一張圖片，並且在翻轉時只顯示面向屏幕的那張圖片。
backface-visibility: hidden;與 overflow：hidden 及 display：none的區別
display:none 隱藏元素，不占網頁中的任何空間，讓這個元素徹底消失（看不見也摸不着）
overflow：hidden 讓超出的元素隱藏，就是在設置該屬性的時候他會根據你設置的寬高把多余的那部分剪掉，剪掉的該區域可以放置其他內容，也就是說溢出的部分不再占據位置
backface-visibility: hidden; 把元素所在的層隱藏，只是看不到元素了，但是位置還是存在的。
CSS3 transform ：rotateX （角度） rotateY(角度) rotateZ(角度);
這是CSS３中新增的二維圖片翻轉的三個屬性，使用時應注意瀏覽器的兼容問題。
CSS３文檔上解釋是將元素繞着三個軸轉一定的角度。
但是發現這個角度並不一定是轉的角度，也可以是相對於元素起始位置的一個角度，
比如transform: rotateY(0deg); 就不是將元素繞ｙ軸轉 ０°，這樣相當於沒轉。
經過嘗試發現，如果將一張圖片先 transform: rotateY(１８０deg); 然后 transform: rotateY(0deg); 就會回到其最初沒轉１８０°的位置。
所以這里的０°並不是它實際轉了０°，而是相對於之前轉的 １８０°的又一個１８０°的偏移量。
同一個div中層疊的兩張圖片中的一張在進行翻轉時，會默認以它的中線為軸轉動，這樣如果其繞y軸旋轉會與另一張圖片發生交錯，如果轉180°就會轉到另一張圖片之前或之后。
絕對定位 相對定位與固定定位：
絕對定位：
絕對定位會使元素脫離文檔流，絕對定位是相對於離他最近的祖先元素進行定位的（一般開啟子元素的絕對定位也會開啟祖先元素的相對定位）
絕對定位會改變元素的性質，內聯元素變為塊元素，寬和高都被內容撐開
開啟絕對定位的元素如果不設置偏移量，則只會脫離文檔流不會發生移動
如果所有的祖先元素都沒有開啟定位，則會相對於瀏覽器窗口定位
相對定位：
不會使元素脫離文檔流
固定定位：
元素的position屬性設置為 fixed 時，開啟固定定位
固定定位也是一種絕對定位，其大部分特點與絕對定位一樣
不同的是，固定定位永遠都會相對瀏覽器窗口定位
一般如果開啟了子元素的絕對定位，就要開啟其父元素的相對定位。
外邊距：
當元素的外邊距為正值時會使其旁邊的元素發生移動，設置為負值時會使自身移動，並且設置為負值的情況居多。
以上均為個人心得筆記，如有不對之處還望指正