子元素margin-top属性传递给父元素的问题 转!
问题描述:
一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化。
<div class="box1"><div class="box1_1"></div></div>
css样式:
.box1{height:400px;background:#fad;}
.box1_1{height:100px;margin-top:50px;background:#ade;}
1.修改父元素的高度,增添padding-top样式模拟(常用);
2.为父元素添加overflow:hidden;样式即可(完美);
5.为父元素或者子元素声明浮动(可用);
3.为父元素添加border(可用);
4.添加额外的元素放在子元素最前面,设置高度为1px,overflow:hidden(若为行内元素,需要声明为块元素)(啰嗦);
6.为父元素或者子元素声明绝对定位(……)。
转载自:网络
子元素margin-top属性传递给父元素的问题 转!的更多相关文章
- 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
- 解决子元素设置margin-top,效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- 子元素增加margin-top会增加给父元素的问题
假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...
- 给HTML页面指定元素添加属性,添加父元素
给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img 此处用到querySelectorA ...
- 为什么子元素设置margin-top会作用在父元素上?
原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素
js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素 一.总结 一句话总结:closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上.of ...
- 【转载】设置event.cancelBubble,使触发子元素的onclick不同时触发父元素的onclick
由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...
- css子元素的margin-top为何会影响父元素
详细内容请点击 这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出 ...
- 使用float属性布局时父元素高度不能自适应的解决方法
在网页的布局过程中,经常会用到float属性来实现页面的左右布局,但是有个问题就是父元素的高度并不能根据子元素的高度自适应.比如下面这段代码: <!DOCTYPE html> <ht ...
随机推荐
- (转)JSP中四种传递参数的方法:
1.form表单 2.request.setAttribute();和request.getAttribute(); 3.超链接:<a herf="index.jsp"?a= ...
- JS中的 this
JS中的 this 变化多端,似乎难以捉摸,但实际上对 this 的解读,还是有一定规律的. 分析this,该如何下手呢?下面有一个函数 function show(){ alert(this); } ...
- phpmailer 发送邮件
<?php /* 可用新浪和网易邮箱测试成功,但QQ不成功! 下载 phpmailer 解压 http://phpmailer.worxware.com/ 要注意邮件服务器的端口号,默认是 25 ...
- Git关联远程GitHub仓库
一.本地安装GIT版本控制软件 二.配置Git,设置用户信息 git config --global user.name "jack" git config --global us ...
- 【python】只执行普通除法:添加 from __future__ import division
from __future__ import division 注意future前后是两个下划线
- iOS 8创建交互式通知-备
iOS 8提供了一个令人兴奋的新API来创建交互式通知(interactive notifications),它能让你在你的应用之外为用户提供额外的功能.我发现网上还没有关于如何实现它的比较好的示例教 ...
- 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)
文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...
- bzoj 1006: [HNOI2008]神奇的国度 弦图的染色问题&&弦图的完美消除序列
1006: [HNOI2008]神奇的国度 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 1788 Solved: 775[Submit][Stat ...
- 解压Windows的install.wim文件
转自无需软件,解压Win8/Win8.1的install.wim文件 一.检查镜像版本: 镜像中包含多个版本,需要确认自己需要的版本,我的镜像路径是"F:\win8.1\sources\in ...
- 窗体前端显示(ShowWindowAsync有许多优点)
H:=FindWindow('Tfrm_MainForm','aa'); if H>0 then begin ShowWindowAsync(h,SW_MAX); SetFore ...