第一阶段 XHTML.定位样式-CSDN博客

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