CSS3基础总结
1、 CSS背景：
background-attachment：背景图像是否固定或者随页面其余部分滚动
background-color：背景颜色
background-image：背景为图片
background-position：背景图片起始位置
background-repeat：背景如何重复
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
2、CSS文本
color ：文本颜色direction ：文本方向
line-height：行高
letter-spacing ：字符间距
text-align ：对齐元素中的文本
text-decoration ：向文本添加修饰
text-indent ：缩进元素中文本的首行
text-transform ：元素中的字母
unicode-bidi ：设置文本方向
while-space ：元素中空白的处理方式
word-spacing ：字间距
text-shodow ：向文本添加阴影
word-wrap ：规定文本的换行规则
3、CSS字体
font-family：字体
font-size：字体尺寸
font-style：字体风格
font-variant：以小型大写字体或正常字体显示文本
font-weight：设置字体的粗细
4、 CSS链接
（1） 四种状态：
a:link a:visited a:hover a:active
（2） 链接样式：
text-decoration可用于去除样式
（3） 背景颜色
background-color
5、 CSS列表
修改列表标志，或将图像作为列表项标志
list-style：简写列表项
list-style-image：列表项图像
list-style-position：列表标志位置
list-style-type：列表类型
6、CSS轮廓
轮廓主要用于突出元素的作用
outline：设置轮廓属性
outline-color：设置轮廓的颜色
outline-style：设置轮廓的样式
outline-width：设置轮廓的宽度
7、CSS定位
定位：改变元素在页面上的位置
定位机制：
普通流（元素按照其在HTML中的位置顺序决定排布的过程浮动）
浮动
绝对定位
position ：把元素放在一个静态的、相对的、绝对的或者固定的位置中top ： 元素向上的偏移量
left ：元素向左的偏移量
right ：元素向右的偏移量
bottom ：元素向下的偏移量
overflow ：元素溢出其区域发生的事情
clip ：元素显示的形状
vertical-align ：元素垂直对齐方式
z-index ：元素的堆叠顺序
8、 css浮动
（1）浮动float：
left：向左浮动
right：向右浮动
none：不浮动
inherit：从父级继承浮动属性
注：单独抠出显示在左方。
每个元素都向左浮动，可实现横向排列。
一直紧密排列。
上面使用过浮动，下面的元素需要清除浮动。
（2）clear：去掉浮动属性
left，right：去掉左，右浮动
both：左右浮动均去掉
inherit：从父级集成来的clear的值
（3） 实现瀑布流：
<span style="font-size:14px;">*{
margin : 0px;
padding : 0px;
}
li{
list-style: none;
}
#div1{
width: 950px;
height: auto;
margin : 20px auto;
}
ul{
width : 250px;
float : left;
}</span>
9、CSS盒子模型
（1） 盒子模型
内容：margin（外边距），border（边框），padding（内边距），content（内容）
（2） 边框
A．样式：none，双线，虚线等
单边样式：每个方向的线。border-top-style，border-left-style，border-right-style，border-bottom-style.
B．边框宽度：border-width,border-top-width.......
C．边框颜色：border-color，border-top-color……
D. CSS3边框
圆角边框：border-radius：20px;
边框阴影：box-shadow:向右移动px 向下移动px 透明度px 颜色；
边框图片：border-image
（3） 外边距
margin，margin-left……
注意：外边距会合并，显示多的那方。
可通过左右外边距的设置使其居中（左右自适应auto也可），并且大小随浏览器变化。
10、CSS常用操作
去掉<ul>原始效果：list-style-type:none;
去掉<a>下划线：text-decoration:none;
（1） 对齐
margin：可进行水平对齐
position：可进行左右对齐
float：可进行左右对齐
居中：margin-left:auto; margin-right:tuto;//margin:0px auto;
居右//居左：position:absolute;right:0px;//float:left;
（2） 尺寸
height：元素高度
width：元素高度
line-height：行高
max-height：元素最大高度
max-width：元素最大宽度
min-width：元素最小宽度
min-height：元素最小高度
（3） 分类&&导航栏
clear：清除浮动
cursor：鼠标指针形状
display：是否及如何显示元素
float：向哪个方向浮动
position：元素位置静态，相对，绝对，固定
visibility：元素是否可见
注： display:inline; 一行显示，li标签内设置
display: block; 块元素换行显示
导航内容可以用padding设置间距
（4） 图片
< img width=”” height=””> 可直接设置图片大小
css中可设置透明度：opacity:0到1；
11、C SS3选择器
（1） 元素选择器 a{}
（2） 选择器分组
A． h1,h2{}
B． *{}
（3） 类选择器 .class{} 可结合元素使用
（4） ID选择器 #id{}
（5） 属性选择器 [title]{}
具体属性值选择：a[href]= “http://baidu.com” ]{}; //属性值必须完全匹配
部分属性值匹配：[title~=”content”]{}
（6） 后代选择器：可隔代
例如：<p> this is a<strong> interesting <i>page</i> lalala</strong>lalala</p>
p i{
color:red;
}
（7） 子元素选择器：只可下代，不可隔代
p>strong>i{
color:red;
}
（8） 相邻兄弟选择器
选择后一个兄弟元素 li+li{} 第一个li没有效果，其后li有效果