display

设置元素的显示方式
display: block | inline | inline-block | none

display:block

默认宽度为父元素宽度(影响大小)
可设置宽高(影响大小)
换行显示(影响位置)

默认块级元素:div p h1-h6 ul form...

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display block</title>
    <style>
        .sample{background-color: pink}
        
        .sample{width: 200px;height: 200px;}  /*可设置宽高*/
    </style>
</head>
<body>
    <span>before block</span>
    <div class="sample">display:block;</div>
    <div>after block</div>
</body>
</html>

display:inline

默认宽度为内容宽度
不可设置宽高
同行显示

默认行内元素: span a label cite em...

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display inline</title>
    <style>
        .sample{background-color: pink}
            
        .sample{width: 200px;height: 200px;} 
        em{display: block;}
    </style>
</head>
<body>
    <span>before inline</span>
    <span class="sample">display:inline;</span>
    <em>after inline</em>
</body>
</html>

display:inline-block

默认宽度为内容宽度
可以设置宽高
同行显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display inline-block</title>
    <style>
        .sample{background-color: pink}
            
        .sample{display: inline-block;}
        .sample{width: 200px;height: 200px;}
        .sample{vertical-align: middle;}
    </style>
</head>
<body>
    <span>before inline-block</span>
    <span class="sample">display:inline-block;</span>
    <em>after inline-block</em>
</body>
</html>

display:none

设置元素不显示

display:none vs visibility:hidden

display:none 不显示也不再原来的位置
visibility:hidden 只是隐藏还在原来的位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display none demo</title>
    <style>
        .parent{margin: 30px;border: 1px solid pink;}
            
        /*.dn{display: none;}*/
        /*.vh{visibility: hidden;}*/
    </style>
</head>
<body>
    <div class="parent">
        <div class="dn">display: none</div>
    </div>
    <div class="parent">
        <div class="vh">visibility: hidden</div>
    </div>
</body>
</html>

布局-块级元素水平居中

margin:auto;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>块级元素的水平居中</title>
    <style>
        .content{width: 300px;height: 300px;background-color: pink;}

        .content{margin:0 auto;}
    </style>
</head>
<body>
    <div>
      <div class="content">content area</div>
    </div>
</body>
</html>

布局-居中导航

display:inline-block

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>居中导航</title>
    <style>
        ul{text-align: center;height: 30px;line-height: 30px;background-color: #f00;}
        li, a{display: inline-block;width: 80px;height: 100%;}
        li{margin: 0 5px;list-style: none;}
        a, a:hover, li.cur a{color: #fff;text-decoration: none;}
        a:hover, li.cur a{background-color: #c00}
    </style>
</head>
<body>
    <ul class="m-nav">
      <li><a href="#">推荐</a></li>
      <li class="cur"><a href="#">歌单</a></li>
      <li><a href="#">大牌DJ</a></li>
      <li><a href="#">歌手</a></li>
      <li><a href="#">新碟上架</a></li>
    </ul> 
</body>
</html>

居中导航

如何实现浏览器兼容版的inline-block显示
display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效，请实现兼容ie6、ie7的通用的方式。

1､先使用display:inline-block，再使用display:inline；
div {
  display:inline-block;
}
div {
  display:inline;
}

2､先让块元素变为内联，再使用（zoom:1 或float属性等）触发块元素layout；
div{  
    display:inline-block; 
    *display:inline;
    *zoom:1;
}