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. SQL基础语句（提升）

    1.复制表(只复制结构,源表名:a 新表名:b) select * into b from a where 1<>1 2.拷贝表 insert into b(a,b,c) select d ...

  2. PHP 捕捉错误，记录到日志

    register_shutdown_function("shutdown"); define('ERR_LOG_FILE', '/dev/shm/php_log.txt'); if ...

  3. SQL IF ELSE

    if (条件)    begin        (执行模块)    endelse if (条件)    begin        (执行模块)    endelse    begin        ...

  4. 用jQuery Mobile做HTML5移动应用的三个优缺点

    JQuery Mobile 和 HTML5 的 3个优点 1. 上手迅速并支持快速迭代:在一个星期多一点的时间里,通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobi ...

  5. psp个人软件开发

    为开发人员提供一个PSP工具,简化时间记录工作:同时提供数据使用的工具,帮助开发人提高估算能力.  需求分析: 编号 特性 FEAT01 研发经理能够创建项目.指定或修改项目经理.删除尚未分配工作任务 ...

  6. AngularJs的UI组件ui-Bootstrap分享（十）——Model

    Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...

  7. #HTML：無序、有序與定義清單

    #HTML:無序.有序與定義清單 Maplewing 于 星期六, 12/10/2013 - 09:48 提交 清單在網頁中是很常使用到的東西,故多少還是要了解一下.在HTML中有三種不太一樣的清單, ...

  8. c++ 之 编译期多态&运行期多态

    编译时多态:程序运行前发生的事件 —— 函数重载.运算符重载 .模板  ——静态绑定 运行时多态:程序运行时发生的事件 —— 虚函数机制——动态绑定 template<typename T> ...

  9. Remove openjdk in Ubuntu/Configure jdk and running adb in 64-bit Ubuntu

    sudo apt-get autoremove openjdk-7-jre sudo apt-get purge openjdk* java -version No openjdk available ...

  10. C++的STL

    今天,看一段代码的时候发现只一句话就做了个排序,是这样的: sort(rotateArray.begin(),rotateArray.end()); 很震惊,后来查了一下sort的用法, sort函数 ...