<!DOCTYPE html>

<html>

<head>

    <title>magin为百分比</title>

</head>

<style type="text/css">

    div{

        margin:10% 5%;

    }

</style>

<body>

    <div>

        <p>div</p>

    </div>

</body>

</html>

代码很简单，那么div的外边距是多少呢？百分比相对于那里说呢？

我们可以把浏览器的窗口设置为1000px，通过调试器可以看到div的4个外边距为100px；说明外边距设置为百分比是相对于盒子的宽度而言的，而非10%相对于宽度，5%相对于高度。

这是因为div窗口的高度随着文档内容的增加一直在改变，而宽度是一定的。

margin设置为百分比的含义的更多相关文章

  1. div宽高设置为百分比

    如果你将div的width和height设置为百分比,但是发现页面都不见了,这是因为父标签也要设置为百分比,也就是说body和html的宽高也需要设置为百分比 #containter{ width:1 ...

  2. margin设置为负数

    1.为负margin“平反” 我们在CSS中都会使用margin,但将margin设置成负数,那可能就不大好处理了.在网页设计中,人们对负margin用法的态度大相径庭,有的人非常喜欢,而有的人则认为 ...

  3. padding和margin设置成百分比

    Margin和Padding是我们在网页设计经常使用到的CSS样式,他们分别是间距和填充,一个作用于盒子外面,一个作用于盒子里面,默认的情况下,这些属性的值都会被计算在盒子的面积里面,在网页开发中的流 ...

  4. img 图片高度设置为百分比无效的解答

    当用百分比作为宽高时  因为百分比是相对于其最近的父元素的宽高,所以首先其父元素要有宽高,宽度一般不设置会有默认值(比如整个屏幕的宽度),但是高度不设置就没有默认值,因此如果父元素没设高度值,而其内部 ...

  5. margin系列之百分比

    本系列摘自  px; height: 600px; } #demo p{ margin: 10% 5%; } HTML: <div id="demo"> <p&g ...

  6. js获取宽度设置thickbox百分比

    thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...

  7. css--纵向margin设置auto和百分数真的无效吗？

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. LoadRunner11设置场景百分比模式完成多台客户端压力测试

    LoadRunner11用的不多,之前大部分的时候是用LoadRunner9.5,主要原因是由于担心新版本的稳定性,不过在Windows7系统下就不得不用LoadRunner11了,不过稳定不稳定,还 ...

  9. Java设置环境变量的含义（JAVA_HOME，PATH，CLASSPATH）

    开发Java程序之前,需要在计算机行安装并配置Java开发环境.一种是直接安装Myeclipse,利用其自带的JDK编译运行:另一种是在我们的Windows或者Linux平台下安装JDK,配置环境变量 ...

随机推荐

  1. 动态加载、移除、替换JS和CSS

    //动态加载一个js/css文件 function loadjscssfile(filename, filetype) { if (filetype == "js") { var ...

  2. SQL 创建一个只读账户 .

    1.进入sqlserver management studio 2.选择安全性->登录名->右键新建登录名 3.在常规里输入用户名和密码 4.在"用户映射"里“映射到此 ...

  3. Tcpdump使用常用9实例

    以下将给出9个使用tcpdump的例子,以说明tcpdump的具体使用方法. 1.针对特定网口抓包(-i选项) 当我们不加任何选项执行tcpdump时,tcpdump将抓取通过所有网口的包:使用-i选 ...

  4. OAF_文件系列3_实现OAF多行表中附件功能AttachmentImage（案例）

    20150727 Created By BaoXinjian

  5. [Tex学习笔记]矩阵输入中的省略号

    \usepackage{enumerate,mathdots} $\iddots$

  6. 动画_ _ Android应用开发之所有动画使用详解

    转载: http://blog.csdn.net/yanbober/article/details/46481171 题外话:有段时间没有更新博客了,这篇文章也是之前写了一半一直放在草稿箱,今天抽空把 ...

  7. JVM参数（一）JVM类型以及编译器模式

    现在的JVM运行Java程序(和其它的兼容性语言)时在高效性和稳定性方面做的非常出色.自适应内存管理.垃圾收集.及时编译.动态类加载.锁优化——这里仅仅列举了某些场景下会发生的神奇的事情,但他们几乎不 ...

  8. UNIX网络编程-基本API介绍（一）

    1.基本结构 大多数套接口函数都需要一个指向套接口地址结构的指针作为参数.每个协议族都定义它自己的套接口地址结构.这些结构的名字均以“sockaddr_”开头,并以对应每个协议族的唯一后缀结束. 1. ...

  9. php创建多级目录的两种方法

    1.使用递归的思想 function mkdirs_2($path){ if(!is_dir($path)){ mkdirs_2(dirname($path)); if(!mkdir($path, 0 ...

  10. delphi控件属性和事件

    常用[属性]  Action:该属性是与组件关联的行为,允许应用程序集中响应用户命令  Anchors:与组件连接的窗体的位置点  Align:确定组件的对齐方式  AutoSize:确定组件是否自动 ...