下载文档原格式
display的32种写法你知道『回』字有四种写法，但你知道display有32种写法吗？今天我们⼀⼀道来，让你⼀次性完全掌握display，从此再也不⽤对它发愁。
从⼤的分类来讲，display的32种写法可以分为6个⼤类，再加上1个全局类，⼀共是7⼤类：外部值所谓外部值，就是说这些值只会直接影响⼀个元素的外部表现，⽽不影响元素⾥⾯的⼉⼦级孙⼦级元素的表现。
display: block;这个值⼤家不陌⽣，我们最熟悉的<div>缺省就是这个值，最基本的块级元素，属于css⼊门初学者都知道的概念，只要是容器类型的元素基本都是这个值。
除<div>之外，还有<h1>到<h6>，<p>，<form>，<header>，<footer>，<section>，<article>天⽣都是这个值。
display: inline;这个值⼤家也不陌⽣，⾏内元素嘛，只要是个⾏内元素都是这个值，最典型的是<span>，还有<a>，<img>，以及古代html语⾔当中的<b>，<i>都属于这⼀类型。
display: run-in;这个值有点奇怪，通常没⼈⽤它，但你可以知道它。
因为除了IE和Opera⽀持它以外，其他所有主流浏览器包括Chrome, Safari, Firefox全都对它置若罔闻。
这东西说⽩了也没什么神秘，它的意思就是说如果我们命令⼀个元素run-in，中⽂意思就是『闯⼊』！那么这个元素就直接闯⼊下⼀⾏。
⽐如说这样：写起来⼤概就是这样：<div class="a">aaa</div><div class="b">bbb</div>.a {font-size: 36px;display: run-in;}这有什么⽤呢？我们拿span设置font-size⼀样可以实现这个效果，就让IE⾃⼰跟⾃⼰玩去吧！说实话，在⼈⼒资源如此宝贵的今天，IE的产品经理不知脑⼦是不是进⽔了，不派⼯程师去实现那么多⽐这重要的多得多的特性，却花时间做这么个没⽤的玩意⼉，难道⼯程师的时间不是⾦钱吗？难怪市场占有率连年下滑。
CSS中样式display属性inline，block及inline-block分类：div 元素默认display属性为block 为块状元素，⽆论div中⽂字字数，总以块状显⽰，即占满浏览器宽度。
[html]1. <div style="background-color:red;">测试测试</div>[html]1. <div style="display:inline;background-color:red;">sss</div>⽽span元素默认display属性为inline，只占据span中所占字数的宽度。
[html]1. <span style="background-color:red;">测试测试<span>[html]1. <span style="background-color:red;display:block;">测试测试<span>inline-block[html]1. <div style="display:inline-block;background-color:red;width:20px;">sfffs</div>2. <p>3. <span style="display:inline-block;background-color:red;width:20px;">sfffs</span>inline-block 与 inline 的区别默认情况下 inline-block 与inline 效果⼀致但当对div设置width或height时，由于width和height属性只对块状元素即block类型起作⽤，就能看出inline-block与inline 的区别了。
CSS中display对布局的影响以及元素display的默认值看到前端越来越多的mvc框架出现，之前偶尔还看到有OOCSS（⾯向对象的CSS编程）的⽂章。
所以可以这样理解，前端HTML页⾯的所有元素（tag），也都可以理解对象。
每个对象有⾃⾝的属性，以及每个对象与其他对象的关系。
关系中最重要也是本⽂讨论的是显⽰时候的位置关系。
每个HTML对象除了与其他HTML对象（标签）有关系之外，还有对象在显⽰时与浏览器或者windows对象的关系。
位置关系也就是页⾯的布局。
如果能将合适的对象根据需要放在合适的位置，并与其他对象和睦相处，界⾯就可以按照设计者的想法实现了。
《下⾯内容摘⾃⽹络，帮助理解和记录》根据CSS规范的规定，每⼀个⽹页元素都有⼀个display属性，⽤于确定该元素的类型，每⼀个元素都有默认的display属性值。
⽐如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；⽽span元素的默认display属性值为“inline”，称为“⾏内”元素。
div这样的块级元素，就会⾃动占据⼀定矩形空间，可以通过设置⾼度、宽度、内外边距等属性，来调整的这个矩形的样⼦；与之相反，像“span”、“a”这样的⾏内元素，则没有⾃⼰的独⽴空间，它是依附于其他块级元素存在的，因此，对⾏内元素设置⾼度、宽度、内外边距等属性，都是⽆效的。
块元素⼀般都从新⾏开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。
“form"这个块元素⽐较特殊，它只能⽤来容纳其他块元素。
如果没有css的作⽤，块元素会顺序以每次另起⼀⾏的⽅式⼀直往下排。
⽽有了css以后，就可以改变这种html的默认布局模式，把块元素摆放到想要的位置上去。
⽽不是每次都另起⼀⾏。
需要指出的是，table标签也是块元素的⼀种，table based layout和css based layout从⼀般使⽤者（不包括视⼒障碍者、盲⼈等）的⾓度来看这两种布局，除了页⾯载⼊速度的差别外，没有其他的差别。
CSS使用display的方法
我们为大家收集整理了关于CSS使用display，以方便大家参考。
display:block是将对象块状化
display:none
是不显示
Qu1:我经常看到有做一个层，然后里面写点什幺东西，然后就给它个属性display:none,这样这个东西就在网页上看不见了，但为什幺还要建一个层呢，不是无谓的增加网页大小幺?
An:1。
可以用js让它们显示
2。
可以在层内做个iframe,当作后台,无刷新处理数据
3。
在层里放一些图片，让浏览器先缓存，打开这些图片时会快一些
4。
为了SEO，也就是搜索引擎优化，在隐藏的层里适当的做些关键词
”
等等...。
CSSdisplay属性详解display的所有属性{/* CSS 1 */display: none;display: inline;display: block;display: list-item;/* CSS 2.1 */display: inline-block;display: table;display: inline-table;display: table-cell;display: table-column;display: table-column-group;display: table-footer-group;display: table-header-group;display: table-row;display: table-row-group;display: table-caption;/* CSS 2.1 *//* CSS 3 */display: inline-list-item;display: flex;display: box;display: inline-flex;display: grid;display: inline-grid;display: ruby;display: ruby-base;display: ruby-text;display: ruby-base-container;display: ruby-text-container;/* CSS 3 *//* Experimental values */display: contents;display: run-in;/* Experimental values *//* Global values */display: inherit;display: initial;display: unset;}下⾯就display的重要属性进⾏讲解，并配合⼀些相关的例⼦none是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也⽆法显⽰，相当于该元素不存在。
网的效果S t y l e中的D i s p l a y用法Document serial number【NL89WT-NY98YT-NC8CB-NNUUT-NUT108】网页的效果：Style 中的Display用法display:none改div不会显示,默认为inline 或""，可以显示出来。
HTML{ display : sDisplay }Scripting [ = sDisplay ]Possible ValuessDisplay String that specifies or receives one of the following values.block Object is rendered as a block element.none Object is not rendered.inlineDefault. Object is rendered as an inline element sized by thedimensions of the content.inline-blockObject is rendered inline, but the contents of the object arerendered as a block element. Adjacent inline elements arerendered on the same line, space permitting.list-itemInternet Explorer 6 and later. Object is rendered as a blockelement, and a list-item marker is added.table-header-groupTable header is always displayed before all other rows and rowgroups, and after any top captions. The header is displayed oneach page spanned by a table.table-footer-groupTable footer is always displayed after all other rows and rowgroups, and before any bottom captions. The footer isdisplayed on each page spanned by a table.<div style="height:276px;width:350px;line-height:20px;overflow-y:scroll;overflow-x:hidden;background:#fff;display:none" id="LrcShower_div">2121</div>______________________________________________________________display版本：CSS1/CSS2 兼容性：IE4+ NS4+ 继承性：有语法：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group取值：block : CSS1 块对象的默认值。
CSS基础例⼦display属性：block、inline和inline-block的区别 HTML中块级元素(block)和⾏级元素(inline)；⽐如div就是常见的块级元素，span就是常见的⾏级元素。
可以通过css的display属性来设置⼀个元素到底是块级，还是⾏级元素；display:block将元素设置成块级的，display:inline将元素设置成⾏级的。
span的实际显⽰宽度和⾼度由其内容决定。
1、block元素会独占⼀⾏，多个block元素会各⾃新起⼀⾏。
默认情况下，block元素宽度⾃动填满其⽗元素宽度。
2、block元素可以设置width,height属性。
块级元素即使设置了宽度,仍然是独占⼀⾏。
3、block元素可以设置margin和padding属性。
1、inline元素不会独占⼀⾏，多个相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排列不下，才会新换⼀⾏，其宽度随元素的内容⽽变化。
2、inline元素设置width,height属性⽆效。
3、inline元素的margin和padding属性，⽔平⽅向的padding-left, padding-right, margin-left, margin-right都产⽣边距效果；但竖直⽅向的padding-top, padding-bottom, margin-top, margin-bottom不会产⽣边距效果。
1、让⾏内块可以设置宽度⾼度。
span是⾏级元素，所以不能设置其宽度和⾼度；如果将span设置成block，那么⼜会⾃动换⾏。
怎么让多个span在同⼀⾏显⽰，⽽且能够固定宽度呢？这就需要⽤到display:inline-block了。
例⼦：<head><style>span{background-color:#43be60;width:100px;height:50px;margin-top:20px;margin-left:20px;display:inline-block;}</style></head><body><div style="background-color:#ededed;width:400px;height:400px;"><span>1</span><span>10</span><span>100</span><span>1000</span></div></body>。
DIVCSSdisplay（block,none,inline）DIV CSS display (block none inline)属性的⽤法在⼀般的CSS布局制作时候，我们常常会⽤到display对应值有block、none、inline这三个值。
下⾯我们来分别来认识和学习什么时候⽤什么值。
这⾥通过CSS display知识加实例、图演⽰讲解⽅法来学习和了解DIV CSS display。
⽬录CSS display使⽤display的值有哪些css display blockcss display nonecss display inline1、CSS display使⽤以下为DIV CSS运⽤dispalyCSS代码：.divcss{display:none}Html对应运⽤：<div class="divcss">我是测试内容</div>2、display的值有哪些Css display值与解释参数：block :块对象的默认值。
⽤该值为对象之后添加新⾏。
之前也添加⼀⾏。
none :隐藏对象。
与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline :内联对象的默认值。
⽤该值将从对象中删除⾏。
如果其前后都是inline的则在同⼀⾏compact :分配对象为块对象或基于内容之上的内联对象marker :指定内容在容器对象之前或之后。
要使⽤此参数，对象必须和:after及:before 伪元素⼀起使⽤inline-table :将表格显⽰为⽆前后换⾏的内联对象或内联容器list-item :将块对象指定为列表项⽬。
并可以添加可选项⽬标志run-in :分配对象为块对象或基于内容之上的内联对象table :将对象作为块元素级的表格显⽰table-caption :将对象作为表格标题显⽰table-cell :将对象作为表格单元格显⽰table-column :将对象作为表格列显⽰table-column-group :将对象作为表格列组显⽰table-header-group :将对象作为表格标题组显⽰table-footer-group :将对象作为表格脚注组显⽰table-row :将对象作为表格⾏显⽰table-row-group :将对象作为表格⾏组显⽰3、css display:blockDisplay:block是我们常⽤的，block也是Display默认的值。
详解CSSdisplay：inline-block的应⽤本⽂详细描述了display:inline-block的基础知识，产⽣的问题和解决⽅法以及其常见的应⽤场景，加深了对inline-block应⽤的进⼀步理解。
基础知识display:inline-block是什么呢？相信⼤家对这个属性并不陌⽣，根据名字inline-block我们就可以⼤概猜出它是结合了inline和block两者的特性于⼀⾝，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，⼜保持了inline元素不换⾏的特性。
举例说明：以前我们做横向菜单列表的时候，我们可以通过li和float:left两者来实现，现在可以通过li和display:inline-block。
HTML代码：1<ul>2<li>⾸页</li>3<li>关于</li>4<li>热点</li>5<li>联系我们</li>6</ul>CSS代码1 ul, li { padding: 0; margin: 0; list-style-type: none; }2 li { display: inline-block; border: 1px solid #000; }效果图inline-block基本效果可以看到li元素可以横向排列，并且可以设置width属性，⼤家可以复制代码⾃⼰查看效果或查看inline-block的问题观察上⾯的例⼦，细⼼的同学肯定会发现，每个li之间有⼀个⼩空隙，⽽我们的代码中并没有设置margin等相关属性，这是为什么呢？默认的inline元素⾸先，我们观察⼀下默认的inline元素的表现：HTML代码1<a>⾸页</a>2<a>热点</a>CSS代码1 a { margin: 0; padding: 0; border: 1px solid #000; }效果图inline默认情况默认情况下，inline元素之间就有空隙出现，所以结合了inline和block属性的inline-block属性⾃然也有这个特点。
[CSS]详解display:inline | block |inline-block的区别
display:inline就是将元素显示为块级元素.
block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和<li>是块元素的例子。
display:inline就是将元素显示为行内元素.
inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。
display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。
旁边的内联对象会被呈递在同一行内，允许空格。
inline-block的元素特点：
将对象呈递为内联对象，但是对象的内容作为块对象呈递。
旁边的内联对象会被呈递在同一行内，允许空格。
(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)
并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。
从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。
这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。
IE下块元素如何实现display:inline-block的效果？
有两种方法：
1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。
代码如下（...为省略的其他属性内容）：
div {display:inline-block;...}
div {display:inline;}
2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。
代码如下：
div {display:inline; zoom:1;...}
以下用个例子来说明三者的区别和用法:
<style>div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}.b{display:block;}.i{display:inline;}div.ib{display:inline-block;}div.ib{ display:inline;}a.ib{display:inline-block;}a.ib{display:block;}span.v{padding:0;margin:0;border:0;vertical-align: middle;height:100%}</style><div>div display:block</div><div class="i">div display:inline</div><div class="ib">div display:inline-block</div><span>span display:inline</span><span class="b">span display:block</span><span><a class="ib">a display:block</a></span><br /><div><span class="v"></span>vertical-align:middle</div>。
