css设置时父元素随子元素margin值移动
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。
HTML,CSS:
<div class="box1">
<div class="box2">
<div class="content">
<div class="margin">123</div>
</div>
</div>
</div>
*{padding:0; margin:0;}
.box1{ width:600px; height:1042px; margin:0 auto; background:#ccc; overflow:hidden;}
.box2{ width:600px; height:1042px; background:#000; overflow:hidden;}
.content{ width:600px; height:1042px; overflow:hidden;}
.margin{ width:400px; height:30px; line-height:30px; text-align:center; margin:20px; background:#f00; overflow:hidden;}
解决方法:
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
2、为父元素添加overflow:hidden;样式即可(完美)
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1px solid transparent可用)
5、为父元素或者子元素声明绝对定位
css设置时父元素随子元素margin值移动的更多相关文章
- 给父元素与子元素分别设置visibility注意点
由于机顶盒的终端特性原因,不能用display:hidden去做隐藏,就选择了visibility:hidden. 在这里遇到一个现象: 给父元素设置了hidden,但是里面的子元素依然可见.以为只是 ...
- 父元素与子元素之间的margin-top问题(css hack)
hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. hytml代码: &l ...
- 关于css中父元素与子元素之间margin-top的问题
之前在使用经常遇到下面的问题: html: <div class="top"> <div class="one">I'm the fir ...
- 父元素与子元素之间的margin-top问题(css hack)(转载)
情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- 父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- 【HDOJ】3400 Line belt
三分. #include <cstdio> #include <cstring> #include <cmath> typedef struct { double ...
- mysql 安装截图
这里有3个选项, 1.Developer Machine(开发机器),个人用桌面工作站,占用最少的系统资源 2.Server Machine(服务器),MySQL服务器可以同其它应用程序一起运行,例如 ...
- Linux 下 的 cc 和 gcc
在Linux下一会看到cc,另一会又看到gcc,感觉又点混乱的样子.它们是同一个东西么,有啥区别呢? 一分为二地看: 首先,如果讨论范围在Unix和Linux之间,那么cc和gcc不是同一个东西.cc ...
- 酷派D530刷机指引
酷派D530是我的第一台智能手机,刚入手的时候是挺激动的,什么Root啦,精简系统删官方应用啦,app2sd啦,杂七杂八的应用装了一堆,折腾得不亦乐乎.但过了那个热度之后,现在我对于智能手机的要求还是 ...
- ruby迭代起基础
“循环”会用在程序中的各种地方.而在循环的地方善用“迭代器”,则是熟练进行Ruby程序设计的重要关键. 不过,迭代器确实有比较抽象的地方,语法也有点怪异(尤其是yield的用法),光是依靠文字说明.看 ...
- js iframe问题
父窗口获得iframe的window对象,从而控制对iframe的控制 document.getElementById("frameID").contentWindow;
- HDU5032 -- Always Cook Mushroom 树状数组 14年北京网络赛
题意:1000*1000的格子, 坐标为(1, 1) ~ (1000, 1000), 常数 A, B, 点(x, y)权值为 (x + A) * (y + B), q次询问, 每次询问(0, 0) ...
- RMQ算法讲解
RMQ算法 引入: 例1.题目描述 输入N个数和M次询问,每次询问一个区间[L,R],求第L个数到R个数之间的最大值. 第一种方法:大暴力之术. 但是……时间复杂度最坏会达到 $O(NM)$,一半 ...
- JavaScript之原型深入详解
理解原型 原型是一个对象,其他对象可以通过它实现属性继承.任何一个对象都可以成为继承,所有对象在默认的情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型.任何一个对象都有一个pro ...
- Java集合中那些类是线程安全的
线程安全类 在集合框架中,有些类是线程安全的,这些都是jdk1.1中的出现的.在jdk1.2之后,就出现许许多多非线程安全的类. 下面是这些线程安全的同步的类: vector:就比arraylist多 ...