html的一些难点和解决方案

本文介绍了HTML和CSS中遇到的四个常见布局问题:图片底部空白、margin-top影响、padding导致的盒子撑大以及高度塌陷。通过设置overflow、padding-top、改变盒子模型和启用BFC来解决这些问题。
摘要由CSDN通过智能技术生成
  • img图片底部空白问题 。图片下方与元素间距形成空白行,可通过对父元素设置overflow属性为hidden解决,或把图片变为div1。
  • 给子元素设置margin-top父子盒子都向下移动问题 。子元素设置margin-top会使父元素和子元素都向下移动,可通过对父元素设置overflow:hidden或padding-top属性解决1。
  • padding把盒子撑大问题 。使用怪异盒子模型时,给元素加padding会把盒子撑大,可更改盒子类型,使用标准盒子模型解决1。
  • 高度塌陷问题 。开启元素的BFC以后,元素会变成一个独立的布局区域,不会在布局上影响到外面的元素,可以解决高度塌陷问题2。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值