当margin和padding的值是百分比时,如何计算
对元素的margin设置百分数时,百分数是相对于自身包含块的width计算(包含块传送门),不管是margin-top/margin-bottom还是margin-left/margin-right。当然,padding的原理也是一样的。
如果没有为元素声明width,此时元素框的总宽度包括外边距取决于父元素的width,这样可能得到“流式”页面,即元素的外边距会扩大或缩小以适应父元素的实际大小。
为什么margin-top/margin-bottom的百分数是相对于width而不是height呢?
CSS权威指南中的解释:
我们认为,正常流中的大多数元素都会足够高以包含其后代元素(包括外边距),如果一个元素的上下外边距时父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加,如此循环。
原文链接:https://blog.csdn.net/i_will_be/article/details/77404722
当margin和padding的值是百分比时,如何计算的更多相关文章
- 关于margin和padding取值为百分比和负值的总结
以下是自己学习过程中的总结,直接上结论: 1.margin/padding取值为百分比: margin和padding四个方向上的取值为百分比都是参照父级元素的宽度来计算的. 2.margin取值为负 ...
- (转)当margin-top、padding-top的值为百分比时是如何计算的?
本文链接:https://blog.csdn.net/qq_27437967/article/details/72625900问题:当margin-top.padding-top的值是百分比时,分别是 ...
- 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的值是不计算在内容高宽的.这里补充的是在实际情况中边框宽度也是不计算在内的.这 ...
- 当padding/margin的取值形式为百分比时。。。。。
一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/ ...
- 移动端网页巧用 margin和padding 的百分比实现自适应
一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...
- 浅谈Margin和Padding值设置成百分数的布局
转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...
随机推荐
- mininet:使用vxlan连接两台虚拟机的网络topo
需改虚拟机的网络适配器,将其改为host-only 尝试ping宿主机ip地址,此时能够ping同与虚拟机相连的虚拟网卡ip地址,无法ping同其他网卡ip地址 在虚拟机和宿主机中创建网络topo 在 ...
- 《一头扎进》系列之Python+Selenium框架设计篇5 - 价值好几K的框架,哎呦!这个框架还真有点料啊!!!
1. 简介 其实,到前面这一篇文章,简单的Python+Selenium自动化测试框架就已经算实现了.接下来的主要是介绍,unittest管理脚本,如何如何加载执行脚本,再就是采用第三方插件,实现输出 ...
- 深入分析CAS
CAS,Compare And Swap,即比较并交换.Doug lea大神在同步组件中大量使用CAS技术鬼斧神工地实现了Java多线程的并发操作.整个AQS同步组件.Atomic原子类操作等等都是以 ...
- linux sort命令用法
sort命令:用于将文本文件内容加以排序,sort可针对文本文件的内容,以行为单位来排序. 命令格式: sort [-bcdfimMnr][-o<输出文件>][-t<分隔字符> ...
- 前端框架开始学习Vue(一)
MVVM开发思想图(图片可能会被缩小,请右键另存查看,图片来源于网络) 定义基本Vue代码结构 1 v-text,v-cloak,v-html命令 默认 v-text没有闪烁问题,但是会覆盖元 ...
- SAP ETL DS
如何设置Dataservices使用FTP传输方式_连接SAP系统 [如果DS的目标数据库选择使用Oracle,请务必确认以下数据库设置] If SAP R3 contents CJK charact ...
- testlink关联redmine设置
Testlink关联Redmine 公司用testlink对测试用例进行维护,redmine关系项目及bug,所以为了方便期间,将Testlink关联Redmine,方便测试用例执行后,在redmin ...
- 三:MySQL系列之SQL查询
本篇主要介绍使用SQL查询数据库的操作,包括条件查询.排序.聚合函数.分组.分页.连接查询.自关联.子查询等命令操作. 首先我们先创建一个数据库.数据表.插入字段: --------这部分在上篇以及介 ...
- (备忘)jeecg的$.dialog的一些参数
jeecg表单弹出框采用的技术是lhgdialog 一.配置全局默认参数 (function(config){ config['extendDrag'] = true; // 注意,此配置参数只能在这 ...
- 滑雪 ( bfs+记忆化
https://www.luogu.org/problemnew/show/P1434 题目 #include<iostream> #include<cstdio> #inc ...