CSS——display
display的主要属性：
1、none：
- 不显示；
- 不保留其在页面中的位置，即相当于html文档中没有这个元素；
- visible:hidden虽然也不显示；但依然保存着他的位置和大小。
2、block：
- 表示块级元素；
- 每个元素默认占据一行。是div、h等块级元素的默认值；
- 允许设置width、height；
- 通过设置float、width可以将多个块级元素在一行内显示；
- 常见块级元素：p, h1~h6, div, ul,table ,ol
3、inline:
- 行内元素；
- 与其他元素在一行显示；
- 不能设置width、height。其宽度取决于内容的宽度，高度取决于内容的高度；
- 行高只能通过line-height来设置；
4、inline-block：
- 行内元素；
- 与其他元素在一行显示；
- 允许设置其高度、宽度；
5、可变元素：
根据上下文语境决定该元素为块元素或者内联元素。包括 applet、 button 、 iframe 、 map 、 object、 script 等，一旦有上下文确定为块级元素或者内联元素，就按照其显示。后续研究。
不错的文章：
http://blog.sina.com.cn/s/blog_61cc3ecf0100gih1.html
http://www.cnblogs.com/wkylin/archive/2011/05/12/2044328.html
示例：
1、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display 学习</title>
<style type="text/css">
.block{
display: block;
}
.inline{
display: inline;
}
.none{
display: none;
}
.back{
background-color:greenyellow;
border: solid gray 2px;
}
.float{
float: left;
width: 50%;
box-sizing: border-box;
}
.inlineblock{
display:inline-block;
}
</style>
</head> <body>
<div id="div_1" class="back">
div_1: 1:默认情况下我是块级元素 ; 2:父元素有多宽，我就有多宽，除非设置我的宽度；3:我的下面的兄弟元素必须另起一行，除非设置我和下面兄弟元素的float。
<br/> O(∩_∩)O哈哈~ 我就是这么霸道。<br />
温柔的一面是宽度、高度随便你设置
</div>
<div id="div_2" >
div_2: 我只能另起一行了
</div>
<div id="div_3" class="inline back">
div_3: 1、display: inline将我的默认块级元素属性改为行内元素了 ，2：我不允许设置我的宽度。因为内容的宽度就是我的宽度；高度也不允许设置，有几行就有多高；3、我允许下面的兄弟元素与我一行。
</div>
<div id="div_4" class="inline back" style="border-color: red;">
div_4: 我上面的兄弟找我，谁让我和上面的兄弟都是行内元素呢。另外告诉你们一个秘密，我下面还有一个兄弟 div_5，被隐藏了。连在文档流中的位置都没有了。
</div>
<div id="div_5" class="back none">
div_5: 悲催，不显示我就算了，居然连个位置都没有。记住了，以后要给我留个位置就不要设display: none;，而是 visibility:hidden
</div>
<div id="div_6">
div_5连个坑都没有占着，我只好挨着div_4了
</div>
<div id="div_7" class="float back" style="height: 100px;">
div_7: 谁说块级元素只能占据一行的，只要设置我的width，float，就会让下面的兄弟元素和我站在一行上
</div>
<div id="div_8" class="float back" style="height: 50px;">
div_8: 先不说了我要上去了，谁让我们哥俩设了float，偏偏width的和<=父元素的width， O(∩_∩)O哈哈~
</div>
<div id="div_9" class="float back" style="height: 50px;">
div_9: div_7的右边的空间还能塞下我，我也上去挤一挤； O(∩_∩)O哈哈~
</div>
<div id="div_10" class="inlineblock back" >
div_10: 1:像块级元素一样可以设置我的height、width; 2:像行内元素一样允许我下面的兄弟元素和我一行；
3：就是一个行内元素，只是允许设置高、宽
</div>
<span>我是行内元素</span>
</body>
</html>
2、效果：
CSS——display的更多相关文章
- CSS display:inline-block
CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...
- [转]CSS Display(显示) 与 Visibility（可见性）
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...
- [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 ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- CSS display：inline-block的元素特点：
将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,h ...
- CSS DISPLAY AND POSITIONING
CSS DISPLAY AND POSITIONING Review: Layout Great job! In this lesson, you learned how to control the ...
- CSS Display（显示）和Visibility（可见性）
CSS Display(显示)和Visibility(可见性) 一.简介 display属性设置一个元素应如何显示(隐藏不占用空间),visibility属性指定一个元素应可见还是隐藏(隐藏占用空间) ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
随机推荐
- HDU 3473 Minimum Sum （划分树求区间第k大带求和）（转）
题意:在区间中找一个数,求出该区间每个数与这个数距离的总和,使其最小 找的数字是中位数(若是偶数个,则中间随便哪个都可)接着找到该区间比此数大的数的总和 区间中位数可以使用划分树,然后在其中记录:每层 ...
- flume-ng源码阅读RollingFileSink(原创)
org.apache.flume.sink.RollingFileSink 这个类比较简单. source的种类有两种:一种是PollableSource:另外一种是EventDrivenSou ...
- python之Django rest_framework总结
一.rest api a.api就是接口 如: - http://www.oldboyedu.com/get_user/ - http://www. ...
- 将Sql2008的数据库转到2005
今天碰到一个特别伤心的事情. 事情的起因是这样的,现在我负责评教系统的维护工作.由于中途服务器转迁,迁移之前数据库版本是2005,而现在的服务器版本是2008R2的.在这个过程并没有发生什么问题. 问 ...
- 使用 ActiveMQ 创建 Java 应用
本章重点 Java 应用中内嵌 ActiveMQ 使用 Spring 内嵌 ActiveMQ 创建请求/响应应用 使用 Spring 构建 JMS 客户端
- release与debug的区别
http://www.cnblogs.com/JemBai/archive/2009/01/13/1374805.html
- 高性能Js—数据存取
数据存取 JavaScript中四中基本的数据存取位置 字面量:不存于某个变量内 本地变量:var定义的 数组元素 对象成员 字面量.全局变量读取速度 > 数组项.对象成员 .因为局部变量存在于 ...
- poj 1185 状压dp+优化
http://poj.org/problem?id=1185 炮兵阵地 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 291 ...
- axios 拦截 , 页面跳转, token 验证(自己摸索了一天搞出来的)
最近做项目,需要登录拦截,验证.于是使用了axios的拦截器(也是第一次使用,摸索了1天,终于搞出来了,真是太高兴啦!!!),废话不多说,直接上代码, 项目结构:vue-cli + webpack + ...
- github 第一次使用及出现的问题解决
1.前言: 我们使用git,自然是希望我们的项目可以方便的从本地上传到git的仓库中,从而实现项目版本控制和备份,但是,从GitHub的网站上传文件,只能上传25MB的数据,我想多数人的项目都不可能只 ...