关于普通流布局

普通流布局:

普通流布局:display:inline-block;

     使用inline-block,其元素会有4px左右的空隙,这个是因为我们写代码时候的换行符所致。

     解决办法:在inline-block的父元素中设置样式font-size:0;letter-spacing:-4px;然后设置inline-block的所有兄弟元素font-size:值;letter-spacing:值px;恢复正常的显示。

除此之外还需要注意:inline-block默认是基线对齐的,而inline-block的基线又跟文本基线一致,所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可。

     基线的内容分有文字和无文字两种:

1)无文字:容器的margin-bottom下边缘。与容器内部的元素没一点关系。

     2)有文字:最后一行文字的下边缘,跟文字块(p、h等)的margin、padding没关系!注意是最后一行!无论文字在什么子对象容器内在什么位置都没关系,浏览器会找到最后一行文字对齐底部。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值