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:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  2. CSS属性Display(显示)和Visibility(可见性)

    隐藏一个元素可以通过把display属性设置为“none”,或把visibility属性设置为“hidden”.但是请注意,这两种方法会产生不同的效果. Visibility:hidden可以隐藏某个 ...

  3. CSS属性中Display与Visibility的不同

    大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility=&qu ...

  4. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  5. css的display属性小实验

    div与span是常用的盒子模型; 区别: div默认是垂直分布(独占一行)   span默认是水平分布(一行可以有多个) 通过float属性可以改变div容器的分布方式达到span容器的效果; 下面 ...

  6. !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)

    在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...

  7. css 可继承属性 display:inline-block 历史

    1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...

  8. HTML CSS 属性大全

    CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...

  9. 《Head First HTML与CSS》的CSS属性

    关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...

随机推荐

  1. day 64 crm项目(1) admin组件的初识别以及应用

    前情提要: 今天进入项目学习阶段,crm 一个又老又土又实用的入门项目 一:django回顾 二:事前准备 1:首先创建django项目 2:在model中创建数据 from django.db im ...

  2. (转)ReentrantLock可重入锁的使用场景

    原文: http://my.oschina.net/noahxiao/blog/101558

  3. 【NOIP2017】 宝藏 状压dp

    为啥我去年这么菜啊..... 我现在想了$20min$后打了$10min$就过了$qwq$. 我们用$f[i][j]$表示当前深度为$i$,访问了状态$j$中的所有点的最小代价. 显然$f[i][j] ...

  4. 03——Solr学习之Solr的使用(不会用)

    1.先放上次在linux搭建成功的solr管理UI界面 2.有个很蛋疼的问题我就要吐槽一下了 由于没接触过solr这玩意,在百度上一顿操作搜索怎么用,怎么导入数据,建索引库什么的,看了一大片别人的博客 ...

  5. (转)Python rsplit() 方法

    原文:https://www.cnblogs.com/wushuaishuai/p/7792874.html 目录 描述 语法 参数 返回值 实例 正文 回到顶部 描述 Python rsplit() ...

  6. django第三课 模版

    第一步 创建项目文件: django-admin.py startproject *** 第二步 进入该文件下创建文件夹templates,在该文件夹下创建thanks.html <!DOCTY ...

  7. Gen代码解读

    源代码为: package com.test19; public class Test04 { void spin(){ int i; for(i=0;i<100;i++){ ; } i = 0 ...

  8. 极高效内存池实现 (cpu-cache)

    视频请看 : http://edu.csdn.net/course/detail/627 1.内存池的目的 提高程序的效率 减少运行时间 避免内存碎片 2.原理   要解决上述两个问题,最好的方法就是 ...

  9. 数据库-转换sql语句

    文章描述:主要说明转换成SQL语句的过程.----必要信息(数据库名,表名,条件)转换成SQL语句 一些界面上数据增删改查的操作往往只需要输入一数据库名,表名,加条件就可以进行数据查询了,在这背后是怎 ...

  10. 开始使用Newbe.Pct-Web自动化测试

    前篇介绍了,使用 Newbe.Pct 之前的准备工作.本篇将开始介绍如何使用本项目运行第一个测试用例. 阅前语 从本篇开始,读者将会接触到使用一些代码.希望读者不必纠结于语法本身.出现代码的地方都会伴 ...