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. Spring常用注解,自动扫描装配Bean

    1 引入context命名空间(在Spring的配置文件中),配置文件如下: xmlns:context="http://www.springframework.org/schema/con ...

  2. 去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

    去掉chrome(谷歌)浏览器默认的input.textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小 1.使用Chrome的都知道,当鼠标 ...

  3. bzoj4429: [Nwerc2015] Elementary Math小学数学

    先把所有可能的答案算出来,每个算式一个点,每个结果一个点,然后如果一个算式能算出一个结果,那么就连一条边 然后跑匈牙利,没有完美匹配就是impossible 每个算式最多有3个结果,所以边数是O(n) ...

  4. 【BZOJ-1026】windy数 数位DP

    1026: [SCOI2009]windy数 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 5230  Solved: 2353[Submit][Sta ...

  5. [NOIP2014] 提高组 洛谷P2296 寻找道路

    题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 .路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 .在满足条 ...

  6. JSP文件下载

    设置http响应头 response.setHeader 读取文件 这里需要注意两点: 读取的文件路径,必须设置为绝对路径 若文件名为中文,需要设置编码格式:URLEncoder.encode(fil ...

  7. 数据结构算法C语言实现(十二)--- 3.4循环队列&队列的顺序表示和实现

    一.简述 空队列的处理方法:1.另设一个标志位以区别队列是空还是满:2.少用一个元素空间,约定以队列头指针在队尾指针下一位置上作为队列呈满的状态的标志. 二.头文件 //3_4_part1.h /** ...

  8. CentOS 6.x安装Chromium

    在CentOS/RHEL 7出来之前继续使用Chrome怎么办?使用Chrome的开源版本:Chromium. 1.切换到root: su - 或者 sudo -i 2.下载新的软件源定义: cd / ...

  9. 团队项目UML用例图

    团队项目UML用例图

  10. HTML5学习总结-04 音频&视频播放

    一 音频播放 1 Audio(音频) HTML5提供了播放音频文件的标准 2 control(控制器) control属性攻添加播放,暂停和音量空间. 3 标签定义声音 <audio> 例 ...