CSS 3的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>
默认的div和span表现形式：http://jsfiddle.net/Web_Code/pt0j3b6n/embedded/result/
利用dispaly修改，分别在上述的div和span样式中添加如下规则：
//div中添加
display:inline;
//span中添加
display:block;
效果如图:http://jsfiddle.net/Web_Code/pt0j3b6n/1/embedded/result/
那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.ido321.com" target="_blank">菜单1</a></li>
<li><a href="http://www.ido321.com" target="_blank">菜单2</a></li>
<li><a href="http://www.ido321.com" target="_blank">菜单3</a></li>
<li><a href="http://www.ido321.com" target="_blank">菜单4</a></li>
</ul>
</body>
</html>
效果:http://jsfiddle.net/Web_Code/pt0j3b6n/2/embedded/result/
PS：inline-block和inline是有区别的，前者仍属于block，所以有高宽的属性，而后者没有。
2、inline-table类型：是一种表格相关类型，IE 8+及其它主浏浏览器均支持。更多表格相关类型见后文。
首先，看一个未使用inline-table的示例
<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>
效果是这样的：http://jsfiddle.net/Web_Code/pt0j3b6n/3/embedded/result/
如果要做成文字环绕表格的效果，就可以使用inline-table了，修改table的样式
table{
display:inline-table;
border:solid 3px #00ffaa;
}
文字环绕效果就出来了：http://jsfiddle.net/Web_Code/pt0j3b6n/4/embedded/result/
表格相关类型汇总
| 元素 | 所属类型 | 说明 |
| 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将标记指定为空心圆
<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>
5、none类型：将display的值指定为none之后，改元素将不会显示。PS：与visibility:hidden不同的是，display:none的元素将不会占据原空间，而visibility仍会占据原空间。
原文首发：http://www.ido321.com/1300.html
下一篇：CSS：7个你可能不认识的单位
CSS 3的display：盒类型详解的更多相关文章
- CSS系列 (04)：盒模型详解
盒模型 CSS盒模型分成W3C标准盒模型和IE模型 W3C标准盒模型(默认):box-sizing: content-box padding和border都会撑开盒子,改变盒子的宽度高度 总宽度:wi ...
- 弹性盒布局详解(display: flex;)
弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...
- css 06-CSS盒模型详解
06-CSS盒模型详解 #盒子模型 #前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张 ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- C#进阶系列——WebApi 接口返回值不困惑：返回值类型详解
前言:已经有一个月没写点什么了,感觉心里空落落的.今天再来篇干货,想要学习Webapi的园友们速速动起来,跟着博主一起来学习吧.之前分享过一篇 C#进阶系列——WebApi接口传参不再困惑:传参详解 ...
- C++11 并发指南六(atomic 类型详解四 C 风格原子操作介绍)
前面三篇文章<C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍)>.<C++11 并发指南六( <atomic> 类型详解二 std::at ...
- C++11 并发指南六(atomic 类型详解三 std::atomic (续))
C++11 并发指南六( <atomic> 类型详解二 std::atomic ) 介绍了基本的原子类型 std::atomic 的用法,本节我会给大家介绍C++11 标准库中的 std: ...
- C++11 并发指南六( <atomic> 类型详解二 std::atomic )
C++11 并发指南六(atomic 类型详解一 atomic_flag 介绍) 一文介绍了 C++11 中最简单的原子类型 std::atomic_flag,但是 std::atomic_flag ...
- 服务启动项 Start类型详解
注册表的服务启动项 Start类型详解 HKLM\SYSTEM\CurrentControlSet\services\ 下的服务项.不论有没有在services.msc服务管理控制台中显示,在注册表中 ...
随机推荐
- Windows Azure VM的两种shut down 方式
今天在调查Azure的价格时,发现下面的语句,来自http://azure.microsoft.com/en-us/pricing/details/virtual-machines/ * If my ...
- java小程序：求完全数
如果一个数等于它的不包括自身的所有因数之和,那么这个数就叫完全数．例如,6的不包括自身的所有因数为1,2,3,而且6=1+2+3,所以6是完全数． 大约2200多年前,欧几里德提出:如果2n-1是质数 ...
- 基于QT的换肤整体解决方案(QSkinStyle)（提供Linux的XP风格）
基于QT的换肤整体解决方案(QSkinStyle) 对QT这个成功的跨平台GUI库,本身内置了对换肤功能的实现,比如cleanlooks.plastique等跨平台风格:还有一些是和平台相关的风格,比 ...
- 64位下好神奇啊（增加了PatchGuard技术保护自己，SSDT是相对地址，参数通过寄存器与rdi来传递）
近期可能会有一个64位平台的驱动开发任务,找了些资料,对64位平台下的驱动开发略知一二了,好神奇. 一.在64位系统下,有一项PatchGuard技术,它是微软为了防止自己的代码被Patch,进而影响 ...
- 量化生产力Quantifying Productivity
I'm always on a lookout for interesting datasets to collect, analyze and interpret. And what better ...
- css link和@import区别用法
这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 1.link语法结构<link rel="stylesheet" ty ...
- 自己动手实现STL：前言
一.前言 最近,刚看完<STL源码剖析>,深深被实现STL库的那些的大牛们所折服.同时又感觉自己与大牛们差距之大,便萌生深入学习之意.如果仅仅只是看看<STL源码剖析>的话,又 ...
- SharePoint CMAL方式处理的 增，删，查，改
SPContext.Current.Web.Lists["UserInfo"]:获取网站的List,名称是:UserInfo userlist.AddItem():添加数据到Lis ...
- Window 下 VFW 视频采集与显示
引言 经过几天的努力终于将VFW视频采集与显示功能完整实现了,不得不说网上对这方面完整的详细讲解文章是在太少了.所以就要本人来好好总结一下让后来者不再像我一样折腾好久.在本文中我将详细讲解VFW视频采 ...
- 一天一个Java基础——排序
插入排序 直接插入排序: 当插入第i个数据元素k时,由前i-1个数据元素组成已排序的数据序列,将k与数据序列中各数据元素依次进行比较后,插入到数据序列的适当位置,使得插入后的数据序列仍是排序的. 直接 ...