转: 详解css中的display属性

  在一般的CSS布局制作时候,我们常常会用到display对应值有block、none、inline这三个值。下面我们来分别来认识和学习什么时候用什么值。这里通过CSS display知识加实例讲解方法来学习和了解DIV CSS display。

首先,所有主流浏览器都支持 display 属性。其次,我们都知道display 属性规定元素应该生成的框的类型。默认值:inline

我们常用的display属性值有:

inline
block
inline-block
none
把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留。

那么,display:inline、display:block和display:inline-block有什么区别呢?

代码如下:

<style>
.inline{display:inline; width:100px; height:100px; padding:5px; }
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>

我们发现内联对象`inline`给它设置属性`height`和`width`是没有用的,致使它变宽变大的
原因是内部元素的宽高`+padding`。观察inline对象的前后元素我们会发现`inline`不单独占一行,
其它元素会紧跟其后。

而块对象`block`是可以设置宽高的,但是它的实际宽高是本身宽高`+padding`。
观察`block`的前后元素我们会发现`block`要单独占一行。
然而,当我们即需要div有宽高,又不希望它独占一行怎么办?

这个时候我们就需要使用`inline-block`了,再观察一下上面的demo,我们会发现`inline-block`
即具有`block`的宽高特性又具有`inline`的同行元素特性。
然而,在IE6/7下padding对inline的宽高是对其没影响的。

那么,display的其他属性值呢?

list-item 此元素会作为列表显示。

run-in此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

table 此元素会作为块级表格来显示(类似table),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似table),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似tbody)
table-header-group 此元素会作为一个或多个行的分组来显示(类似thead)
table-footer-group: 此元素会作为一个或多个行的分组来显示(类似tfoot)
table-row 此元素会作为一个表格行显示(类似 tr )。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 colgroup )。
table-column 此元素会作为一个单元格列显示(类似 col )
table-cell 此元素会作为一个表格单元格显示(类似 td 和 th)
table-caption 此元素会作为一个表格标题显示(类似 caption)

时间: 2024-10-20 12:42:49

转: 详解css中的display属性的相关文章

详解css中的display属性(行内元素和块级元素)

display属性 首先,所有主流浏览器都支持 display 属性.其次,我们都知道display 属性规定元素应该生成的框的类型.默认值:inline 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 那么,display:inline.display:block和display:inline-block有什么区别呢? <s

CSS学习笔记(9)--详解CSS中:nth-child的用法

详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#090} :nth-child(n

详解CSS中:nth-child的用法_大前端

http://www.daqianduan.com/3737.html 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#0

理解与应用css中的display属性

display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面,我将按照顺序将上述几种属性做一个完整的讲解. 第一部分:display:none none这个值表示此元素将不被显示.比如,当我们在浏览网页时,如果看到了某个烦人的广告遮挡了我们的实现,更为可气的是,它还没有关闭的选项,这时(以chrome为例),我们就可以按下F12,打开开发者工具,点击element,然后使用左上角的选择工具选中想要删

(转)实例详解CSS中position的fixed属性使用

关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left". "top". "right". "bottom" 属性进行定位. 那么,我们了解了fixed属性的说明后,就可以知道它的作用了.当我们需要使一个层相对于浏览器来自动调整该层的位置的时候,如果你使用position的absolute属性来定位

详解css中position属性

最近画富瑞的界面,很多元素的定位都是个问题(在我没有很详细的知道position属性之前) 后来上网查了下关于position的一些相关的属性和用法,遂整理了一下 position:属性:固定元素的定位类型.即元素脱离文档的布局流,在元素的任意位置显示. 关于position的属性值,有四种: 1.static:默认布局(默认值) 2.fixed:固定定位,顾名思义是固定的意思,和absolute定位类似,但是比absolute更"定"!(不随滚动条的滚动而滚动) 3.relative

详解CSS中clear属性both、left、right值的含义

前几天一朋友在群里问clear:left的意思,我以为是简单的清除浮动问题,就让他百度"清除浮动",导致中间有点小误会.后来我按照他写的DEMO,发现我自己也没完全理解clear:left和clear:right的意思.特别看了下手册,和写了几个DEMO,经过群里其他人指导,总结如下,希望对其他人能有点帮助. clear的值有四个 none:允许两边都可以有浮动对象: both:不允许有浮动对象: left:不允许左边有浮动对象: right:不允许右边有浮动对象. 老实说,我没真正理

举例详解CSS中的的优先级

计算优先级 优先级是根据由每种选择器类型构成的级联字串计算而成的.他是一个对应匹配表达式的权重. 如果优先级相同,靠后的 CSS 会应用到元素上. 注意:元素在文档树中的位置是不会影响优先级的优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*)    元素(类型)选择器    类选择器    属性选择器    伪类    ID 选择器    内联样式 基于类型的优先级 优先级是根据选择器类型进行计算的. 在下面的例子中,属性选择器尽管选择了一个ID但是在优先级计算法则中还是根据其类型计算.

举例详解CSS中的继承

CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元素都是文档树的一部分,除了最顶级的HTML元素,每个元素都有其对应的父级元素,每一个父级元素的CSS属性值都可以被应用到它的子元素中去. 举个栗子,H1标签包含着一个EM标签: EM就是H1标签的子元素,任何H1中继承的CSS属性值会自动在EM标签中生效,比如: CSS Code复制内容到剪贴板 h