關於css陰影和浮動

標籤：軟體測試   get   添加   開始   軟體   targe   after   它的   lan   

盒子陰影box-shadow

box-shadow：0 0 1px #000 inset;

水平  垂直   模糊  顏色 ；

   [1] inset代表框內陰影,不加inset代表框外陰影

   [2]第1個值為0時，代表左右邊框陰影為1px範圍
      第1個值為正整數 代表左邊框陰影
      第1個值為負整數 代表右邊框陰影
      同理
      第2個值為0 代表上下邊框陰影
      第2個值為正整數 代表1px陰影距離上邊框多少
      第1個值為負整數 代表下邊框陰影設定

(注意：box-shadow：0 0 10px 顏色 ；四周發光；)

 

四、 float浮動問題

[1] 元素的高度是由他的子項目來決定的，當一個元素的子項目都浮動後該元素就沒有高度了

[2] 當一個元素float 以後它的父親，和兄弟認為它不存了

    它不再參與父親高度的計算

    兄弟會佔據他原來的位置

[3] 它的寬度就不再獨自佔一行而是由他的文字（內容的寬度）來決定。

[4] 不管怎麼float 它都不會超過父親的範圍。

[5] 誰先float 誰優先靠在父親元素的左側或者右側（html標籤在前面，就是先）

[6]只要浮動元素前面有 內容無論行內還是塊級浮動元素都會另起一行；

[7]行內元素設定float 以後會轉換為塊層級元素

[8]浮動元素都是從父親的左側或者右側開始水平排列 ，如果父親元素寬度容不下該元素，該元素就會另起一行

[9] clear:left;指該元素左邊不準出現浮動元素

    clear：right 右邊不準出現浮動元素

    clear:both 該元素左右都不準出現浮動元素（無論怎樣單獨佔一行）

[10]只有父親元素最後一個元素沒有浮動 ，父親元素的背景就會包括所有的子項目

解決子項目都浮動後父親元素沒有高度的辦法

給該父親元素添加 clearfix class名

.clearfix:after{ content:""; display:block; clear:both; height:0; visiblity:hidden;}

清除浮動的幾種方法：

下面總結8種清除浮動的方法（測試已通過 ie chrome firefox opera，後面三種方法只做瞭解就可以了）： 
1，父級div定義 height

關於css陰影和浮動