解决子元素margin让父辈元素位置一起改变的问题
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让父辈元素位置一起改变的问题的更多相关文章
- 子元素margin带动父元素拖动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ss 如何解决margin-top使父元素margin失效
给子元素设置margin-top的时候父元素的也会受影响.会产生子元素和父元素margin合并的问题. 解决办法: 给父元素设置padding.或者border把父子的margin之间隔开. 一般来说 ...
- 能用padding,margin解决的不要使用伪元素,能用背景解决的也不要用伪元素
能用padding,margin解决的不要使用伪元素,能用背景解决的也不要用伪元素
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- 如何解决子元素设了margin-top之后父元素所受的影响
解决方法: 1.在父元素上加:overflow:hidden. 2.给父元素加border; 3.外容器上加上padding.
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
随机推荐
- 【CodeForces 266C】Below the Diagonal(模拟)
题目每次把空列换到最后一列,把非空行换到最下一行. #include<cstdio> #include<algorithm> #define N 1005 using name ...
- iOS推送通知
推送通知 此通知非彼通知. NSNotification是抽象的,看不见的,但是可以监听,属于观察者模式的一种设计模式. 推送通知是可见的,能用肉眼看见的,是真正的和用户打交道的通知. 推送通知分为两 ...
- CSS文件开头到底声明@charset "utf-8"
@charset "utf-8" 这个声明是告诉浏览器[我的CSS文件是UTF-8编码的],但实际上这个文件可以不用是UTF-8编码的,所以这个声明能达到欺骗浏览器的作用. 但实践 ...
- 禁用Resharper长代码自动换行的解决办法
Resharper Options=> C#=> Formatting Style=> Line Breaks and Wrapping=> Right margin(colu ...
- COGS 577 蝗灾
传送门 时间限制:2 s 内存限制:128 MB DESCRIPTION C国国土辽阔,地大物博......但是最近却在闹蝗灾..... 我们可以把C国国土当成一个W×W的矩阵,你会收到一些诸如(X, ...
- hihocoder #1052 基因工程
传送门:基因工程 这道题拖了好久,一直没有清晰的思路. 当然,$K\le\frac{N}{2}$时,比较简单.下面我着重讲一下当$K>\frac{N}{2}$,即前$K$个字符与后$K$个字符有 ...
- As环境下添加android support library依赖库
2015年的google大会上,google发布了新的Android Support Design库的新组件之一,以此来全面支持Material Design 设计风格的UI效果,为了可以使用这些新颖 ...
- 强大的windbg定位内存泄露,两句命令搞定!
1.简单配置在windbg程序目录下有个gflags.exe,运行后设置: 运行CMD.EXE,输入"D:\Debugging Tools for Windows (x86)\gflags. ...
- Beta版本——第一次冲刺博客
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 有return的情况下try catch finally的执行顺序
结论:1.不管有木有出现异常,finally块中代码都会执行:2.当try和catch中有return时,finally仍然会执行:3.finally是在return后面的表达式运算后执行的(此时并没 ...