关于margin和padding取值为百分比和负值的总结
以下是自己学习过程中的总结,直接上结论:
1.margin/padding取值为百分比:
margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的。
2.margin取值为负值:
比如 margin-top / right / bottom / left : -100px; 为负值的情况讨论如下:
①:


②:若元素存在width:则正常:
比如 div { margin: 10px 2% -40px 0 } 表示该盒子顶边距为10px,右边距是父元素宽度的2%,下边距为-40px,左边距为0
3.padding取值为负值:padding不支持任何负值

关于margin和padding取值为百分比和负值的总结的更多相关文章
- 当margin和padding的值是百分比时,如何计算
对元素的margin设置百分数时,百分数是相对于自身包含块的width计算(包含块传送门),不管是margin-top/margin-bottom还是margin-left/margin-right. ...
- 当padding/margin的取值形式为百分比时。。。。。
一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/ ...
- 移动端网页巧用 margin和padding 的百分比实现自适应
一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...
- css:margin和padding的百分之使用
#app { position: fixed; width: 94%; height: 100%; background: pink; padding: 0px 3% 0px 3%;} 如上代码,最终 ...
- 网页CSS中*{margin:0; padding:0;}有什么用
* 这东西叫“通配符”用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin 或p ...
- 关于网页布局中常见的margin: 0px ; padding: 0px; 总结
我们在网页布局中常用到margin: 0px; padding: 0px; 但是在大型的网站布局中通常不这样写通常是按下面这种方式. ul, li, ol, dl, dt, dd, div, p, ...
- 使用盒子定位布局时margin和padding使用
首先说的是区别: 如图所示,黄色padding,绿色margin,中间的content是内容,margin和padding的值是不计算在内容高宽的.这里补充的是在实际情况中边框宽度也是不计算在内的.这 ...
- 浅谈Margin和Padding值设置成百分数的布局
转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...
- HTML元素margin、padding的默认值
HTML元素margin.padding的默认值 element margin(单位像素) padding html 0 0 body 8 0 div 0 0 h1 21 0 h2 19 0 19 0 ...
随机推荐
- DTD笔记
DTD(Document Type Definition)文档类型定义: DTD被用于定义XML文档的结构,作为规范XML文档的一种内容模型,DTD在各领域已形成统一规范的文档. 在XML文档中使用D ...
- Wordpress播客网站搭建
- 微信小程序存放视频文件到阿里云用到算法js脚本文件
peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...
- Understanding When to use RabbitMQ or Apache Kafka Kafka RabbitMQ 性能对比
Understanding When to use RabbitMQ or Apache Kafka https://content.pivotal.io/rabbitmq/understanding ...
- luogu3373 【模板】线段树2
题目大意: 已知一个数列,你需要进行下面三种操作:1.将某区间每一个数乘上x2.将某区间每一个数加上x3.求出某区间每一个数的和 本线段树的标记是个二元组:add和mul,其代表将一个线段中的每一个点 ...
- C/S与B/S架构 区别·与优点
C/S和B/S,是再普通不过的两种软件架构方式,都可以进行同样的业务处理,甚至也可以用相同的方式实现共同的逻辑.既然如此,为何还要区分彼此呢?那我们就来看看二者的区别和联系. 一.C/S 架构 1 ...
- iOS中城市定位功能的实现
引入框架:CoreLocation .h文件 引入CoreLocation/CoreLocation.h @interface WeatherViewController :UIViewControl ...
- springboot在eclipse实现热部署
eclipse使用spring-tool-suite插件创建springboot项目,项目创建完成后. 选中项目,右键 Spring Tools --> Add Boot Devtools 点 ...
- 第一次通过AVD Manager创建了一个虚拟设备,但是在Android Studio运行程序时却无设备可选
第一次通过AVD Manager创建了一个虚拟设备,但是在Android Studio运行程序时却无设备可选 原因是adb.exe未运行起来 至于adb.exe未正常运行起来的原因多半是5037端口被 ...
- hadoop datanode启动失败(All directories in dfs.data.dir are invalid)
由于hadoop节点的磁盘满了,导致节点死掉,今天对其进行扩容.首先,将原节点的数据拷贝到目标节点下,从而避免数据的丢失,但是在执行hadoop_daemon.sh start datanode后没有 ...