css学习笔记之display

转自 ：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

IE6 IE7-浏览器不支持给块级元素设置inline-block样式。原因和解决方法戳兼容那篇博客。

　　举例说明，我们之前在做横向导航菜单的时候，一般是用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中的字符的大小设置位０，那么空白符也就不会存在了，但是这是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元素带来的空白符问题。）