css之float布局与display:inline-block布局

css之float布局与display:inline-block布局

 diplay常见属性

    1.none  此元素不会被显示

    2.block 此元素将被显示为块级元素，前后带有换行符

        块级元素特性：

            ·块级元素独占一行，不设置高度的情况下，会撑满父元素的宽度

            ·宽高可以设置

            ·可以设置margin、padding的属性值，四边都可以

    3.inline "默认" 此元素会被显示为内联元素，元素前后没有换行符

        行内元素特性：

            ·与其他元素共享一行，不独占

            ·width与height不能设置，由内容撑开

            ·padding四边都有效，但是margin只有left与right生效

    3.inline-bloclk 行内块元素

        行内块元素特性：

            ·结合block与inline，不独占一行，共享

            ·width与height可以设置

            ·margin与padding四边都有效

 

 flot布局与display:inline-block布局

图一：原始状态

 

 

 

 

　　可以看到child1与child2各占一行

图二：float布局

 

　　对child1与child2设置float:left，需要给父级添加over:hidden，阻止父级坍塌，在这里我为了方便观察给父级设置了高度以显示父级背景色，所以不存在高度塌陷。

 图三：display:inline-block布局

 

　　对两个孩子都设置display:inline-block，使其成为行内块元素，可以设置宽高同时不独占一行，可以共享。但是两个孩子之间有空隙！这个问题容后再说，现在先来看看float与display:inline-block布局另一不同之处。

图四：增加两个孩子，并且都添加float:left

 

可以看到当div高度不一致时，会发生残次不齐的现象，非常不美观

图五：四个孩子都设置inline-block属性

 

 　　可以看到排列有序，没有再出现犬牙呲互的情况

display:inline-block布局存在的问题

 　　不难观察到display:inline-block布局存在的问题，使用该布局时会产生空隙，该空隙为标签之间的换行符所产生的的占位换行符和空格本质上也是一个字符，如a，b，c这些，不过我们通常无法看到。那么解决这个空隙问题只需要将字符的大小设设置为0。

　　既font-size:0，但是font-size具有继承属性，所以需要先对box也就是父级的font-size设置为0，再将child也就是子元素的font-size设置为需要的正确的大小。