display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit

其中常用的的有none、inline、block、inline-block。分别的意思是:

1、none: 元素不会显示,而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden, 是保留元素的空间的。

2、inline: display的默认属性。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的display 属性设为 inline, 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度(font-size)和padding。

3、block: 将元素将显示为块级元素,元素前后会带有换行符。设置为block后,元素可以设置width和height了。元素独占一行。

4、inline-block:行内块元素。这个属性值融合了inline 和 block 的特性,即是它既是内联元素,又可以设置width和height。

看例子

.inline{
display:inline;
width:100px;
height:100px;
padding:10px;
background-color:red;
}
.block{
display:block;
width:100px;
height:100px;
padding:10px;
background-color:green;
}
.inline-block{
display:inline-block;
width:100px;
height:100px;
padding:10px;
background-color:blue;
} <div class="wrap">
<div class="inline">
inline
</div>inline
<div class="block">
block
</div> block
<div class="inline-block">
inline-block
</div>inline-block
</div>

这里提及下内联元素和块级元素的一些特点:

内联元素:

和其他元素都在一行上;
   元素的高度、宽度及顶部和底部边距不可设置;
   元素的宽度就是它包含的文字或图片的宽度,不可改变。

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

块级元素:

每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行);
   元素的高度、宽度、行高以及顶和底边距都可设置。
   元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form

内联块状元素:

和其他元素都在一行上;
   元素的高度、宽度、行高以及顶和底边距都可设置。

常用的内联块状元素有:
<img>、<input>

其他display的属性值不是很常用,其具体的含义如下:

list-item:     此元素会作为列表显示。
run-in:     此元素会根据上下文作为块级元素或内联元素显示。
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>)
inherit:     规定应该从父元素继承 display 属性的值。

另外有两个已经废除的属性值:
compact     CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker     CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

CSS display属性的值及作用的更多相关文章

  1. CSS display 属性

    实例 使段落生出行内框: p.inline { display:inline; } 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explor ...

  2. css display属性

    C:内联元素加上display:block后被块级化.块级元素一般是其他元素的容器,可容纳内联元素和其他块状元素,块级元素排斥其他元素与其位于同一行,width和height起作用.因此,可以定义其宽 ...

  3. css display属性详解

    css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...

  4. CSS Display属性与盒模型

    由于HTML流式文档的特性,页面布局往往是新手最为头疼的问题之中的一个. 每一个HTML元素都会渲染为一个Box,可分为inline Box和block Box. 依据display属性的不同.Box ...

  5. CSS display属性学习

    ---恢复内容开始--- http://www.w3school.com.cn/cssref/pr_class_display.asp 所有主流浏览器都支持 display 属性,如IE,Firefo ...

  6. CSS display 属性详解

    定义display 属性设置是否及如何显示元素. 继承性: No 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不 谨慎会很危险,因为可能 ...

  7. CSS margin属性取值

    margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...

  8. Code笔记之:CSS+HTML display 属性

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

  9. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

随机推荐

  1. 黑马程序员 Java基础<九>---> 多线程

    ASP.Net+Android+IOS开发..Net培训.期待与您交流! 多线程 一.概述: 1.线程是什么 说到线程,我们就得先说说进程.所谓进程,就是一个正在执行(进行)中的程序,每一个进程执行都 ...

  2. 每日一小练——Eratosthenes 筛选法

    上得厅堂.下得厨房,写得代码.翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:Eratosthenes筛选法 内容: 求质数是一个非常普遍的问题,通常不外乎用数去除.除到不尽时,给定的数就是质数.可是 ...

  3. 第001篇——C#学习计划开启

    大年三十了,选在今天开启Blog,就是为了克服拖延症! Windows桌面程序,多年的执念,到现在一直不会写,再拖拉谁知道又要拖几年? 特此立下目标: 基本掌握C# winform 半年内可以做出一些 ...

  4. 【27前端】背景半透明rgba LESS实践

    今天有看到司徒正美<背景半透明rgba最佳实践>的文章和里面推荐的一个在线工具CSS背景颜色属性值转换  . 于是联系到自己的less库,新技能Get. 内容如下: /*在你的less库中 ...

  5. HibernateTemplate 常用方法

    HibernateTemplate 提供非常多的常用方法来完成基本的操作,比如通常的增加.删除.修改.查询等操作,Spring2.0更增加对命名SQL查询的支持,也增加对分页的支 持.大部分情况下,使 ...

  6. iOS设计模式解析(二)抽象工厂方法

    抽象工厂方法:提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类 与工厂方法区别: 抽象工厂通过对象组合创建抽象产品.工厂通过类集成创建抽象产品 抽象工厂创建多系列产品.工厂创建一种产 ...

  7. HTML4如何让一个DIV居中对齐?float输入日志标题

    float:left,right clear:both 如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以 ...

  8. JavaScript、jQuery获取页面及个元素高度、宽度

    Javascript获取获取屏幕.浏览器窗口 ,浏览器,网页高度.宽度的大小网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.client ...

  9. 封装jQuery插件的步骤

    引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...

  10. 将warning设为错误

    在程序编写过程中,我们有时会因为现实情况将现在无法实现的部分功能设为warning #prama warning ------------------ 为了方便查找warning,或查看某部分的警告, ...