子元素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 ...
随机推荐
- Java中报错No enclosing instance of type caiquan is accessible. Must qualify the allocation with an enclosing instance of type caiquan (e.g. x.new A() where x is an instance of caiquan).
package test;import java.util.Scanner;import java.util.Random;public class caiquan { public static v ...
- jQuery实现的分页功能,包括ajax请求,后台数据,有完整demo
一:需求分析 1)需要首页,末页功能 2)有点击查看上一页,下一页功能 3)页码到当前可视页码最后一页刷新页面 二:功能实现思路 也是分为三部分处理 1)点击首页,末页直接显示第一页或者最后一页内容, ...
- Jquery常用功能
jQuery 1.4给开发者带来了很多值得兴奋的新特性,同时使用jQuery的人也越来越多,为了方便大家对jQuery的使用,下面列出了一些jQuery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字 ...
- 从用python自动生成.h的头文件集合和类声明集合到用python读写文件
最近在用python自动生成c++的类.因为这些类会根据需求不同产生不同的类,所以需要用python自动生成.由于会产生大量的类,而且这些类是变化的.所以如果是在某个.h中要用include来加载这些 ...
- 《C和指针》章节后编程练习解答参考——第8章
8.1 #include <stdio.h> int main (void) { int a, b, c, d; // 不使用嵌套花括号初始化 unsigned ][][][] = { , ...
- 关于Android中传递数据的一些讨论--备用
在Android中编写过程序的开发人员都知道.在Activity.Service等组件之间传递数据(尤其是复杂类型的数据)很不方便.一般可以使用Intent来传递可序列化或简单类型的数据.看下面的代码 ...
- Java: 实现顺序表和单链表的快速排序
快速排序 快速排序原理 快速排序(Quick Sort)的基本思想是,通过一趟排序将待排记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可对这两部分记录继续进行排序,以达到 ...
- jackson学习----解析豆瓣的图书信息
异常一. org.codehaus.jackson.map.JsonMappingException: No suitable constructor found for type [simple ...
- "Invalid bound statement (not found): com.sitech.admin.dao.TbOpenAbilityInfoDao.findAbilityReadyUp"mybatis配置文件bug
问题描述: 通常在正常启动某项工程后操作某个功能时抛出的bug: org.apache.ibatis.binding.BindingException: Invalid bound statement ...
- LightOj_1284 Lights inside 3D Grid
题目链接 题意: 给一个X * Y * Z 的立方体, 每个单位立方体内都有一盏灯, 初始状态是灭的, 你每次操作如下: 1)选择一个点(x1, y1, z1) 再选择一个点(x2, y2, ...