1、 元素类型的转换（display属性）
Display属性
属性值：
Block
Inline
None
大部分块状元素默认的display的值为block，其中li默认的值 list-item（列表元素）
大部分内联元素默认的display值为inline，其中input默认的值为：inline-block（行内块元素）；
内联元素里面特殊的一个：行内块元素（内联块元素）
特点：
1：可以设置宽高
2：在一行内逐个显示
3：当前元素的display的值为inline-block能支持vertical-align 属性。
2、 vertical-align属性
vertical-align:垂直对齐。
Top
Bottom
Middle
Baseline
让一个元素在父元素里面左右上下居中：
给父元素添加text-align:center(左右居中)
给当前元素添加：
Display:inline-bolck
Vertical-align:middle
在当前元素后面（不要回车），添加一个空的span标签。
给span设置样式：
Display:inline-block
Width:0
Height:100%
Vertical-align:middle
3、 css元素类型的分类总结
分类：块状元素、内联元素、可变元素
元素类型的转换：
Display属性：
属性值：
Block
Inline
Inline-book
None
List-item
行内块元素：input display为inline-blcok1Img标签：浏览器默认解析的display值为inline
标签的嵌套规则：
尽量让块状元素作为父元素存在；
内联元素的子元素尽量也是内联元素；
P标签中不能出现h1-h6；
P标签和h1-h6不能互相嵌套。
4、 图片默认的display属性值为inline，为什么图片能添加宽高？？？
从另一个角度对所有的标签进行分类。
分为：置换元素与非置换元素
置换元素：
典型的置换元素：img/input 依赖标签的属性或者元素自身的类型；‘
因为img是置换元素，所以能添加大小。因为置换元素在页面显示的过程中，生成一个框（框架），这个框能添加大小。
非置换元素：
不是置换元素的都是非置换元素。
5、 定位
定位：让元素的位置发生改变。
定位属性：
Position属性：设置或者检索元素定位方式。
（如果元素有了position属性，元素就知道自己要做位置移动了）
Position的属性值：（属性值是告诉元素参照物是谁）
制定坐标：left/right/top/bottom
Position的属性值：
1：position:static 【静态定位】 （position的默认值）
2：position:absolute 【绝对定位】
a. 绝对定位的参照物：
已经有定位的父元素为参照物
如果父元素都没有定位或者没有父元素，以文档为参照物
b. 绝对定位的特点：
不占据空间，脱离布局流。
/*-----------------------------------------------------------欢迎使用本样式：黑蝶乱舞(无名模版)
可修改字色或大小，其他不得擅自修改
如果要更换任何图片请先徵得我的同意
http://blog.pixnet.net/crystal08 - 我的部落格
http://www.infocrystal.com - 我的个人网站
-----------------------------------------------------------*/
HTML {
scrollbar-face-color: #ffffff
scrollbar-highlight-color: #ffffff
scrollbar-shadow-color: #ffffff
scrollbar-3dlight-color: #ffffff
scrollbar-arrow-color: #ffffff
scrollbar-track-color: #ffffff
scrollbar-darkshadow-color: #ffffff
overflow:hidden}
/* 整体设定 */
BODY {font-family:verdana
font-size:10px
color:#000000
scrollbar-face-color: #ffffff
scrollbar-highlight-color: #ffffff
scrollbar-shadow-color: #ffffff
scrollbar-3dlight-color: #ffffff
scrollbar-arrow-color: #ffffff
scrollbar-track-color: #ffffff
scrollbar-darkshadow-color: #ffffff
cursor:crosshair}
#container1 {border: 0px
WIDTH: 900pxheight: 450px
position: absolutetop:60pxleft:40pxbackground:url('http://img.photobucket.com/albums/v162/vasetang/pix/simpleblack.jpg')
no-repeat #ffffff left top}
} /* 连结字体设定 */
a {font-size:10pxfont-family:verdana, arial
color: #ADB2A6text-decoration: none}
a:hover {color: #B1B2B1text-decoration: none
cursor:help}
/* 输入框与下拉式选单(可分开设定)*/
input,select{color:#0000000font-size:11pxbackground:#FFFFFFborder:#C6C6C7 1px solid}
#pageheader h1 a {
DISPLAY:BLOCK
COLOR: #0000000
position: absolutetop: 60pxleft:500pxwidth:300pxtext-align:right
text-decoration: none
font-size: 20px} /* 网志名称 */
.description { width:300px
position: absolutetop: 440pxleft: 500pxtext-align:right
FONT-WEIGHT: normalFONT-SIZE: 10px
COLOR: #A8A8A8FONT-FAMILY: verdana, arial, sans-serif }
.description A{FONT-WEIGHT: normalFONT-SIZE: 10pxCOLOR:#A8A8A8}
.description A:hover{FONT-WEIGHT: normalFONT-SIZE: 10pxCOLOR:#A8A8A8}
h1 .description {FONT-SIZE: 10px} /* 网志目前动态描述 */
/* 文章区块设定(包括：文章部份等) */
#content {
FLOAT: rightWIDTH: 480pxheight: 300px
position: absolutetop: 110pxleft: 200px
MARGIN:auto
scrollbar-face-color: #ffffff
scrollbar-highlight-color: #ffffff
scrollbar-shadow-color: #ffffff
scrollbar-3dlight-color: #ffffff
scrollbar-arrow-color: #ffffff
scrollbar-track-color: #ffffff
scrollbar-darkshadow-color: #ffffff
overflow:auto}
.blog { PADDING: 10pxpadding-bottom:0px}
.blogbody {
PADDING: 10pxbackground:none
COLOR: #000000LINE-HEIGHT: 160%
FONT-FAMILY: verdana, arial, sans-serif}
.title {
COLOR: #000000text-align:centerbackground:#D8D8D8font-size:14px
MARGIN-TOP: 15pxmargin-left:5pxPADDING-left: 10px
FONT-FAMILY: verdana, arial}
.title a {font-size: 14px}
.date {COLOR: #949494font-size:12px
FONT-FAMILY: verdana, arial
PADDING-left: 10px}
.posted {color: #fffffffont-size: 0pxtext-align:right
MARGIN-BOTTOM: 5px
FONT-FAMILY: verdana, arial, sans-serif
PADDING-bottom:3px
border-bottom:1px solid #ffffff}
.more{
display:block
text-align:right
},.extended{text-align:right}
/* 选单区块细部设定 */
#links {
float:left
position: absolutetop: 110pxleft: 680px
WIDTH: 200pxheight: 300px
padding-top:0px
MARGIN:0px
scrollbar-face-color: #ffffff
scrollbar-highlight-color: #ffffff
scrollbar-shadow-color: #ffffff
scrollbar-3dlight-color: #ffffff
scrollbar-arrow-color: #ffffff
scrollbar-track-color: #ffffff
scrollbar-darkshadow-color: #ffffff
overflow-x:hidden
overflow-y:auto}
.sidetitle {
background:#D8D8D8
font:#0000000font-size:12px
font-weight:boldPADDING-left: 10px
margin-top:10pxmargin-bottom:5px}
.side { padding-left:0px}
.side a {display:blockborder-bottom:0pxCOLOR:#0000000}
.side a:hover {color:#B1B2B1}
.calendar {}
#boxProfile {}
#boxProfile .boxProfile0 {}
#boxProfile .boxProfile0 .sidetitle {}
#boxProfile .boxProfile1 {}
#boxProfile .boxProfile1 br {display:none}
#boxProfile .boxProfile1 .side {font-size: 1pxcolor:#ffffff}
#boxProfile .boxProfile1 .side .boxProfileImg {display:none} /* 个人大头照 */
#boxProfile .boxProfile1 .side .boxProfileLink {}
#boxProfile .boxProfile1 .side SELECT {width:200px} /* 我的好友 */
.boxGiftLink {DISPLAY: none} /* 送礼给谁 */
.boxAddFriendLink {DISPLAY: none} /* 加入好友 */
#boxNewArticle {} /* 最新的文章 */
.boxNewArticle1 br {display: none}
.boxNewArticle1 a{COLOR:#0000000}
#boxDate {} /* 文章汇集 */
#boxDate .boxDate0 {}
#boxDate .boxDate0 .sidetitle {}
#boxDate .boxDate1 br {display:none}
#boxDate .boxDate1 .side {}
#boxDate .boxDate1 .side select{display:none}
#boxCategory {} /* 文章分类 */
#boxCategory .boxCategory0 {}
#boxCategory .boxCategory0 .sidetitle {}
#boxCategory .boxCategory1 br {display: none}
#boxCategory .boxCategory1 .side {}
#boxNewComment {} /* 最新回应 */
#boxNewComment .boxNewComment0 .sidetitle img{display:none}
#boxNewComment .boxNewComment1 br {display: none}
#boxNewComment .boxNewComment1 .side {color:#fffffffont-size:1px}
#boxNewComment .boxNewComment1 .side a {display:blockfont-size:10px}
#boxNewComment .boxNewComment1 .side a:hover {color:#000}
#boxNewTrackback, /* 最新引用 */
.boxNewTrackback0,
.boxNewTrackback1{display:none}
#boxRssList {display: none}
#boxFolder {} /* 自订的资料夹 */
#boxFolder .boxFolder0 {}
#boxFolder .boxFolder0 .sidetitle{}
#boxFolder .boxFolder1 br {display:none}
#boxFolder .boxFolder1 .side {}
#boxCounter {} /* 参观人气统计 */
#boxCounter .boxCounter0 {}
#boxCounter .boxCounter0 .sidetitle {}
#boxCounter .boxCounter1 {}
#boxCounter .boxCounter1 .side {color:#0000000}
.syndicate {background: none}
.syndicate img{}
.powered {PADDING-RIGHT: 8px
PADDING-BOTTOM: 8pxMARGIN: 0pxPADDING-TOP: 8pxFONT-SIZE: 7pt}
.powered input{}
.powered img{ visibility:hiddenheight: 0pxwidth: 0px}
/* 回应区块设定 */
#text{ font-size:10pxfont-family:verdana, arialcolor:#0000000
background:#ffffff
margin-top:10pxpadding:10pxwidth:420px
scrollbar-face-color: #ffffff
scrollbar-highlight-color: #ffffff
scrollbar-shadow-color: #ffffff
scrollbar-3dlight-color: #ffffff
scrollbar-arrow-color: #ffffff
scrollbar-track-color: #ffffff
scrollbar-darkshadow-color: #ffffff}
TEXTAREA{ border: 1px solid #000000}
.comments-head {display:none}
.total-comments-div {
border-top: 0px solid #000000
padding-top: 0px
margin-top: 0px
}
.total-comments-div .trackbacks-head {}
.total-comments-div .trackbacks-head .comments-head {
border: 1px solid #000000padding: 7px
margin-bottom: 5px
}
.total-comments-div .comments-head {
border: 1px solid #000000padding: 7px
}
.total-comments-div .comments-bottom .comments-head {
border: 1px solid #000000padding: 7px
margin-top: 5px
}
.total-comments-div .comments-body {
border-bottom: 0px solid #000000
}
.total-comments-div .comments-body .comments-post {
text-align: right
color: #000000
}
.total-comments-div .comments-body form {
}
.comments-post {
text-align: rightcolor: #000000
padding-bottom: 3px
border-bottom: 0px solid #000000
margin-left: 0px}
.comments-post img{height: 8pxwidth: 8px}
.postuser{}
.postuser:hover{}
.postemail{}
.postemail:hover{}
.postweb{}
.postweb:hover{}
.replyBox span {}
.replyBox {border:0px} /*版主回应整体区块*/
.replyContent {} /*版主回应内容区块*/
.replyInfo {} /*版主回应时间区块*/
