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. AspNet Core :创建自定义 EF Core 链接数据库

    这两天比较忙,写的会慢一点. 我们以控制台演示 EF Core的链接数据库 首先创建控制台程序 创建数据上下文类 EntityTable /// <summary> /// 继承 DbCo ...

  2. 使用AOP实现缓存注解

    为何重造轮子 半年前写了一个注解驱动的缓存,最近提交到了github.缓存大量的被使用在应用中的多个地方,简单的使用方式就是代码先查询缓存中是否存在数据,如果不存在或者缓存过期再查询数据库,并将查询的 ...

  3. 从源代码到Runtime发生的重排序

     源代码和Runtime时执行的代码很可能不一样,这是因为编译器.处理器常常会为了追求性能对改变执行顺序.然而改变顺序执行很危险,很有可能使得运行结果和预想的不一样,特别是当重排序共享变量时.  从源 ...

  4. SourceTree 基本介绍

    Git的服务器端: 最出名的是GitHub,但是不能创建私有仓库,创建私有得需要Money Bitbucket:可以创建私有数据库,但是速度太慢,太消磨激情了 如果既想创建私有又想要激情,那只能自己搭 ...

  5. 询问Spring Bott和高并发框架两个问题

    这里我问两个问题,请大神告诉我. 第一个问题,如果我想用Spring Boot开发企业级的微服务,我该看哪些资料?比如数据库该如何配置?消息中间件该怎么设置?等等.或者可以推荐给我几本这方面的书. 第 ...

  6. 个人作业2:APP案例分析

    产品 产品名 网易云音乐 选择原因 除社交软件和浏览器以外,在手机里存在最久的也是使用次数最多的APP就是它了.不管换多少次手机和电脑,它始终在我的装机必备名单上. 调研与评测 第一次上手体验 第一次 ...

  7. Caused by: org.apache.ibatis.exceptions.TooManyResultsException: Expected one result (or null) to be returned by selectOne(), but found: 2

    异常信息 Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with na ...

  8. springboot命令启动

    gradle打jar包命令 jar { doFirst { def jarFiles = ''; configurations.compile.collect { jarFiles += it.nam ...

  9. iOS开发解决json串中的NSNull类型

    后端返回的数据中总会出现一些NSNull类型,当我们一处理程序就会崩溃,因此想到把返回的数据中的NSNull类型全部转换成@""空字符串.下面是转化方法: 1 自定义的几个方法:放 ...

  10. 小白的Python之路 PEP8 代码风格

    转载自http://www.douban.com/note/134971609/ Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下 ...