padding以及margin的四个方向设置值为百分数的时候，是以父元素的宽度为基数来进行计算。

（为了保持横向和纵向方向上的margin/padding一致，但是其实也不是一定以父元素的宽度为参照物，取决于你的排版方式是横向还是纵向）

top,bottom值是以父元素的高度为基数,left,right 以父元素的宽度为基数。

补充：padding不可以为负值，margin，top可以为负值。

　　

当padding，margin，top为百分比值，具体数值如何计算的更多相关文章

  1. 左右margin top问题百分比值

    不想说今天心情有多差! 9点多開始发现一个"bug",需求是依据屏幕高度动态调整某个div的位置.代码大概是这种. <div style="margin-top: ...

  2. css relative设置top为百分比值

    前言: 最近在学习HTML.CSS的过程中,想模仿一下百度首页.发现搜索框这一部分与上下其它元素的空白距离可以随着窗口大小变化(效果如下图所示),于是自己研究了一下并记录下来. 效果实现 <!D ...

  3. 定位（left 、right 、top 、 bottom）、padding、margin 值设为百分比值时

    定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...

  4. 巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

    本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说, ...

  5. 巧用margin/padding的百分比值实现高度自适应

    原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padd ...

  6. margin/padding百分比值的计算

    1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这 ...

  7. 当padding/margin的取值形式为百分比时。。。。。

    一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/ ...

  8. css百分比值到底参考谁？

    一.元素宽高设置百分比 (1)width / min-width / max-width 参考块级父元素的宽度 (2)height / min-height / max-height 参考块级父元素的 ...

  9. CSS设置百分比值的问题

    当给元素设置width:100%:height:100% 的时候没有反应 因为,元素的宽高是根据内容来自动适应的,当设置百分比值时,是根据这个元素的父元素来确定百分比的 如果父元素没有固定的值,那就需 ...

随机推荐

  1. Siverlight 导出Excel （经测试通过 Vs2010 ，silverlight5 ）

    网上搜了下,很多代码都有各种问题,自己抽时间整理了一下这个导出 using System; using System.Net; using System.Windows; using System.W ...

  2. python学习04——列表的操作

    笨办法学python第38节 如何创建列表在第32节,形式如下: 本节主要是讲对列表的操作,首先讲了 mystuff.append('hello') 的工作原理,我的理解是,首先Python找到mys ...

  3. win10 内测14352 加入了容器 和docker新功能，想体验的赶快升级

    原来只在server2016上有,现在加入到win0内测版了windows 容器提供了两种级别的隔离技术,分别是Windows Server container  和Hyper-V Container ...

  4. The connection to adb is down, and a severe error has occured.问题解决方法小结

    遇到了几次这个问题:The connection to adb is down, and a severe error has occured. You must restart adb and Ec ...

  5. golang调用EXE

    我是win7+go1.7+liteide,调用calc.exe package main import ( "os/exec" ) func main() { datapath : ...

  6. PowerMockito　同时mock多个对象

    有时候,需要测试的方法内有collections结构,就需要同时mock多个对象 被测方法: public class EmployeeService { public List<Integer ...

  7. 【转】Nginx中upstream有以下几种方式：

    1.轮询(weight=1) 默认选项,当weight不指定时,各服务器weight相同, 每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器down掉,能自动剔除.upstream bak ...

  8. JS 4 新特性：混合属性（mixins）之二

    Mixins many classes[混合许多个类] 迄今为止,我们已经学会了简单的继承,我们还能够通过使用mixins处理机制来混合许多类.源于这种理念是非常简单的:我们能够把许多个类最终混合到一 ...

  9. google 账号登陆chrome内容是中文的问题

    最近要用到google accout使用某项服务,奇怪的是之前是英文,登陆后就显示中文了,我把浏览器默认的语言和电脑的系统语言改了也无济于事,最好还是google 帮忙解决了,原来我的google a ...

  10. 音频软件消除人声的一点体会（cood edit ,goldwav)

    音频软件消除人声的一点体会(cood  edit ,goldwav) 使用方法: 1.打开文件 2.命令处理(红色位置可以调整到你认为合适的数据或效果) 3.效果:两个软件均处理后的效果均可以接受.不 ...