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

心情久久不能平复，想到前几日，开通了博客君，特来此寻找存在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. UVA 10474 - Where is the Marble?--vector

    https://vjudge.net/problem/UVA-10474 https://blog.csdn.net/xiyaozhe/article/details/81081344 简单用法 so ...

  2. vue处理异步请求

    vue 处理异步请求 项目中需要 先调一个接口去取到人员编号,再去调另一个借口,人员编号作为参数才能去请求数据 用setTimeout 其实也可以,先new了一个promise对象 ,把请求放在里面, ...

  3. 2017 CCPC Qinhuangdao Site

    A. Balloon Robot 假设机器人$0$时刻位于$0$号位置,那么每个气球所需的时间为$(s_a-b)\bmod m$. 将所有气球按这个时间排序,枚举每个气球的时间作为偏移量,得出最优解即 ...

  4. webpack 安装 打包

    一, 下载node.js  https://nodejs.org/zh-cn/ 二, //全局安装 npm install -g webpack //npm init 刷新webpack.json 文 ...

  5. Java_比较两个图片的相似度

    说明:目前使用像素偏移量为5,可根据实际情况相应修改 package com.creditease.fetch.credit.util.similarity; import com.crediteas ...

  6. [LeetCode] Most Common Word 最常见的单词

    Given a paragraph and a list of banned words, return the most frequent word that is not in the list ...

  7. [LeetCode] Escape The Ghosts 逃离鬼魂

    You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is (ta ...

  8. elasticsearch视频

    简单的集群管理 (1)快速检查集群的健康状况 es提供了一套api,叫做cat api,可以查看es中各种各样的数据 GET /_cat/health?v epoch timestamp cluste ...

  9. mysql百万级全文索引及match快速查找

    建立全文索引的表的存储引擎类型必须为MyISAM 问题是match   against对中文模糊搜索支持不是太好 新建一个utf8 MyISAM类型的表并建立一个全文索引  : CREATE TABL ...

  10. swust oj 981

    统计利用二叉树存储的森林中树的棵数 1000(ms) 10000(kb) 2919 / 5436 普通树及其构成的森林均可转换成相应的二叉树,反之亦然.故而可以根据相应的转换方法去统计某一二叉树对应的 ...