当前位置: 首页 > news >正文

盒子模型塌陷解决办法

一、什么叫盒子模型塌陷

  •  当子元素设置外边距,导致父元素连带向下,就会导致盒子模型塌陷。
  • 例如这种情况:
<style>*{margin: 0;padding: 0;}.box{width: 100px;height: 100px;background-color: tomato;}#btn{margin-top: 20px;}
</style>
<div class="box"><div id="btn">容器</div>
</div>

 

二、解决盒子模型塌陷的方法:

1.给父容器设置上边线 

border-top: 1px solid transparent;

.box{width: 100px;height: 100px;background-color: tomato;border-top: 1px solid transparent;}

2.给父元素设置内边距

padding: 1px;

.box{width: 100px;height: 100px;background-color: tomato;padding: 1px;}

3.给父元素设置超出部分隐藏属性

overflow: hidden;

.box{width: 100px;height: 100px;background-color: tomato;overflow: hidden;}

 

原文地址:https://blog.csdn.net/qq_45806781/article/details/109297487

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 809451989@qq.com 进行投诉反馈,一经查实,立即处理!

相关文章:

  • LAMMPS模拟in和data文件集合
  • GAN_1——基础知识
  • [GAN学习笔记] 基础GAN(三)——WGAN
  • css防止高度塌陷,css之高度塌陷及其解决方法
  • 计算机图形学笔记十:Geometry3(网格处理)
  • 怎么样上台演讲(结合ppt)。。超级实用。。。
  • 商务流程
  • 业务范围(business area)
  • 国内外知名云服务公司介绍
  • 什么是企业管理咨询服务?
  • MiL.k x Bithumb x Yanolja宣布建立三方商务及市场营销合作关系
  • 移动商务,还是短信商务?
  • 什么样的人适合做外贸?能做好外贸?(非外贸零售)
  • 供应链服务平台方案:助供应链服务公司实现商品+决策+物流+售后协同办公
  • 公司的服务类型简介
  • 企业服务
  • 视频剪辑,就上这5个网站找素材,免费可商用。
  • 书单素材怎么找?教你寻找方法
  • 自媒体都在用的5个素材网站,视频、音效、图片全部免费下载~
  • 6个高清图片素材网站,找图片素材就靠他们了