身为小前端菜鸟一枚,忽然听到这样一则传言~~

心情久久不能平复,想到前几日,开通了博客君,特来此寻找存在feeling~ 旨在造福普罗大众(更多前端小菜鸟)

话不多说, 我们步入正题,今天来给大家分享一下很早很早以前从某张大神那里学习到的一个很实用的小技巧,那就是margin-top在父容器发生重叠了,该怎么办呢~!!!!!!!!!

首先,看下面这个 “多木”  :

我们可以看到,这里有 abc 三兄弟, c是老大,欺压者a和b  a是老二 保护着b,而b由于年龄太小,忍受不了c的羞辱与暴行,决定离家出走,可是a认为c还可以抢救一下,准备冒着被殴打的风险开到c,于是:

“起来~~~~~~不愿做奴隶的人们~~~~~把~~~"

由上图,我们可以看到,我仅仅对b设置了margin-top,但是保护他的a却也跟着一起向下移动了。。。。那么在我们写代码的很多时候 其实都会遇到这样的问题。现在在下(风流倜傥帅气逼人的cooper)告诉大家以下几种解决办法:

1.对a 设置overflowhidden。

2.对a 设置border:1px solid #suibian

3.对a 设置padding:1px

(下班了,预知故事如何发展,等我回去再慢慢分解,记得转发点赞哦)

关于html/css的一些小技巧之hack掉"margin-top"层叠问题的更多相关文章

  1. css的一些小技巧。修改input样式

    在第一次正式写项目的时候,遇到了几个布局的小技巧.记录一下. 我们常常会遇到图片和文字对齐的一种样式.比如 这样的样式,我们写的时候有时候会出现不对齐的情况.我们有俩种方法 一种就是flex的布局,还 ...

  2. 从零开始学习html(十五)css样式设置小技巧——上

    一.水平居中设置-行内元素 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> ...

  3. 从零开始学习html(十五)css样式设置小技巧——下

    六.垂直居中-父元素高度确定的单行文本 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo ...

  4. css浮动布局小技巧

    父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...

  5. CSS的一些小技巧

    1.黑白图像img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: graysc ...

  6. css的一些小技巧!页面视觉差!

    相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎. 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括.这导致了一个很好的光学效应,使参观者的注意. 在网页设计中,为了实现这 ...

  7. HTML+CSS学习笔记 (15) - css样式设置小技巧

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

  8. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  9. 一些css书写的小技巧

    一.css顺序 首先声明,浏览器读取css的方式是从上到下的.我们一般书写css只要元素具备这些属性就会达到我们预期的效果,但是这会给以后的维护和浏览器的渲染效率带来一定的影响,那么该怎么书写css的 ...

随机推荐

  1. 使用Python下载文件

    python -c "with open('/tmp/file.sh', 'wb') as f: import urllib2; f.write(urllib2.urlopen('http: ...

  2. 易忘&有用 的冷门Anaconda命令

    Python接触有将近2年了,但是在倒腾anaconda环境的时候,总有一些命令忘记需要查半天,今天趁着配置pytorch,特此总结一下,留待后用. 1. 创建和删除环境 创建环境 conda cre ...

  3. jdbc和odbc

    JDBC简介 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,它是Java十三个规范之一.可以为多种关系数据库提供统一 ...

  4. Python3面向对象—点和矩形类

    Python类练习 定义一个类 class Point: '''二维坐标系中代表一个点''' pass print('打印Point:{}'.format(Point)) p1 = Point() p ...

  5. S0.3 直方图

    目录 直方图(一) 直方图概念 直方图分类 直方图优点 直方图应用 opencv3直方图产生函数cvCalcHist() 画图函数 完整示例 直方图(一) 直方图概念 直方图是图像中像素强度分布的图形 ...

  6. ajax多图上传

    百度云代码 参考:https://segmentfault.com/q/1010000004218827

  7. [jzoj]1115.【HNOI2008】GT考试

    Link https://jzoj.net/senior/#main/show/1115 Description 申准备报名参加GT考试,准考证号为n位数X1X2X3...Xn-1Xn(0<=X ...

  8. MBA 拓展训练总结

    1. 拓展训练,大家绑腿跑 沟通时间极短, 规则制定不完善, 对方'王者队'沟通很好, 女队练习的同时, 男队边观看边练习, 效率很高, 由于之前王者输的比较多, 总结很多, 所以执行力也占优了, 我 ...

  9. linux学习:find用法整理

    find path -option [ -print ] [ -exec -ok command ] {} \; path: find命令所查找的目录路径.例如用.来表示当前目录,用/来表示系统根目录 ...

  10. 关于eclipse的Progress一直跳转的解决方案

    下载eclipse编程,发现了一个问题:执行main方法第二次console打印不出数据,后发现Progress一直跳转,而且非常多进度条在运行,关闭后第一次执行没问题,第二次问题重复出现. 有幸看到 ...