码迷,mamicode.com
首页 > Web开发 > 详细

CSS的display属性

时间:2014-06-12 08:49:55      阅读:528      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

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

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

bubuko.com,布布扣
<style type="text/css">
    div{ display:inline; background:red;}/*区块元素将转换为内联元素*/
    span{ display:block; background:green;}/*将内联元素转换为区块元素*/
</style>
</head>
<body>
    <div>我是div块级元素</div>
    <span>我是span内联元素</span>
</body>
bubuko.com,布布扣

 bubuko.com,布布扣

 

 

2、设置元素不可见和设置元素为inline-block

bubuko.com,布布扣
<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>
bubuko.com,布布扣

bubuko.com,布布扣

 

 

CSS的display属性,布布扣,bubuko.com

CSS的display属性

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/LO-ME/p/3782575.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!