css display和visibility

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {display:none;}

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

<span>
<a>

如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

实例

li {
    display:inline;
}

下面的示例把span元素作为块元素：

实例

span {
    display:block;
}

注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；

内联元素(inline)特性：和相邻的内联元素在同一行；宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。

visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：

1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。
然而，visibility 还可能取值为 collapse 。

当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。

在不同浏览器下，对 visibility: collapse 的处理方式不同：

1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
2、在 IE 即使设置了 visibility: collapse，还是会显示元素。
3、在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。

block
块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

inline
内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

inline-block
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

说明：

并不是所有浏览器都支持此属性，目前支持的浏览器有：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;}
资源搜索网站大全 http://www.szhdn.com 广州VI设计公司https://www.houdianzi.com

总体概念
block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。

大体来说html元素各有其自身的布局级别（block元素还是inline元素）：

常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。

一般来说，我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。

1.解释一下display的几个常用的属性值，inline ， block， inline-block

inline（行内元素）:
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
不能更改元素的height，width的值，大小由内容撑开.
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）:
结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素。如图:
图一:

图二：

两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。

2.inline-block布局 vs 浮动布局

a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果

b.相同之处：能在某程度上达到一样的效果

我们先来看看这两种布局：
图一：display：inline-block

图二：对两个孩子使用float：left，我在上一篇浮动布局讲过，这是父元素会高度坍塌，所以要闭合浮动，对box使用overflow：hidden，效果如下：

>>乍一看两个都能做到几乎相同的效果，（仔细看看display：inline-block中有间隙问题，这个留到下面再讲）

c.浮动布局不太好的地方：参差不齐的现象，我们看一个效果：
图三：

图四：

>>从图3,4可以看出浮动的局限性在于，若要元素排满一行，换行后还要整齐排列，就要子元素的高度一致才行，不然就会出现图三的效果，而inline-block就不会。

3.inline-block存在的小问题：

a.上面可以看到用了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产生的原因是换行引起的，因为我们写标签时通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

b.去除空隙的方法：
1.对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
现在这种方法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的
图一：

c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：
在ie6/7下：
对于行内元素直接使用{dislplay:inline-block;}
对于块级元素：需添加{display:inline;zoom:1;}

4.总结:

display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：
a.对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。

CSS的inline、block与inline-block

GISChen
发布于 2018-06-06
基本知识点
行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。

块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。

行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。

行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

clipboard.png

其中img和input为行内块元素。

行内元素与块状元素之间的转换:
float: 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
p{
background-color: red;
height: 500px;
width: 30%;
padding: 20px;
margin: 20px;
float: left;}
div{
background-color: green;
height: 50px;
width: 40%;
padding: 20px;
margin: 20px;}
span{
background-color: gray;
height: 70px;
padding: 40px;
margin: 20px;
float:left;
width:200px;}
strong{
background-color: blue;
height: 70px;
padding: 40px;
margin: 20px;}
</style>

<div>块级元素一</div>
<span>行内元素一</span>
<strong>行内元素二</strong>
</body>
clipboard.png

如图，当把行内元素一设为左浮动时，就可以为其设置宽度了，说明它已经变成了块级元素。

2. position: 当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

3 .display:

1、块级标签转换为行内标签：display:inline;

2、行内标签转换为块级标签：display:block;

3、转换为行内块标签：display：inline-block;

常用的 display 可能的值：
clipboard.png

特性
1.text-align属性对块级元素起作用，对行内元素不起作用：
原因是块级标签如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽，那么在100%的宽度中居中生效；但是行内元素的宽完全是靠内容撑开，所以宽度就是内容撑开的宽：

clipboard.png

所以块级是在盒子中间居中了，但是因为行内元素的宽就是内容宽，没有可居中的空间，所以text-align:center;就没有作用；但是如果给font转换为块级就不一样了：

clipboard.png

2.块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。
clipboard.png

3.块级元素可以设置weith和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。注意但块级元素当没有明确指定 width 和 height 值时，块级元素尺寸由内容确定，当指定了 width 和 height 的值时，内容超出块级元素的尺寸就会溢出，这时块级元素要呈现什么行为要看其 overflow 的值（visible,hidden,overflow,scroll)
4.块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的margin-top、margin-bottom不起作用。
5.行内元素的padding-top和padding-bottom会起作用，不过就像脱离了标准流一样（即padding-left和padding-right的层级比其他元素高），并不会占据位置，并且还把其他元素给盖住了。但是，假如inline的元素没有内容，“padding-top、padding-bottom"将不起作用。如果想要起作用，只需要给padding-left或者padding-right设置一个值，或者当inline的元素有内容时就会起作用。
<style type="text/css">
div{
background-color: green;
height: 50px;
width: 40%;;
padding: 20px;
margin: 20px;}
span{
background-color:
gray;height: 70px;
padding: 40px;margin: 20px;}
strong{background-color: blue;
height: 70px;
padding: 40px;
margin: 20px;
float: left;
}
</style>
<div>块级元素一</div>
<span>行内元素一</span>
<strong>行内元素二</strong>
clipboard.png

clipboard.png

