css学习笔记二之inline-block-halapro.liu

1、 inline-block是CSS2.1中新增的盒类型，在div中将display属性设定为"inline-block"，则div显示效果与设置display属性为"inline"是一样的效果。

inline-block具有inline属性的列属性，内部又具有block属性的块属性，可以使用width,height,margin,padding,border等元素。

2、使用inline-block可以在某些情况下替代float浮动元素，PS：要做一个横向导航条

在inline-block出现之前，一般都是使用以下代码，来完成上述功能：

   div   class  ="nav"  > 
       ul  > 
           li  >  a   href  =""  > AngularJS   a  >  li  > 
           li  >  a   href  =""  > AngularJS   a  >  li  > 
           li  >  a   href  =""  > AngularJS   a  >  li  > 
           li  >  a   href  =""  > AngularJS   a  >  li  > 
           li  >  a   href  =""  > AngularJS   a  >  li  > 
           li  >  a   href  =""  > AngularJS   a  >  li  > 
       ul  > 
   div  >  

li {
    float: left;
    list-style: none;
    width: 100px;
    padding: 10px 0;
}  

查看更多关于css学习笔记二之inline-block-halapro.liu的详细内容...