关于overflow的问题
2024-09-09 23:54:03
<head>
<title></title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
#father
{
width: 500px;
height: 400px;
background: pink;
border: 1px solid;
}
#child
{
width: 100px;
height: 50px;
margin-top: 20px;
background: blue;
}
</style>
</head>
<body>
<div id="father">
<div id="child">
</div>
</div>
</body>
给子div添加margin-top: 20px,发现父子DIV都一起相对BODY下移了20PX,为何不是只是子DIV下移20PX ? 如果我给父DIV添加border: 1px solid,就可以实现父DIV不动,只是子DIV相对父DIV下移了20PX,难道就一定要设置父DIV的border才能实现吗?
给父亲div 设置 overflow: hidden;有个叫 bfc 的东西 叫 块级元素格式化上下文 overflow hidden 或者描边可以触发 bfc 就可以解决这个问题。
overflow 属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
最新文章
- 【疯狂造轮子-iOS】JSON转Model系列之一
- Vue 给子组件传递参数
- sql2008“备份集中的数据库备份与现有的xx数据库不同”解决方法
- SecureCRT如何与Linux虚拟机进行关联
- ReactiveCocoa基础知识内容2
- 【QT】C++ GUI Qt4 学习笔记2
- 判断UserAgent是否来自微信
- Android开发---支付宝功能接口(支付功能)(转载!)
- Codeforces AIM Tech Round (Div. 2)
- 【转】[Mysql] Linux Mysql 日志专题
- PostMessage 向Windows窗口发送Alt组合键
- mysql命令行操作 添加字段,修改字段
- [附录]Discuz X2.5程序模块source功能处理目录注释
- oracle 表查询(二)
- vue $refs的基本用法
- linux下python操作的一些命令
- BZOJ2039_employ人员雇佣_KEY
- WPF浏览器应用程序与JS的互调用(不用WebBrowser)
- U3D的一些常用基础脚本
- Switch debouncer uses only one gate