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 只是影藏了看不到，但还在原来的位置上

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

   

content area

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

布局-居中导航

   

• 推荐



   

• 歌单



   

• 大牌DJ



   

• 歌手



   

• 新碟上架

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中识别，使元素可以设置宽高  主流浏览器不会识别 */

}