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. 关于ssh上传文件

    今天用ssh传项目到公司总部的服务器上,报了错误: encountered 1 errors during the transfer 重启ssh再次上传还是一样的错误,然后我让公司那里重启一下服务器, ...

  2. Sql server 2008 中varbinary查询

    sqlserver2008中遇到一个坑爹的问题,使用以下语句添加的数据 insert into testtable ( username, password, productcode ) select ...

  3. 观点：BPM已经过时了？

    在这个信息爆炸的世界,业务转型通常是以数字系统和流程的方式发生. 根据Forrester的报告“软件必须丰富你的品牌”,人们要依靠这些技术实现期望的商业成果,比如品牌联系.客户服务创新.更好的产品和提 ...

  4. uboot环境变量实现分析

    u-boot的环境变量用来存储一些经常使用的参数变量,uboot希望将环境变量存储在静态存储器中(如nand nor eeprom mmc). 其中有一些也是大家经常使用,有一些是使用人员自己定义的, ...

  5. php 常用数组操作

    php常用的数组操作函数,包括数组的赋值.拆分.合并.计算.添加.删除.查询.判断.排序等 array_combine 功能:用一个数组的值作为新数组的键名,另一个数组的值作为新数组的值 <?p ...

  6. HTML中的select只读

    因为Select下拉框只支持disabled属性,不支持readOnly属性,而在提交时,disabled的控件,又是不提交值的.现提供以下几种解决方案: 1.在html中使用以下代码,在select ...

  7. C++ 之 class 的思考

    工作多年,突然发现c++这么多年都是零散记录了些自己对C++的反思,没有做过任何的文字记录表示遗憾. 看到很多小伙也都在写技术博客,那我自己也就写一写自己的一些 思考吧! C++的基本类这个东西,想必 ...

  8. java1234初学maven

    第一讲: maven maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. maven安装与下载: .确定jdk已经安装并且配置 .安装mav ...

  9. C#对Dictionary的按Value排序

    使用List对其进行排序 using System; using System.Collections.Generic; using System.Text; namespace ConsoleApp ...

  10. Win7 下IIS（7.5）发布 ASP.NET MVC

    操作系统 Win 7 旗舰版 开发工具 VS2015 使用技术 IIS7.5 + MVC4.0 一 . 在IIS上部署程序后出现错误-当前标识(NT AUTHORITY/NETWORK SERVICE ...