如图所示，当我们改变padding值时，效果是背景向四个方向扩展，padding-top和padding-bottom是增大的，但是对于块状元素一是没有影响的（在竖直方向上），不然行内元素一也不会挤入块状元素了。

下面的实例可以看到如果inline的元素没有内容，“padding-top、padding-bottom"将不起作用

如果想让padding-top或者padding-bottom起作用，只需要给padding-left或者padding-right设置一个值，或者当inline的元素有内容时就会起作用。

6.当inline-block碰到同类（inline，inline-block)时，谁的上下margin、paddin或line-height大，就听谁的。除非它是inline，因为inline的margin是不起作用的。且inline的padding是不占空间的。
<style>
body,div{
margin: 0;
padding:0;
}
.item1{
display: inline-block;
width: 100px;
height:100px;
margin-top: 20px;
background-color: red;
}
.item2{
margin-top: 100px;
display: inline-block;
background-color: pink;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
clipboard.png

如图所示，inline-block碰到同类时，行高也会一起使用。其他的padding-top和margin-top甚至都会一起使用

7.inline和inline-block会引起间距的空格
<style>
body,div{
margin: 0;
padding:0;
}
div{
display: inline;
background-color: #61dafb;
}
</style>
<div class="item1">item1</div>
<div class="item2">item2</div>
clipboard.png

可以看到两个div之间会有几个像素的间距，这个间距是有换行或回车导致的。有以下解决方法

(1)将空格直接删除，放到一行

<div class="item1">item1</div><div class="item2">item2</div>
(2)在空格代码中加入注释

<div class="item1">item1</div><div class="item2">item2</div>
(3)设置margin-left为负值，但是每个浏览器的间距不一样，所以基本不用这种方法

.item2{
margin-left:-8px;
display:inline;
background-color:pink;
}
(4)给父元素增加“font-size：0px"

(5)给父元素加letter-spacing负值，然后通过子元素清除letter-spacing值

display属性，display:inline-block
display:inline-block感觉与display:table-cell有些相似，例如对内部元素的包裹性。但是，由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。可谓黑白通吃，左右逢源。

inline-block属性的元素适用于inline box模型，所以，当其中的列表元素高度不一时，是不会有错位的。关于line box模型，我在之前的“css行高line-height的一些深入理解及应用”第二部分提到了，以及前面“CSS float浮动的深入研究、详解及拓展(一)”一文的“浮动的破坏性”部分中做过比较详细的介绍。一言以蔽之，就是每一行所有的inline元素和inline-block元素会共同形成一个line boxes，这个line box的高度由里面最高的元素决定。所以，即使inline-block属性的列表元素高度异常，撑开的是整个line boxes的高度，因而，不会与下一行的列表元素发生错位。如下面的我自己画得拙劣的示意图所示的：
line boxes让inline-block元素不会犬牙交错排列张鑫旭-鑫空间-鑫生活

根据一些前辈的说法，IE6/7不支持display:inline-block属性，只是可以让标签有类似于inline-block的属性，起初我也是接受这种说法的，不过后来又表示了怀疑，最近使用text-align:justify;做测试的时候的一些样式表现证实了：确实IE6/7是不支持display:inline-block属性，只是让其表现的跟inline-block一样，尤其对于inline水平的元素，其表现度可以用perfect一词来形容了。

对于IE8+以及现代浏览器，直接使用：

就可以了，支持任意水平的元素。

对于不支持的IE6/7浏览器该怎么办呢？如果是inline水平的元素（如a标签，span标签之类）跟上面一样，直接：

就可以了，对于这两个浏览器，其功效与*zoom:1;是一样的。

如果是block水平的元素，例如li标签。则需要多点代码，目前我知道的方法有两个，如下所示：

或者是：

block水平的inline-block化的元素与inline水平的在表现层又是有差异的，这个后面会谈到。

一点小阻挠：inline-block元素间的换行符空格间隙问题
在完整的展示兼容性的像素级的inline-block元素列表布局前，有必要讲讲使用display:inline-block列表布局经常会遇到的“换行符/空格间隙问题”。

如果inline-block元素间有空格或是换行产生了间隙，那是正常的，应该的。如果没有空格与间隙才是不正常的（IE6/7 block水平元素）。真正的inline-block元素，就像个图片一样。例如，两个不在一行的img标签，形成的两个图片之间就会有间隙，如下图所示：
换行符产生的间隙问题张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里：换行符与inline-block元素间间隙demo

要让这些空格不出现，最简单的最容易理解的就是让列表的结束标签与下一个列表的开始标签连在一起，就像是：

但是，这种做法好傻啊，而且HTML代码的可读性很不好。尤其考虑到现实情况：后台人员可能不清楚标签换行对样式的影响，直接后台repeat的时候，换行了。所以，此方法顶多临时应付些小打小闹的地方，要想广泛使用，显然业余了。

其实，我们只要细细想想，空格符本质上就是个字符，与a,b,c,d这些字符是个同一个属性的东西，只是他是空格，透明的看不见而已（但可以选中）。所以，只要我们使用让文字宽度为0的那些方法，不就可以解决inline-block元素间换行符间隙的问题啦！

于是，很自然而然的，想到了以下样式：

我还记得我大学时候解决IE6下标签高度无法小于11像素bug时的方法，就是使用的font-size:0;这属性可以让莫名的空格啊神马东东的都变成浮云。我们来试下，可否用来消除inline-block元素间的换行间隙的问题。
如下测试代码：

现在来看看几个主流浏览器下的反应，首先是Firefox浏览器：
Firefox下font-size:0的效果张鑫旭-鑫空间-鑫生活

然后是IE7浏览器：
IE7下font-size:0效果截图张鑫旭-鑫空间-鑫生活

哦呵呵，来看看大神Chrome浏览器：
Chrome下font-size:0效果张鑫旭-鑫空间-鑫生活

希望越大失望越大，Chrome下的空格对于font-size:0貌似很不屑一顾。唉，这个问题在Chrome还是婴儿阶段的时候就有了，到现在还没有改过来。
经过我稀里哗啦一轮番的浏览器测试，发现就只有Chrome浏览器对font-size:0置若罔闻，连同样内核的Safari都不会这样。

您可以狠狠地点击这里：font-size:0清除换行符间隙demo

虽然Chrome目前国内份额有限，但是毕竟有不少高端用户在用啊。所以，一旦Chrome不支持font-size:0，那么，此方法显然不能应用到实际项目中，在加上IE和Safari下还是有1像素的间隙，所以此方法就此刷掉。现在得去考虑其他更好的方法。

我们一起开动脑筋，还有什么CSS属性可以影响文字的水平间距的。啊，只见脑袋上灯泡一亮，有了，不是有个letter-spacing属性嘛。可以控制文字间的水平距离的，支持负值，可以让文字水平方向上重叠（line-height是让文字垂直方向上重叠）。哟呵呵，心动不如行动，还拿那两张美女图片做示例，看看letter-spacing属性可否抹掉换行符产生的间距。参见如下测试代码：

先来看看一向表现优异的Firefox3.6浏览器，如下图：
Firefox下letter-spacing的表现张鑫旭-鑫空间-鑫生活

很不错吧，再来看看前面让我们失望的Chrome浏览器：
chrome浏览器下不错的letter-spacing表现张鑫旭-鑫空间-鑫生活

嘿嘿，也是不错，希望就在眼前，看看IE新生主力军IE8下的表现：
IE8下的letter-spacing表现张鑫旭-鑫空间-鑫生活

再来看看对inline-block属性不支持的IE7浏览器：
IE7下让人心寒的letter-spacing表现张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里：letter-spacing去除间隙空格

结果让人心里咯噔了一下，晕那，好像没有作用诶！不会啊，我很清楚的记得即使IE6/7浏览器也是支持letter-spacing去空格的。后来我仔细对比，发现这里的letter-spacing:-4px是有所用的，只是默认的空格间隙比较大，所以，即使舍去4像素间距，还是有一段空白内容。但是，我清楚的记得在Arial字体下，空格间距应该是兼容的，为何这里就IE6/IE7浏览器下不一样呢？后来，我反复测试，终于发现了一个第一次看到的bug，“冒号影响了空格间隙的水平大小”。现将“效果：”这个小标题后面的中文冒号还成英文的，结果，空格间距一下子兼容了，真是很神奇，我不得不佩服IE6/7浏览器的怪异指数。
IE7下冒号与空格间距的问题张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里：IE6/7下冒号英文化后间隙demo

IE6/7浏览器本身就是个怪胎，喜欢不走寻常路。在这两个浏览器下，block水平的元素inline-block化之后，会直接忽略换行符的间隙。所以，这里还有一点点疑虑没有解决。既然IE6/7浏览器div,li 这些标签inline-block化后没有空格间隙，那么使用letter-spacing负值会不会让列表元素水平重叠呢？啊，这个问题就不要担心了，如果元素间本身没有空格，使用letter-spacing属性是不会发生水平重叠的问题的。例如下面的测试代码：

结果如下图：
letter-spacing负值无间隙元素重叠问题张鑫旭-鑫空间-鑫生活

也就是说，如果元素间本身就没有间隔，无论letter-spacing的值多小，元素都不会重叠。但是，如果有空格间隙存在，letter-spacing会发生重叠的。所以，我们无需为IE6/7元素会不会重叠这个问题担心了。

这样先讲内联元素和块级元素：
内联元素是不可以控制宽和高、margin等；并且在同一行显示，不换行。
块级元素时可以控制宽和高、margin等，并且会换行。

inline：使用此属性后，元素会被显示为内联元素，元素则不会换行。
block：使用此属性后，元素会被现实为块级元素，元素会进行换行。
inline-block：是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内敛元素的增强。

要注意的是IE6 不支持inline-block

1.inline是行内元素，同行可以显示，像span、font、em、b这些默认都是行内元素，不会换行，无法设置宽度、高度、margin、border
2.block，块元素，div、p、ul、li等这些默认都是块元素，会换行，除非设置float
3.inline-block，可以同行显示的block，想input、img这些默认就是inline-block，出了可以同行显示，其他基本block一样，但是inline-block兼容性很差，要用需要写hack