dispaly

布局-将元素以正确的大小摆放在正确的位置上

布局-元素的摆放模式

display

·设置元素的显示方式

·display:block|inline|inline-block|none

dispaly:block 块级元素

·默认宽度为父元素宽度，充满父元素

·可设置宽高

·换行显示

默认的display:block元素-div、p、h1-h6、ul、form、...

display:inline 行级元素

·默认宽度为内容宽度

·不可设置宽高

·同行显示，在元素内部可以换行

默认display:inline元素-span a label cite em ...

display:inline-block

·默认宽度为内容宽度

·可设置宽高

·同行显示

·整块换行，后续元素宽度超过这一行边界

默认display:inline-block元素-input textarea select button ...

display:none

·设置元素不显示

display:none vs visibility:hidden

visibility:hidden 只是影藏了看不到，但还在原来的位置上

布局-块级元素的水平居中

<div>

    <div class="content">content area</div>

</div>

.content{margin:auto;width:978px;} 浏览器自动平分水平方向左右空白

布局-居中导航

<ul>

    <li><a href="#">推荐</a></li>

    <li><a href="#">歌单</a></li>

    <li><a href="#">大牌DJ</a></li>

    <li><a href="#">歌手</a></li>

    <li><a href="#">新碟上架</a></li>

</ul>

ul{text-align:center;height:30px;line-height:30px;}

li,a{display:inline-block;width:80px;height:100%;}

li{margin:0 10px;}

浏览器兼容版的inline-block显示

display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效

div{

    display:inline-block;/*高版本浏览器正常显示*/

    *display:inline;/*只在IE6/IE7中识别，使元素具有inline属性    主流浏览器不会识别*/

    *zoom:1;/*只在IE6/IE7中识别，使元素可以设置宽高  主流浏览器不会识别 */

}