一、css-常用布局方法
1. inline-block 布局
- 像文本一样排block元素
- 没有清除浮动等问题
- 需要处理间隙问题
- 原因:字符间距
- 解决:消灭字符或者消灭间距
效果:
当我们将父容器的宽度改成400px
明显看到中间有一道缝隙,这就是inline-block产生的问题
解决方案:
方案一:推荐做法
-
将父元素的字体设置为0
-
到各子元素,再将字体设置成正常的值
.container { width: 300px; height: 100px; font-size: 0; } .left { background: green; width: 200px; height: 100px; display: inline-block; font-size: 16px; } .right { background: red; width: 100px; height: 100px; display: inline-block; font-size: 16px; }
方案二:
- 注释两个标签间的空格
方案三:
- 删除两个标签间的空格