定位
static 静态定位（不对它的位置进行改变，在哪里就在那里）
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。- fixed固定定位（参照物–浏览器窗口）—做 弹窗广告用到生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
- relative（相对定位 ）（参照物以他本身）
- 生成相对定位的元素，相对于其正常位置进行定位。
- absolute（绝对定位）(除了static都可以，找到参照物–>与它最近的已经有定位的父元素进行定位)
- 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一切皆为框
块级元素: div、h1或p元素 即：显示为一块内容称之为 “块框“ ;
行内元素: span,strong,a等元素 即：内容显示在行中称 "行内框";
使用display属性改变成框的类型 即：display:block;
让行内元素设置为块级元素，display:none; 没有框
相对定位：
如果对一个元素进行相对定位，它将出现在它所在的位置上。
通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动
.adv_relative {
position: relative;
left: 30px;
top: 20px;
}绝对定位：
元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，它的位置相对于最初的包含块。 .adv_absolute {
position: absolute;
left: 30px;
top: 20px;
}框架
frameset框架：
<frameset> —- 用来定义一个框架；双标签
不能和 <body> 一起使用rows、cols属性
rows 定义行表示框架有多少行（取值 px / % / * ）
cols 定义列表示框架有多少列（取值 px / % / * ）frame子框架
src 显示的网页的路径
name 框架名
frameborder 边框线（取值 0 / 1）
<frame> —- 表示框架中的某一个部分；单标签，要跟结束标志<noframes>属性
<noframes> 提供不支持框架的浏览器显示body的内容；双标签
<frameset>
<frame src=“” />
<frame src=“” />
<frame src=“” />
<noframes>
<body>内容</body>
</noframes>
</frameset><iframe>内联框架
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
允许和 body 一起使用
width 宽（取值 px / %）
height 高（取值 px / %）
name 框架名
frameborder 边框线（取值 0 / 1）
src 显示的网页的路径
css高级属性
opacity透明属性
对于IE6/7/，使用filter:alpha(opacity:值;) 值为0-100
对于Webkit，Opera，Firefox，IE9+，使用opacity:值; 值为0-1
对于早期火狐，使用-moz-opacity:值; 值为0-1
所以写透明属性时，一般写法是 opacity{
opacity:0.5;
filter:alpha(opacity：50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->针对早起版本的火狐兼容问题的解决
}border-radius圆角边框属性
border-radius:10px;
向 div 元素添加圆角边框
box-shadow阴影属性
box-shadow 属性向框添加阴影效果,后面跟4个参数。
box-shadow:0px 0px 10px #000;
<embed>属性
是HTML5中新增的标签,媒体嵌入插件标签，可以通过<embed>插入音频或视频<embed src=“media/music.mp3” />
格式.mid .wav .mp3等
DIV命名规范
企业DIV使用频率高的命名方法
网页内容类:
注释的写法: /* Footer */ 内容区/* End Footer */
摘要: summary
箭头： arrow
商标： label
网站标志： logo
转角/圆角：corner
横幅广告： banner
子菜单： subMenu
搜索： search
搜索框： searchBox
登录： login
登录条： loginbar
工具条： toolbar
下拉： drop
标签页： tab
当前的： current
列表： list
滚动： scroll
服务： service
提示信息： msg
热点： hot
新闻： news
小技巧： tips
下载： download
栏目标题： title
热点： hot
加入： joinus
注册： regsiter
指南： guide
友情链接： friendlink
状态： status
版权： copyright
按钮： btn
合作伙伴： partner
投票： vote
左右中： left right center
标题: titleid的命名:
导航： nav
主导航： mainbav
子导航： subnav
顶导航： topnav
边导航： sidebar
左导航： leftsidebar
右导航： rightsidebar
菜单： menu
子菜单： submenu
标题: title
摘要: summary
容器: container
页头： header
内容： content/container
页面主体：main
页尾： footer
导航： nav
侧栏： sidebar
栏目： column
页面外围控制整体布局宽度：wrapper
左右中： left right center页面结构
导航:
标志： logo
广告： banner
登陆： login
登录条：loginbar
注册： regsiter
搜索： search
功能区：shop
标题： title
加入： joinus
状态： status
按钮： btn
滚动： scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释： note
指南： guild
服务： service
热点： hot
新闻： news
下载： download
投票： vote
合作伙伴：partner
友情链接：link
版权： copyright功能
class的命名:
.barnews { }
.barproduct { }
.left { float:left; }
.bottom { float:bottom; }
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }颜色:使用颜色的名称或者16进制代码。
如字体大小,直接使用"font+字体大小"作为名称。
如对齐样式,使用对齐目标的英文名称。
如标题栏样式,使用"类别+功能"的方式命名。
注意事项:
一律小写;
尽量用英文;
不加中杠和下划线;
尽量不缩写，除非一看就明白的单词.
推荐的 CSS 书写顺序：
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
width
height
margin
padding
border
background
display
list-style
position
float
clear
显示属性
自身属性
文本属性