1. none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

2. inline:指定对象为内联元素。

3. block:指定对象为块元素。

4. inline-block:指定对象为内联块元素。(CSS2)

inline、block、inline-block的区别

html代码

<div class="first">inline</div>
<div class="third">inline-block</div>
<div class="second">block</div>

css代码

.first,.second,.third{
width:100px;
height:100px;
margin:50px;
padding:50px;
border: 1px solid black;
}
.first{
background-color: red;
display: inline;
}
.second{
background-color: green;
display: block;
}
.third{
background-color: yellow;
display: inline-block;
}

效果图

区别如下

inline没有宽和高,inline-block和block有宽和高;

inline的margin只有margin-left和margin-right,而inline-block和block都有;

block占一行,而inline和inline-block不占一整行;

三者都有padding。

4. list-item: 制定对象为列表项目。

.first,.second,.third{
width:20px;
height:20px;
margin:20px;
padding:20px;
border: 1px solid black;
display: list-item;
}

效果图

5. table:指定对象作为块元素级的表格。类同于html标签<table>(CSS2)

6. inline-table:指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)

7. table-caption:指定对象作为表格标题。类同于html标签<caption>(CSS2)

8. table-cell:指定对象作为表格单元格。类同于html标签<td>(CSS2)

9. table-row:指定对象作为表格行。类同于html标签<tr>(CSS2)

10. table-row-group:指定对象作为表格行组。类同于html标签<tbody>(CSS2)

11. table-column:指定对象作为表格列。类同于html标签<col>(CSS2)

12. table-column-group:指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)

13. table-header-group:指定对象作为表格标题组。类同于html标签<thead>(CSS2)

14. table-footer-group:指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)

使用table-cell可以实现水平垂直居中

html代码

<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>

css代码

.td{
display: table-cell;
border: 1px solid black;
width: 200px;
text-align: center;
height: 100px;
vertical-align: middle;
}

效果图

15. flex:将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

16. inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

css-display的更多相关文章

  1. CSS display:inline-block

    CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...

  2. [转]CSS Display(显示) 与 Visibility(可见性)

    CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...

  3. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  4. CSS Display(显示) 与 Visibility(可见性)

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...

  5. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  6. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  7. CSS display:inline-block的元素特点:

    将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,h ...

  8. CSS DISPLAY AND POSITIONING

    CSS DISPLAY AND POSITIONING Review: Layout Great job! In this lesson, you learned how to control the ...

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

    CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...

  10. css display属性详解

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

随机推荐

  1. TCP的十一种状态与三次握手分析(有图)

    我们知道TCP是面向连接的,我们只知道有连接断开,其实内部还有一些比较复杂的状态.去了解各个状态之间的切换有助于我们更加深入的了解TCP.下面我们就来分析各个状态. 1.如下图示(图源百度)图中显示出 ...

  2. 2017最新安装mysql教程及遇到的问题解决Windows下

    今天因为换了个LINUX系统 把我的E盘不小心给卸载了 结果还是不能用  导致 我E盘里面的mysql也都被删除了    所以又要在次重新装一个MYSQL 了    花了很多时间  也看了很多教程.好 ...

  3. BNUOJ34977夜空中最亮的星(数学,向量的应用)

    夜空中最亮的星 Time Limit: 2000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class name ...

  4. 【分享】iTOP4412开发板-Bluetooth移植文档

    [分享]iTOP4412开发板-Bluetooth移植文档 最近须要把Bluetooth移植到iTOP-4412 开发平台.查阅了相关资料,经过一段时间的研究.调试,最终成功的将蓝牙功能移植到了开发板 ...

  5. java多线程编程核心技术——全书总结

    这本书大致上是看完了,不过第七章结束的匆匆忙忙很不好. 不过好在还是看完了,勉强算吧. 回想这一年,挺感慨的,心里一直谋求着进步,却很难行动起来. 仔细想想确实啊,想一直进步肯定要牺牲自己的业余时间, ...

  6. Linux下select的用法--实现一个简单的回射服务器程序

    1.先看man手册 SYNOPSIS       /* According to POSIX.1-2001 */       #include <sys/select.h>       / ...

  7. 刚 安装 Oracle时,登录会出现的问题, ora-28000: the account is locked

    来这个连接 就OK了: https://jingyan.baidu.com/article/48b37f8d1ec3fd1a6464883a.html 第一步: 进入cmd: 然后将下面的sql输入就 ...

  8. ios学习——键盘的收起

    在开发过程中,我们经常会用到UITextField.UITextView等文本框,然后这些文本框在点击之后会自动成为第一响应者(FirstResponder),并自动弹出软键盘.然而,没有自动定义好的 ...

  9. Hive数据倾斜解决方法总结

    数据倾斜是进行大数据计算时最经常遇到的问题之一.当我们在执行HiveQL或者运行MapReduce作业时候,如果遇到一直卡在map100%,reduce99%一般就是遇到了数据倾斜的问题.数据倾斜其实 ...

  10. 推荐:让你快速搞定各服务端(api,pc,mobile,wechat)代码

    如果你在写服务端 (PHP) ,会因为项目须求(做app.pc.mobiel.微信) 而写几套代码的,你不觉得很累吗? 现在的很多开源框架商用版本在做程序方面都是这么一套一套的,维护起来,二开起来特别 ...