网页设计中最常用的标签p、div、h1-h6（默认为块级元素）,span(默认为内联元素)
内联，内嵌，行内属性标签：
1、默认同行可以继续跟同类型标签；
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析
块属性标签：
1、默认独占一行显示；
2、没有宽度时，默认撑满一排
3、支持所有css命令
<style type="text/css"> div{ display:inline; background:red;}/*区块元素将转换为内联元素*/ span{ display:block; background:green;}/*将内联元素转换为区块元素*/ </style> </head> <body> <div>我是div块级元素</div> <span>我是span内联元素</span> </body>
2、设置元素不可见和设置元素为inline-block()
<style type="text/css"> div{ display:none; background:red;}/*将元素设置为不可见*/ span{ display:inline-block; background:green;}/*还是内联元素 跟inline没什么区别,只有一点区别就是会自动加上一些边距,可以设置宽高*/ h1{ display:inline-block; background:blue;} </style> </head> <body> <div>我是div块级元素</div> <span>我是span内联元素</span> <h1>fasdfsadf</h1> </body>
inline-block特性：
1、块在一行显示；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度
问题：
1、代码换行被解析，也就是每个块之间有空隙，这个空隙大小随着字体的大小而改变；
2、ie6 ie7 不支持块属性标签的inline-block;
<style> body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} img{border:none;} /* 默认样式重置 (css reset) */ span,div{background:blue; width:100px; height:100px; display:inline-block;} </style> </head> <body> <span>区分样式</span> <span>区分样式</span> <span>区分样式</span> <div>块</div> <div>块</div> <div>块</div> </body>
<style> body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} img{border:none;} /* 默认样式重置 (css reset) */ .pages{ height:60px; background:#e8e8e8; width:600px; margin:90px auto; text-align:center;} .pages a{ background:#fff; border:1px solid #cdcdcd;color:#333333; padding:0 8px 0 9px; height:28px; line-height:28px; display:inline-block;} .pages a:hover{border-color:red;color:red;} .pages .active{ font-weight:bold; background:#fcf9ea;cursor:text;} .pages .active:hover{border-color:#cdcdcd;color:#333333;} </style> </head> <body> <div class="pages"> <a href="#">上一页</a> <a href="#">1</a> <a href="#">2</a> <a href="#" class="active">3</a> <a href="#">4</a> <a href="#">15</a> <a href="#">211</a> <a href="#">255…</a> <a href="#">下一页</a> </div>