CSS入门 模仿网页笔记

导航栏设置–注意点

  • 当子元素li设置浮动为左浮动时,会导致父元素高度坍塌,注意在父元素中补充overflow:hidden;闭合浮动。
  • line-height设置行间距,用于撑开盒子高度

横向排列

制作导航栏时,需要横向排列三个div。
关于布局方法的问题,是使用display:inline-block;还是浮动属性float,参考链接:css之使用display:inline-block;布局

解决过程中还了解到,inline-block的排列规则参考如下:
在这里插入图片描述

inline-block间距问题

解决办法:让水平间隙消失就是在父级上加font-size:0;让垂直间隙消失,就在子元素上加vertical-align:bottom;
如果子标签内加上任意文字,则display:inline-block元素不会生成垂直方向有空白!

参考链接:【CSS】inline和inline-block的间距

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值