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

心情久久不能平复，想到前几日，开通了博客君，特来此寻找存在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. BigDecimal 准确的 double ， float 计算

    public class ArithUtil { private static final int DEF_DIV_SCALE = 10; private ArithUtil() { } /** * ...

  2. Python科学计算PDF

    Python科学计算(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1VYs9BamMhCnu4rfN6TG5bg 提取码:2zzk 复制这段内容后打开百度网盘手机A ...

  3. centos7.4安装redis

    参考连接 https://blog.csdn.net/qq_19399235/article/details/78313633/

  4. Spring 使用 feign时设置header信息

    最近使用 SpringBoot 项目,把一些 http 请求转为 使用 feign方式.但是遇到一个问题:个别请求是要设置header的. 于是,查看官方文档和博客,大致推荐两种方式.也可能是我没看明 ...

  5. Java逆向武器库_反编译工具

    1.反编译工具之_jd-gui 官网下载地址:http://java-decompiler.github.io/#jd-gui-download 使用: 下载后解压直接使用即可. jd-gui的优势是 ...

  6. 十三、事务、连接池 、ThreadLocal 、BaseServlet自定义Servlet父类 、 DBUtils à commons-dbutils

    l 事务 l 连接池 l ThreadLocal l BaseServlet自定义Servlet父类(只要求会用,不要求会写) l DBUtils à commons-dbutils 事务 l 事务的 ...

  7. 图片上传 new FormData() ,new FileReader()

    多图片和单图片取决于 multiple属性,下面来介绍下 new FileReader() reader.readAsDataUrl(file[0]) 可以看到文件是Base64的, let fd = ...

  8. Spring-day03

    Spring集成JDBC:提供了一些方便我们使用JDBC的工具类; query(String,ResultSetHandler handler,Object..parm){ Connection co ...

  9. 单调栈+前缀和 || Nowcoder || 牛客小白月赛13 || 小A的柱状图

    题面:小A的柱状图 题解:无 代码: #include<cstdio> #include<cstring> #include<iostream> #define l ...

  10. Python Learning - Two

    1.  Built-in Modules and Functions 1) Function def greeting(name): print("Hello,", name) g ...