关于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 ...
随机推荐
- SpringInAction4笔记——装配
重点:常用的上下文环境 AnnotationConfigApplicationContext ClassPathXmlApplicationContext FileSystemXmlApplicati ...
- HTML 客户端存储
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...
- Java代理(Aop实现的原理)
经过大牛同事的一句指点立马明确的代理实现方式,Spring Aop应该也是这么去做的.直接上代码 实如今Car的run方法之前调用star方法,在run方法之后调用stop方法. Car类 packa ...
- h5 getUserMedia error PermissionDeniedError
HTML5 在使用非 localhost 地址访问时打开摄像头失败 .报getUserMedia error PermissionDeniedError,火狐下是可以正常调取的. 需要https: 火 ...
- java上传文件,提交表单必须要设置enctype="multipart/form-data"
表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码.默认情况,这个编码格式是application/x-www-form-urlenc ...
- GUI界面资源
30个真棒的(免费iPhone,iPad IOS)的GUI 界面设计元素模板 做iphone开发的福音 创造力是指任何一种演示设计i的能力.无论是一个标志,旗帜,广告或一个完整的设计,能够注入的创 ...
- CSS animation-timing-function 属性中的 steps() 与 step-start,step-end
steps() 设置间隔参数,可以实现分步过渡 第一个参数指定了时间函数中的间隔数量(必须是正整数)第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认 ...
- Pyhton:List build-in function
列表是Python中的可迭代对象之一,在讲列表的内建函数之前我们可以自己在IDE上看看都有那些内建函数,我们可以在pycharm中使用代码及其运行结果如下: print(dir(list)) ['__ ...
- 应用程序启动器 “sublime_text.desktop“ 还没有被标记为 信任。如果您不知道这个文件的来源,那么启动它可能会不安全。解决sublime在ubuntu中不支持中文输入问题。
1.下载 git clone https://github.com/lyfeyaj/sublime-text-imfix.git 2.进行一些处理 cd ~/sublime-text-imfix su ...
- Redis使用基本套路
Redis的数据,通常都是来自于数据库. 存入Redis当中,可以快速的查询.不用每次都关联查询,然后其他处理什么的. 通常可以把一些,不经常变的数据存储其中. 避免数据变动,而Redis缓存数据不变 ...