解决子元素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时,鼠标从父级移入子级,则触发父 ...
随机推荐
- 集成IJKplayer视频直播框架
ijkplayer 是一款做视频直播的框架, 基于ffmpeg, 支持 Android 和 iOS, 网上也有很多集成说明, 但是个人觉得还是不够详细, 在这里详细的讲一下在 iOS 中如何集成ijk ...
- 【BZOJ-2440】完全平方数 容斥原理 + 线性筛莫比乌斯反演函数 + 二分判定
2440: [中山市选2011]完全平方数 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2371 Solved: 1143[Submit][Sta ...
- jquery插件-表单提交插件-jQuery.Form
1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...
- 【codevs1170】 双栈排序
http://codevs.cn/problem/1170/ (题目链接) 题意 给出一个初始序列,判断能否通过两个栈的入栈和出栈操作构造出一个有序序列.若可以,输出字典序最小的方案. Solutio ...
- Linux内核邮件列表发送和回复格式研究
1.使用的内容格式为[纯文本],这个在国内的客户端已经没有了,大公司只有微软的outlook. 2.回复引用时,使用符号[>]作为标记,且回复的内容不能在最顶部,应该在最下面.参考:http:/ ...
- ubuntu下gedit中文乱码
gsettings set org.gnome.gedit.preferences.encodings auto-detected "['GB18030', 'GB2312', 'GBK', ...
- 洛谷P2242 公路维修问题(Road)
题目描述 在一个夜黑风高,下着暴风雨的夜晚,farmer John的牛棚的屋顶.门被吹飞了. 好在许多牛正在度假,所以牛棚没有住满. 牛棚一个紧挨着另一个被排成一行,牛就住在里面过夜. 有些牛棚里有牛 ...
- Linux process authority、the security risks in running process with high authority
catalog . Linux进程权限原理 . 最小权限原则 - 进程降权运行最佳实践 . 进程权限控制包含的攻防向量 . 进程高权限安全风险检查技术方案 1. Linux进程权限原理 我们知道,Li ...
- ecshop /includes/modules/payment/alipay.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 ECSHOP支付插件存在SQL注入漏洞,此漏洞存在于/includes/ ...
- iOS 关于本地持久化存储的探讨
目前,用以本地化存储的方式有很多,常用的有以下: 1.临时缓存 先说说临时缓存,临时缓存一般相当于用来管理应用程序中全局需要常用的一些内容.比如当前用户的ID或者当前的定位信息等. 常用的方式就是写一 ...