教程集 > CSS教程 > 正文 CSS3中display的inline和block使用例子

CSS3中display的inline和block使用例子

发布时间：2019-10-31 编辑：jiaochengji.com

教程集为您提供CSS3中display的inline和block使用例子等资源，欢迎您收藏本站，我们将为您提供最新的CSS3中display的inline和block使用例子资源

在css3中display的属性也css2是一样的它可以分类inline和block。如div默认是block，span默认是Inline。可以通过display修改默认的表现方式了，下面来看一些例子。

在CSS中，使用display属性来定义盒的类型。总体来说，盒类型分为两类：inline和block。如div默认是block，span默认是Inline。可以通过display修改默认的表现方式。

<!DOCTYPR>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>block and inline elements</title>
    <style type="text/css">
        div
        {
           background:#aaff00;
        }
        span
        {
            background:#ffaa00;
        }
    </style>
</head>
<body>
    <div>div元素1</div>
    <div>div元素2</div>
    <span>span元素1</span>
    <span>span元素2</span>
</body>
</html>

利用dispaly修改，分别在上述的div和span样式中添加如下规则：

//div中添加
display:inline;
//span中添加
display:block;

那display的取值只有这两个吗？那就错了。display的不同取值，就表现出不同的盒类型。

1、inline-block类型：属于block盒类型，但显示时具有inline类盒型的特点。并列显示默认的对齐方式是底部对齐，可以用vertical-align修改。

利用inline-block制作水平菜单

<html>
<head>
<style type="text/css">
ul{
    margin:0;
    padding:0;
}
li{
    display:inline-block;
    width:100px;
    padding:10px 0;
    background-color:#00ccff;
    border:solid 1px #666666;
    text-align:center;
}
a{
    color:#000000;
    text-decoration:none;
}
</style>
</head>
<body>
    <ul>
        <li><a href="http://www.111cn.net" target="_blank">菜单1</a></li>
        <li><a href="http://www.111cn.net" target="_blank">菜单2</a></li>
        <li><a href="http://www.111cn.net" target="_blank">菜单3</a></li>
        <li><a href="http://www.111cn.net" target="_blank">菜单4</a></li>
    </ul>
</body>
</html>

PS：inline-block和inline是有区别的，前者仍属于block，所以有高宽的属性，而后者没有。

2、inline-table类型：是一种表格相关类型，IE 8 及其它主浏浏览器均支持。更多表格相关类型见后文。

首先，看一个未使用inline-table的示例

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy5301')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy5301><html>
<head>
<style type="text/css">
table{
border:solid 2px #00aaff;
}
td{
border:solid 2px #ccff00;
padding:5px;
}
</style>
</head>
<body>
淡忘~浅思
<table>
    <tr>
        <td>A</td><td>B</td><td>C</td><td>D</td>
    </tr>
    <tr>
        <td>E</td><td>F</td><td>G</td><td>H</td>
    </tr>
    <tr>
        <td>I</td><td>J</td><td>K</td><td>L</td>
    </tr>
</table>
你好
</body>
</html>

如果要做成文字环绕表格的效果，就可以使用inline-table了，修改table的样式

table{
display:inline-table;
border:solid 3px #00ffaa;
}

表格相关类型汇总

元素所属类型说明
table table 此元素会作为块级表格来显示，表格前后带有换行符。
tabel inline-table 此元素会作为内联表格来显示，表格前后带有换行符。
tr table-row 此元素会作为一个表格行显示
td table-cell 此元素会作为一个表格单元格显示
th table-cell 此元素会作为一个表格单元格显示
tbody table-row-group 此元素会作为一个或多个行的分组来显示
thead table-header-group 此元素会作为一个或多个行的分组来显示
tfoot table-footer-group 此元素会作为一个或多个行的分组来显示
col table-column 此元素会作为一个单元格列显示
colgroup table-column-group 此元素会作为一个或多个列的分组来显示
caption table-caption 此元素会作为一个表格标题显示
3、list-item类型：此类型可以将多个元素作为列表来显示，同时在元素的开头添加列表的标记

给示例中所有的div设定为list-item类型，用list-style-type将标记指定为空心圆

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy1847')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy1847><html>
<head>
<style type="text/css">
div{
    display:list-item;
    list-style-type:circle;
    margin-left:20px;
}
</style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
</html>

4、run-in类型和compact类型：元素被指定为run-in或者compact类型的时候，如果元素后面还有block类型的元素，run-in类型的元素将被包含在block类型元素内部，而compact类型被放置在

block元素的左边。这两个属性并没得到普及

5、none类型：将display的值指定为none之后，改元素将不会显示。PS：与visibility:hidden不同的是，display:none的元素将不会占据原空间，而visibility仍会占据原空间。

您可能感兴趣的文章：
Alpha Go 的原理浅析（深度学习与强化学习的融合）
CSS3中display的inline和block使用例子
 解决ie7下display: inline-block失效的BUG
JS display属性实例解析
 分享几个超级震憾的图片特效
 CSS3去除inline block 元素之间多出的空格
 css中去除inline-block元素间间距多种方法分享
 css3中flexbox伸缩盒深入理解
 js display与visibility有哪些区别
 css 导航菜单实现代码

上一篇：CSS学习：On having layout 下一篇：CSS3禁止网页中文本被选中代码

[关闭]

CSS3中display的inline和block使用例子

最近更新

浏览排行