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属性来调节图片显示位置，使用精灵图好处如下:
将小的图像整合到一张图上，有利于管理，避免图像丢失;
降低了图像的总体积;
精灵图的不足，“针线活”，后期维护相对麻烦
网友评论