1.透明度

opacity:0~1的數字

filter：alpha（opacity=0~100的數字）；

0表示完全透明，opacity屬性1或者filter的100代表完全透明；

説明:這是讓元素整體透明

如果只是讓顏色透明，用rgba（r，g，b ，透明度）

2.自適應

概念 ：能夠根據設備類型尺寸，自動調整頁面效果，以達到顯示一個比較正常的佈局效果。

1.寬度自適應

1.不設置寬度

2.使用百分比

3.最大最小寬度

min-width：*px 設置最小寬度
max-width：*px 設置最大寬度
2.高度自適應

1.不設置高度

注意:如果子元素浮動，會脱離文檔流，造成高度塌陷，所以需要清除浮動，解決這個問題

清除浮動的方式;

1.給元素的最後面添加一個空的div，並取類名clear

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

並給該元素設置唯一樣式

.clear{
clear: both;
	}

2.設置樣式

給浮動元素的父親添加類名clearfix

.clearfix:after{      		//在該元素的內容後面加添加一個偽元素
		display:block;		//偽元素類型偽塊元素
		content:''; 		//元素的內容為空
		clear:both;			//清除前面兄弟的浮動
		height:0;			//處理低版本的浮動
}
.clearfix( zoom:i)//Ie6清除浮動

3.給浮動元素的父親添加樣式 overflow:hidden;

2.使用百分比

注意;如果要實現第一屏頁面，需要先加

html,body{
width:100%
height:100%
}

3.使用最大最小高度

min-height；*px 設置最小高度

max-height：*px設置最大高度

3.偽元素
e:after{
	content:'內容'
	} //在e元素後面加內容
	e：before{
	content:'內容'
	}//在e元素前面加內容

偽類和偽元素的區別：【面試題】

偽類是一種臨時狀態，只有狀態觸發的時候生效，偽元素是一個假的元素，虛擬的dom節點。

偽類使用單冒號，偽元素用雙冒號

：after和：：after都是偽元素，只是不同版本寫法

：：selection{}//鼠標選中的文字樣式設置
：：placeholder{}//提示信息的樣式設置

兼容最小高度的寫法

min-height:*px;
height:auto !important;
_height:*px;

多種顯示與隱藏的區別

1.display：none；//不佔據原位置
2.visibility：hidden //會佔據位置| visible//顯示
3.opacity ：0 //會佔據原位置，可以點擊觸摸