CSS的display属性

网页设计中最常用的标签p、div、h1-h6（默认为块级元素）,span(默认为内联元素)

　　内联，内嵌，行内属性标签：
　　　　1、默认同行可以继续跟同类型标签；
　　　　2、内容撑开宽度
　　　　3、不支持宽高
　　　　4、不支持上下的margin和padding
　　　　5、代码换行被解析

　　块属性标签：
　　　　1、默认独占一行显示；
　　　　2、没有宽度时，默认撑满一排
　　　　3、支持所有css命令

1、把元素显示为内联元素和把元素显示为块级元素

<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>

 

posted @ 2014-06-11 19:01  胡椒粉hjf  阅读(430)  评论(0)  编辑  收藏  举报