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. 不同版本jq冲突问题

    在网上找了几个qq客服的js代码,本地调试没问题一加到网站上就出现问题了各种不对.最后发现是jq的问题,网站中有不同的jq冲突了,解决方法: <script>var $j = jQuery ...

  2. Linux——【转】gcc编译与gdb调试简要步骤

    原文:gcc编译与gdb调试简要步骤 一.Linux程序gcc编译步骤: Gcc编译过程主要的4个阶段: l 预处理阶段,完成宏定义和include文件展开等工作:(.i) l 根据编译参数进行不同程 ...

  3. 第一篇:初识bootstrap

    Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利 ...

  4. 杭电ACM1004

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  5. c++ redis-client

    http://hahaya.github.io/operator-redis-under-linux/#0-tsina-1-10809-397232819ff9a47a7b7e80a40613cfe1 ...

  6. 【python】函数

    内置函数: abs('A') 报错:TypeError: bad operand type for abs(): 'str' 传入的参数类型不对 自定义函数: 1 def my_abs(x): 2 i ...

  7. 【iCore2 模块相关资料】iM_LAN 100M 以太网模块UDP例程

    ============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...

  8. 一定要在主线程更新UI

    在一些技术交流群里面,一些初学者(我表示我也是其中一人),总是会发现,为什么我UIView的animate方法,不会动!而是直接闪? 这是为什么呢? 一定要在主线程中更新UI! 一定要在主线程中更新U ...

  9. Python中为feedparser设置超时时间教程

    python有一个用于解析feed的模块:feedparser,feedparser解析各种feed是非常方便的,唯一比较恼火的是遇到一些badurl,经常会导致堵塞,因此需要为feedparser设 ...

  10. 完整的分页存储过程以及c#调用方法

    高效分页存储过程 USE [db] GO /****** 对象: StoredProcedure [dbo].[p_Page2005] 脚本日期: // :: ******/ SET ANSI_NUL ...