一位初学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;
 }