1.overflow:处理文本溢出,属性值有visible、hidden、scroll、auto
a)visible:默认值,显示溢出文本
b)hidden:隐藏溢出文本
c)scroll:给容器加滚动条,无论内容是否溢出,都会有边框,如果溢出还会出现滚动条
d)auto:如果内容溢出会出现滚动条,如果没有溢出则不出现滚动条和边框
2.overflow-x:处理横向溢出文本visible、hidden、scroll、auto
3.overflow-y:处理纵向溢出文本visible、hidden、scroll、auto
4.溢出文本以省略号形式显示,需要分为三步
a)white-space:nowrap
b)overflow:hidden
c)text-overflow:ellipsis;
5.display:处理元素的显示方式,属性值有block、inline、inline-block、none
a)block:元素以块级元素的形式呈现,块级元素的默认值
b)inline:元素以行内元素的形式呈现,行内元素的默认值
c)inline-block:元素以行内块元素的形式呈现,行内块元素的默认值,注意行内块元素间有间隙(之所以会出现间隙,是因为HTML代码换行后浏览器将代码间的空白处理为空格),解决方法: 将HTML代码写下同一行或设置父元素的font-size:0
d)none:隐藏HTML元素,元素在页面中不占位
6.visibility:隐藏或显示HTML元素,属性值为visible、hidden
a)visible:默认,显示
b)hidden:隐藏,元素被隐藏后仍然占有原有位置
7.动态伪类选择器
a):link:设置超链接默认的显示效果(适用对象为超链接)
b):visited:设置超链接被访问过后的效果(适用对象为超链接)
c):hover:设置鼠标滑过元素时的样式(适用对象为所有元素)
d):active:设置元素被激活时的效果(适用对象为所有元素)
e)注意:这四个伪类选择器是有书写顺序的:LVHA
8.修饰列表属性
a)list-style-type:设置列表符号类型,属性值为disc、circle、square、none(无)
b)list-style-position:设置列表符号位置,属性值为inside(符号右移,移动到li里面)、outside(默认)
c)list-style-image:用图像设置列表的符号类型
d)list-style的复合形式,格式list-style:值1值2值3,(值没有顺序要求,通常将list-style-image的属性值写在最后)
9.背景的修饰
a)background-color:修饰背景色,属性值为颜色名称,十六进制代码,rgb值,rgba值
b)background-image:修饰元素的背景图
c)background-repeat:设置背景图平铺方式,属性值为repeat、no-repeat、repeat-x、repeat-y
repeat:默认值,平铺;
no-repeat:不平铺;
lrepeat-x:横向平铺;
lrepeat-y:纵向平铺;
d)background-position:设置背景图像的位置,属性值有两个,水平方向上的值和垂直方向上的值,格式:background-position:水平的值垂直的值,属性值的表示方法有两种,一种用表示位置的英文单词,另外一种是用像素值
单词表示法(注意如果背景图位于元素的中央,可以写一个center,即background-position:center)
水平:left/center/right
垂直:top/center/bottom
像素表示法:
background-position:50px100px;
e)background-attachment:设置背景图像的依附方式,属性值为fixed/scroll(默认,图片和文字同步滚动)
f)backround的复合形式:background:值1 值2 值3…
10.背景图的应用
a)修饰列表前面的符号:和list-style-image相比,更为灵活
b)“精灵图”(雪碧图):所谓精灵图就是指利用图像整合技术(如PS)将大量的小图像或背景整合到一张图片上,然后结合CSS的background属性来调节图片显示位置,使用精灵图好处如下:
将小的图像整合到一张图上,有利于管理,避免图像丢失;
降低了图像的总体积;
精灵图的不足,“针线活”,后期维护相对麻烦