margin 塌陷bug 触发bfc
2024-08-30 05:09:35
1.bfc block format context
2.如何触发一个盒子的bfc
position:absolute;
display: inline-block
float:left/right;
overflow:hidden;
<html>
<head>
<link rel="stylesheet" href="cs2.css">
</head>
<body>
<div class="wapper">
<div class="content"></div>
</div> </body>
</html>
2.css 代码
*{
margin: 0;
padding: 0;
}
.wapper{
width: 100px;
height: 100px;
margin-left: 100px;
margin-top: 100px;
background-color: black;
} /* overflow: hidden; */
/* position:absolute; */
/* display: inline-block */
/* border-top: 1px solid red; */ .content{
margin-left: 50px;
margin-top: 50px;
width: 50px;
height: 50px;
background-color: green;
}
3. margin 合并问题
<html>
<head>
<link rel="stylesheet" href="cs2.css">
</head>
<body>
<!-- margin 合并问题 -->
<div class="demo1">1</div>
<div class="wapper">
<div class="demo2">2</div>
</div> </body>
</html>
3. css
*{
margin: 0;
padding: 0;
}
.demo1{
background-color: red;
margin-bottom: 100px;
}
.demo2{
background-color: green;
margin-top: 100px;
}
/* margin 合并问题 */
.wapper{
overflow: hidden;
}
4.结论 margin问题一般不解决,直接设置margin-bottom:200px;
最新文章
- 从click事件理解DOM事件流
- Delphi线程的终止
- 安卓开发-问题集-Description Resource Path Location TypeUnparsed aapt error(s)! Check the console for output.
- form表单 无法提交js动态添加的表单元素问题。。
- Angularjs在线编辑器
- Selenium发展史
- eval &; exec(绕过长度限制思路学习)
- 【Alpha】 第七次Daily Scrum Meeting
- Android 5.0 调色 Palette调色功能
- (win10 docker desktop) docker build 时 alpine 无法安装软件问题的解决
- jQuery 选择器demo练习
- centos安装谷歌浏览器
- 聊聊IOCP,聊聊异步编程
- 学习笔记52—coverletter
- 【前端积累】javascript事件
- python 时间元组转可视化时间
- OpenID Connect Core 1.0(一)介绍
- DevExpress.XtraReports:XRPivotGrid 笔记
- WPF中Style文件引用另一个Style文件中的样式
- LINQ-from多from