關於css陰影和浮動
盒子陰影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陰影和浮動