1、在父元素内添加内容,并且要在子元素块前面添加,后面添加内容无效。

内容可以是文字、图片甚至是空格,源代码里直接按空格无效,可以用占位符 

2、让子元素或父元素浮动float:left。

缺点:在元素不能用浮动的情况

3、让父元素顶部增加一条边框,可以设边框为透明:border-top:1px solid transparent。

缺点:虽然是透明但还是多了1px的占位,一般精确度要求不高,1px基本可以忽略了。

4、让子元素或父元素绝对定位:position:absolute。

缺点:在元素不能用绝对定位的情况

5、让父元素overflow:hidden。

缺点:元素不能用overflow:hidden的情况。

总结,相对完美的是添加占位符 和overflow:hidden了。

原文链接:http://www.w3cfuns.com/blog-5456068-5403195.html

解决子元素margin让父辈元素位置一起改变的问题的更多相关文章

  1. 子元素margin带动父元素拖动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ss 如何解决margin-top使父元素margin失效

    给子元素设置margin-top的时候父元素的也会受影响.会产生子元素和父元素margin合并的问题. 解决办法: 给父元素设置padding.或者border把父子的margin之间隔开. 一般来说 ...

  3. 能用padding,margin解决的不要使用伪元素,能用背景解决的也不要用伪元素

    能用padding,margin解决的不要使用伪元素,能用背景解决的也不要用伪元素

  4. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  5. 如何解决子元素设了margin-top之后父元素所受的影响

    解决方法: 1.在父元素上加:overflow:hidden. 2.给父元素加border; 3.外容器上加上padding.

  6. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  7. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  8. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  9. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

随机推荐

  1. Web前端性能优化教程02:使用内容分发网络

    基础知识 服务器离用户越近,HTTP请求的响应时间将更短. CNAME:别名记录,当多个域名需要指向同一服务器IP,可以使用一个域名做A记录指向该服务器IP,然后让多个域名指向该A记录. ICP:In ...

  2. 【LintCode】判断一个字符串是否包含另一个字符串的所有字符

    问题描述: 比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是 大写字母. 样例 给出 A = "ABCD" B = "ACD",返 ...

  3. perl split 的一种特殊用法

    参考 http://blog.chinaunix.net/uid-1919528-id-2792055.html split 函数的正规语法应该是: split /PATTERN/, EXPR 而使用 ...

  4. 精通Web Analytics 2.0 (4) 第二章:选择你的网络分析灵魂伴侣的最佳策略

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第二章:选择你的网络分析灵魂伴侣的最佳策略 在Web Analytics 2.0的新世界秩序中,您必须跳出"单一真理来 ...

  5. Spark MLib 基本统计汇总 1

    1.  概括统计 summary statistics MLlib支持RDD[Vector]列式的概括统计,它通过调用 Statistics 的 colStats方法实现. colStats返回一个  ...

  6. bzoj 1030 fail树dp

    dp[i][j][0]代表当前匹配到i号点走了j步且没到过单词节点,1代表到过,直接转移. #include<iostream> #include<cstdio> #inclu ...

  7. JVM学习笔记:虚拟机的类加载机制

    JVM类加载机制分两部分来总结: (1)类加载过程 (2)类加载器 一.JVM类加载过程 类的加载过程:加载 →连接(验证 → 准备 → 解析)→ 初始化. 类的生命周期:加载 →连接(验证 → 准备 ...

  8. 搜索表头的例子-jqueryEasyUi

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 【bzoj3110】 Zjoi2013—K大数查询

    http://www.lydsy.com/JudgeOnline/problem.php?id=3110 (题目链接) 题意 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在 ...

  10. Compiler Theory(编译原理)、词法/语法/AST/中间代码优化在Webshell检测上的应用

    catalog . 引论 . 构建一个编译器的相关科学 . 程序设计语言基础 . 一个简单的语法制导翻译器 . 简单表达式的翻译器(源代码示例) . 词法分析 . 生成中间代码 . 词法分析器的实现 ...