?
一位初學php的隨堂筆記，記錄自己的成長！
1.清除浮動
(1)格式
clear:both清除兩邊|left清除左邊
right清除右邊
高度塌陷:父元素中的子元素都浮動，而父元素
沒有設置高，那父元素的高為0
（2）萬能清除(在父元素中加清除)
.clear{
clear:both;
zoom:1;
}
.clear:after{
display:block;
content:'.';
height:0;
clear:both;
visibility:hidden;
}
2.布局顯示
(1)display:none 隱藏|
block 塊|
inline 行|
inline-block內聯塊
說明:
a. inline-block內聯塊是塊元素，
但有行元素不折行的特性
b.display:none 隱藏，不占位隱藏
(2)visibility:visible默認值|
hidden隱藏
說明：visibility:hidden,占位隱藏
3.背景(Background)
（1）背景顏色 background-color:value;
（2）背景圖片 background-image：url(圖像URL)；
（3）背景重復 background-repeat:repeat默認值|
repeat-x 水平方向重復|
repeat-y 垂直方向重復|
no-repeat 不重復
（4）背景位置 background-position：
value水平方向坐標 value 垂直方向坐標;
說明:
a.水平方向 left center right
垂直方向 top center bottom
b.如果background-position只有一個值
這個值代表水平方向，而垂直方向默認垂直
居中
例如 :background-position：right;//center
c.background-position:數值 數值;
單位px
正值背景圖片往右走，負值背景圖片往左走
(大盒子小背景圖片一般正值；
小盒子大背景圖片一般負值)
（5）背景固定 background-attachment:
scroll滾動默認值|fixed有滾動條背景固定
縮寫:
background:color image repeat
attachment position;
4.CSS精靈 (css sprites)
原理:將多個小的背景圖片整合到一個大圖中，
為了減輕服務器負擔
說明:CSS精靈背景圖片位置都是負值，最大值 0
5.列表(List)
（1）list-style-type:disc默認值實心圓|
circle空心圓|
square方塊|
decimal阿拉伯數字|
lower-roman小寫羅馬數字
upper-roman大寫羅馬數字
lower-alpha小寫英文字母
upper-alpha大寫英文字母
none
（2）list-style-image:url(圖像URL)；
（3）list-style-position:inside|outside 默認值;
縮寫形式:
list-style:type image position;
例如:
list-style:none;
新聞列表常用寫法
.list3{
list-style:none;
}
.list3 li{
background:url(dot.png) no-repeat left center;
padding-left:16px;
}
