关于html/css的一些小技巧之hack掉"margin-top"层叠问题
身为小前端菜鸟一枚,忽然听到这样一则传言~~
心情久久不能平复,想到前几日,开通了博客君,特来此寻找存在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"层叠问题的更多相关文章
- css的一些小技巧。修改input样式
在第一次正式写项目的时候,遇到了几个布局的小技巧.记录一下. 我们常常会遇到图片和文字对齐的一种样式.比如 这样的样式,我们写的时候有时候会出现不对齐的情况.我们有俩种方法 一种就是flex的布局,还 ...
- 从零开始学习html(十五)css样式设置小技巧——上
一.水平居中设置-行内元素 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> ...
- 从零开始学习html(十五)css样式设置小技巧——下
六.垂直居中-父元素高度确定的单行文本 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo ...
- css浮动布局小技巧
父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另 ...
- CSS的一些小技巧
1.黑白图像img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: graysc ...
- css的一些小技巧!页面视觉差!
相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎. 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括.这导致了一个很好的光学效应,使参观者的注意. 在网页设计中,为了实现这 ...
- HTML+CSS学习笔记 (15) - css样式设置小技巧
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...
- HTML+CSS笔记 CSS中级 一些小技巧
水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...
- 一些css书写的小技巧
一.css顺序 首先声明,浏览器读取css的方式是从上到下的.我们一般书写css只要元素具备这些属性就会达到我们预期的效果,但是这会给以后的维护和浏览器的渲染效率带来一定的影响,那么该怎么书写css的 ...
随机推荐
- Codeforces.1139D.Steps to One(DP 莫比乌斯反演)
题目链接 啊啊啊我在干什么啊.怎么这么颓一道题做这么久.. 又记错莫比乌斯反演式子了(╯‵□′)╯︵┻━┻ \(Description\) 给定\(n\).有一个初始为空的集合\(S\).令\(g\) ...
- Django——Ajax
1.Ajax简介 AJAX(Asynchronous Javascript And XML)--"异步的JavaScript与XML". Ajax使用Javascript语言与服务 ...
- Android的Activity组件
本章主题是Activity组件:Activity是Android四大组价之一,其重要地位自然不用说.“Activity是应用程序中可见的交互组件的基类,大致上等同于传统桌面应用个程序开发中的窗体.”( ...
- 我的 FPGA 学习历程(03)—— 使用 Quaruts 自带仿真工具
在上一篇中详细的介绍了怎样创建原理图工程,这篇同样使用原理图工程新建一个多路选择器,目的是学习使用图形输入的仿真工具输入仿真激励. 新建工程,并绘制以下的原理图. 编译项目,会多出一个警告: Crit ...
- Python数据分析基础PDF
Python数据分析基础(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1ImzS7Sy8TLlTshxcB8RhdA 提取码:6xeu 复制这段内容后打开百度网盘手 ...
- XVIII Open Cup named after E.V. Pankratiev. Grand Prix of SPb
A. Base $i - 1$ Notation 两个性质: $2=1100$ $122=0$ 利用这两条性质实现高精度加法即可. 时间复杂度$O(n)$. #include<stdio.h&g ...
- poj3045 Cow Acrobats(二分最大化最小值)
https://vjudge.net/problem/POJ-3045 读题后提取到一点:例如对最底层的牛来说,它的崩溃风险=所有牛的重量-(底层牛的w+s),则w+s越大,越在底层. 注意范围lb= ...
- verilog中signed的使用
1.在verilog中有时会用signed修饰符来修饰定义的数据,运算的时候也会用$signed()任务来强制转换数据,那么signed的修饰是为什么呢,是为了区分有符号数和无符号数的加法和乘法吗?其 ...
- Python基础之容器1----字符串和列表
一.编码: 1.编码只是梳理 2.编码涉及的函数: 3.实例: 字符串内存图 二.字符串 1.定义:由一系列字符组成的不可变序列容器,存储的是字符的编码值. 不可变:指字符串一旦定义,其内存地址就已经 ...
- Python: map() and reduce()
map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个lis ...