负margin的原理以及应用
负margin在布局中往往起到意想不到的效果,比如在多栏等高布局中就是用该技巧。
虽说网络上关于负margin的实践有很多,但对margin负值为什么会出现这样的效果却没有多少讲解,本篇的目的就是阐述负margin
产生或者作用的原因。
margin负值之所以可以修改元素在文档流中的位置,也可以改变元素的宽度,主要因为一个公式:
BoxWidth =ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;
上述公式很容易理解,熟悉box模型的都应该明白。
margin负值之所以起到了意想不到的作用,主要是因为该公式的各种计算导致了一些属性值的改变所引起。
口说无凭,先举几个例子:
ex1.
1 .m-20{margin-bottom: -20px;}
2 .m-200{margin-bottom: -200px;}
3 .l{float:left;}
4 .h200{height:200px;}
5 .m-20{margin-bottom:-20px;}
6 .m-200{margin-bottom:-200px;}
7
8
9 <div class="l pct40 bg-gray mr20">
10 <div class="h200 m-20 bg-teal pct40"></div>
11 </div>
12 <div class="l pct40 bg-gray">
13 <div class="h200 m-200 bg-teal pct40"></div>
14 </div>
第一个父div的子元素margin-bottom设为-20px;根据上述公式,由于子元素的height是定值,为200px,padding为0,带入可得ParentHeight=180px;正如图显示。
第二个父div的子元素margin-bottom设为-200px,同理可得ParentHeight= 0px,图上并没有显示。
ex2.
.eqh{padding-bottom: 220px;margin-bottom: -200px;}
.ovh{overflow:hidden;}
.cl{clear:both;}
<div class="cl w500 mt20 l ovh">
<div class="l w200 bg-silver mr20 eqh">
<p>这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
</p>
</div>
<div class="l w200 bg-silver eqh">
<p>这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题这是一个测试题
这是一个测试题
这是一个测试题
这是一个测试题
</p>
</div>
</div>
这就是margin负值应用最多的场景,多栏等高布局,总共2个子div,第一个子div的padding-bottom撑开子div的高度--两行文字高度为38px,padding的高度为220px,所以第一个子元素高度为258px,在不考虑第二个子div存在的情况下,父div高度=258-200-0-0-0-0-0=58px;
再计算第二个div,同样的公式,只是带入的数值不同,此时第二个子div的高度为334px,在考虑margin-bottom为-200px的情况,计算出父div高度=334-200=134px;
此后将计算结果综合,父div高度取最大值,为134px,这就是最后的浏览器呈现给我们的视图。
有些人会发现当元素的width属性设置为auto,或者不设置width时,margin-left或者margin-right为负值可能改变元素的大小,这种说法不严谨。
老方法,还是根据上述万能公式,左右margin的值(不论正负),在其父元素宽度(即ParentWidth)给定的情况下,会根据margin值的改变,来响应改变元素的width值,有些类似所谓的控制变量法!
另,现比较另外一个属性,vertical-align:-2px 与margin-bottom:-2px的区别所在。
对于vertical-align,我们主要用来元素的居中显示,很少用具体的值。但是有些情况,vertical-align的负值会有出其不意的效果。
二话不说,先上个demo:
<div class="l pct40 bg-gray mr20">
<div class="h200 v-200 bg-teal pct40"></div>
</div>
<div class="l pct40 bg-gray">
<div class="h200 m-200 bg-teal pct40"></div>
</div>
第一个div中,蓝色子元素采用了vertical-align:-200px,父元素高度和子元素相同;
第二个div中,蓝色子元素采用margin-bottom: -200px,父元素高度为0;
现在改变变量,将数值改为-20px,再看看:
可以明显看到,第一个div,子元素和父元素高度仍然相同,第二个div,父子元素不同,但仍满足上面的万能公式。
由此可以看出,通过vertical-align负值设置子元素,其呈现的位置和设置margin-bottom负值相同,不同点在于父元素框。
通过vertical-align负值设置的子元素的父元素的大小会增加,切不满足万能公式,而通过margin-bottom负值设置的子元素的父元素高度满足万能公式。
一言以蔽之,vertical-align会撑开父元素,而margin-bottom相应的根据上述公式计算会减小其高度。
- 100个Numpy练习【3】
- 100个Numpy练习【4】
- Golang语言中Path包用法
- 100个Numpy练习【5】
- Golang中container/list包中的坑
- 关于Golang语言数组索引的有趣现象
- 使用SQL来分析数据库参数(二)(r10笔记第82天)
- Golang不定参数
- [go语言]利用缓冲信道来实现网游帐号验证消息的分发和等待
- 转--Golang语言版 ssh口令破解工具
- cubieboard(树莓派)安装Ubuntu+Apache+PHP+Mysql
- Oracle 12c里的几点补充(一)(r11笔记第7天)
- Oracle备库的PDB无法连接的问题(r11笔记第6天)
- Golang语言社区--模板的使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- .NET Core中间件与依赖注入的一些思考
- 如何审计MySQL 8.0中的分类数据查询?
- 聊一个 GitHub 上开源的 RBAC 权限管理系统,很6!
- Spring AOP,应该不会有比这更详细的介绍了!
- 我又发现 Spring Security 中一个小秘密!
- OpenCV的实用图像处理操作案例分享
- CentOS 7上搭建 Zabbix4.0,一次性成功,收藏了!
- 超全!我整理一波最常用的开源项目
- 【NLP】竞赛必备的NLP库
- Java NIO Selector 详解
- 【机器学习基础】一文搞懂机器学习里的L1与L2正则化
- 【深度学习】深入理解LSTM
- 短视频商城源码,两种方式实现点击出现弹窗显示
- 【50期】基础考察:ClassNotFoundException 和 NoClassDefFoundError 有什么区别
- MySQL 8.0新特性 — 管理端口