转自 :http://www.cnblogs.com/zhuzhenwei918/p/6058457.html
基本是摘抄这位大佬的总结 但是精简了一部分 想看全文的可以戳上面链接 然后加了些自己的笔记
display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有:
- none
- block
- inline
- inline-block
- inherit
第一部分:display:none
none隐藏元素并脱离文档流。
应用:
它还可以用于二级下拉菜单的制作中将二级下拉菜单先设置位display:none;,当鼠标滑过一级菜单时,再显示出来(详见《如何实现导航菜单中的二级下拉菜单》)。还可以用于登陆模态框的制作等等。
第二部分:display:block
块级元素特点:
- 不设宽度时,默认为100%,即父级宽度。默认高度为子元素高度。
- 支持宽高。
- 独占一行
- 块级元素中可以容纳其他块级元素或行内元素。
- 支持上下左右的margin和padding。
- 不支持vertical-align。
- 常见的块级元素由<p><div><h1><li><ul><ol><dl>等等。
注意:p h1 h2 h3 h4 h5 h6 dt 标签不能再嵌套块标签 包括自身 否则设置css样式将无效
a标签不能再嵌套自身
通过对一个行内元素设置display: block;可以将行内元素设置为块级元素,进而设置它的宽高和上下左右的padding和margin。
应用:
如果我们经常会制作导航栏,这时就要使用ul li 和a组合的方式,但是<a>是行内元素,我们无法设置它的宽和高,这时,就可以在<a>的样式表中,将之设置为display:block。这样就可以设置它的宽和高,以及上下左右的margin和padding以达到我们想要的效果了。
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > *{padding:
0;margin:0;list-style: none;} ul
li{float: left;} a{display:block;width:
30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;} </ style > </ head > < body > < ul > < li >< a href="">1</ a ></ li > < li >< a href="">2</ a ></ li > < li >< a href="">3</ a ></ li > < li >< a href="">4</ a ></ li > < li >< a href="">5</ a ></ li > </ ul > </ body > </ html > |
效果如下:
第三部分:display:inline
行内元素特点:
- 不支持宽高。
- 其高度一般由其字体的大小来决定,其宽度由内容的长度控制。
- 只支持左右margin和padding。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
- 行内元素一般不可以包含块级元素。
- 换行被解析程才能空格。
- 非独占一行。
- 不支持background-position,clear,overflow等等。
- 常见的行内元素由<a><em><img><span><strong>等等。
第四部分:display:inline-block
- 不设置宽度时,内容撑开宽度。
- 非独占一行,块在一行显示。
- 行内支持宽高。
- 代码换行被解析成空格
- 不支持clear
举例说明,我们之前在做横向导航菜单的时候,一般是用ul li a组合,然后将li设置为float,这样就可以得到横向的导航标签了。而现在我们可以通过li和display:inline-block;来实现。
代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > ul,li,a,*{padding:0;
margin:0;list-style: none;text-decoration: none;} li{display:
inline-block;border: thin solid red;} </ style > </ head > < body > < ul > < li >< a href="">1</ a ></ li > < li >< a href="">2</ a ></ li > < li >< a href="">3</ a ></ li > < li >< a href="">4</ a ></ li > < li >< a href="">5</ a ></ li > </ ul > </ body > </ html > |
效果图如下:
但是将padding和margin的值都设置为0,他们之间还会有距离 这就是inline元素换行被解析成空格的属性。如果将上述例子中的a标签写成一行,空白符消失,菜单之间也就紧凑起来了。
解决方法:我们要明白空白符归根结底是一个字符,只要我们将ul中的字符的大小设置位0,那么空白符也就不会存在了,但是这是a的字体大小也会继承ul的字体大小,那么就不见了,该怎么办,只需要将a中再设置一个字体不为0的大小覆盖
即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > < strong >
ul{font-size: 0;}</ strong > ul,li,a,*{padding:0;
margin:0;list-style: none;text-decoration: none;} li{display:
inline-block;border: thin solid red;< strong >font-size:
15px;</ strong >} </ style > </ head > < body > < ul > < li >< a href="">1</ a ></ li > < li >< a href="">2</ a ></ li > < li >< a href="">3</ a ></ li > < li >< a href="">4</ a ></ li > < li >< a href="">5</ a ></ li > </ ul > </ body > </ html > |
最终得到的效果图如下:
我们还可以通过inline-block完成一个常见的三列布局。
html代码如下:
1
2
3
4
5
6
7
|
< div id="header">我是header</ div > < div id="content"> < div id="left">我是left</ div > < div id="center">我是center</ div > < div id="right">我是right</ div > </ div > < div id="footer">我是footer</ div > |
css代码如下:
1
2
3
4
|
#header,#footer{height:
50px;width:800px;margin:0 auto;background: #ccc;text-align: center;line-height: 50px;} #content{width:800px;height:
500px;margin: 0 auto;background: #aaa;< strong >font-size:
0;</ strong >}//解决inline元素产生的空白符问题 #left,#right{display:
inline-block;width: 200px;height: 500px;background: #fadaac;font-size: 30px;} #center{display:
inline-block;width: 400px;height: 500px;background: #dadada;< strong >font-size:
30px;</ strong >}//这里一定要重新设置font-size。 |
最终效果图如下:
第五部分:display:inherit
规定应该从父元素继承 display 属性的值。举例如下:
html代码如下:
1
2
3
4
|
< div id="parent"> < div id="first_son"></ div > < div id="second_son"></ div > </ div > |
css代码如下:
1
2
3
|
#parent{
< strong >display:
inline-block;</ strong >
font-size: 0; background: #cadafa;width: 400px;height: 300px;} #first_son{< strong >display:
inherit;</ strong >
background: #eaedac;width: 200px;height: 100px;} #second_son{< strong >display:
inherit;</ strong >
background: #da5dd8;width: 200px;height: 100px;} |
效果图如下:
即我们先设置了id为parent的元素的display属性值为inline-block,然后将其子元素的display属性值设置为inherit(继承),于是,子div的display属性值继承了父元素的display属性值为inline-block。(注意,我在id为parent的div元素中设置了font-size:0px;这样可以有效解决由inline元素带来的空白符问题。)