margin-top 失效的问题
来源:互联网 发布:mysql strcmp 编辑:程序博客网 时间:2024/04/30 12:29
其实关于这个问题,老生常谈了。在这里说说因仅仅是因为想更加深刻的理解一下。
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{ margin:0; padding:0;} .box{ width:400px; height:400px; margin:0 auto; border:1px solid red;} .d1{ background-color:red; width:200px; height:200px; } .d2{ background-color: blue; margin-top:10px; width:100px; height:50px;} </style> <body> <div class="box"> <div class="d1"> <div class="d2"></div> </div> </div> </body></html>
为了看到效果。我把div1和div2放在了红色的box里面。便于观察。现在我们看一下展示的效果。
我们给蓝色背景的div加了margin-top:10px;但是却并没有把蓝色背景的div向下移动。而是使得他的父元素的红色的div向下移动了10px.那是什么原因呢。
原因根据W3C盒子模型的规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
解决:
方法一:给父元素加一个border值一般都是设置为border:1px solid transprent; 但是添加了一个边框边缘会有一些空白。
方法二:给父元素添加一个overflow:hidden; 可能会将需要溢出的元素隐藏起来。
方法三:将margin-top改为padding-top;有的时候这种效果并非我们所需要的。
方法四:利用伪类:before 我们这里解决问题的方式借鉴解决浮动的问题的方式。写一个类把这个类添加给父元素。
.clearfix{ content:"."; display:block; height:0px; visibility:hidden;}.clearfix{*zoom:1;}/*IE/7/6*/
其实相当于在子元素和父元素之间添加个了一个 . 但是这个点的不可见。但又实际占据着位置。
解决问题的方式有很多种。主要看哪种适合自己网页里面的具体情况。
0 0
- margin-top 失效的问题
- Firefox下margin-top失效的问题
- margin-top失效的解决办法
- margin-top的问题。
- 关于margin-top失效的解决办法
- margin-top失效
- margin-top失效原因
- 解决CSS margin-top在火狐下失效问题
- IE8下margin-top失效
- 两个嵌套的Div,内部Div的margin-top失效
- margin-top在firefox失效的原因及解决办法
- firefox margin-top失效的原因与解决办法
- Firefox margin-top失效的原因与解决方法
- firefox margin-top失效的原因与解决办法
- 关于margin top百分比值的问题
- 相邻元素的 margin-top重叠问题
- margin-top遇到的小问题
- HTML5-margin-top的塌陷问题
- TextInput失去焦点时, 键盘不消失
- jquery方法focusin/focusout的使用
- Windows简易静态库制作方式
- 装饰者模式
- android FM手动调频流程
- margin-top 失效的问题
- jQuery元素的追加和删除
- shiro入门实战笔记(10)--自定义Realm
- 《转》详解Spring中bean的scope singleton prototype request...
- .config、kconfig和Makefile的关系
- 毛泽东23岁时写何文章震动全校?
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
- 周期字串
- Android Post Json数据乱码问题