CSS #定位 #顯示方式

啥是定位？就是控制元素在頁面中的顯示位置

1.普通流定位
2.浮動定位
3.相對定位
4.絕對定位
5.固定定位

1.普通流定位：說白了就是各種元素預設的定位方式
  行內,行內塊共用一行如果放不下自動就換行 
  塊級單獨成行 從上往下排列

2.浮動定位
  讓塊級元素水平排列 (專案如果沒有這個需求不要用)
  float:none;預設值
  float:left;在浮動的當前向左對齊
  float:right;在浮動的當前想右對齊

	浮動引發的特殊情況：
	浮動元素會在浮動方向上佔位
	元素一旦浮動，如果這個元素沒有定義寬度，浮動之後寬度靠內容撐開
	元素一旦浮動，就會變成塊級
	當文字，行內元素，行內塊元素遇到了浮動元素，不會被浮動元素壓在下面

高度坍塌

一個div，沒定義高度，內部所有元素都浮動。
導致整個div在預設文件流中找不到高度----------高度坍塌
解決方案
1.給父元素定義高度，如何父元素內部子元素數量較少，可以直接定義高度
2.父元素浮動，可以解決。但是影響了其他元素
3.給父元素設定overflow:hidden/auto; 如果父元素要求溢位顯示，就不行了
4.給父元素追加一個空的塊級元素當做子元素
  這個子元素設定clear:both.即可解決問題

顯示方式

1.顯示方式
  display:inline #讓元素按照行內元素的方式顯示
  display:block  #讓元素按照塊級元素的方式顯示
  display:inline #讓元素按照行內塊元素的方式顯示
  display:table  #讓元素按照table元素的方式顯示
  display:none   #脫離文件流隱藏
2.顯示效果
  visibility:visible #顯示
  visibility:hidden  #隱藏
  display:none 和 visibility:hidden 區別：none脫離文件流隱藏 ,隱藏看不見,但佔據位置
3.透明度
  opacity： 0-1;  透明程度
  rgba 和opacity 區別 :rgba只會改變當前顏色的透明度 opacity元素只要跟顏色相關的都會透明
4.垂直對齊方式的設定
  vertical-align
  使用的場合：table/td