<!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. linux网络环境下socket套接字编程（UDP文件传输）

    今天我们来介绍一下在linux网络环境下使用socket套接字实现两个进程下文件的上传,下载,和退出操作! 在socket套接字编程中,我们当然可以基于TCP的传输协议来进行传输,但是在文件的传输中, ...

  2. SpringMVC处理静态资源

    若将DispatcheServlet请求映射设置为/,则SpringMvc将捕获WEB容器的所有请求,包括静态资源的请求,SpringMvc会将它们当成一个普通的请求处理,那么将会出现因找不到对应的处 ...

  3. 【MySQL】结构行长度的一些限制

    今天被开发提交的DDL变更再次困惑,表中字段较多,希望将已有的两个varchar(4000)字段改为varchar(20000),我想innodb对varchar的存储不就是取前768字节记录当前行空 ...

  4. log4net:保存日志到数据库

    1:下载log4net http://logging.apache.org/log4net/download_log4net.cgi 2:引用到项目 下载以后,在项目中引用log4net.dll 3: ...

  5. [HTML] CSS3 边框

    CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...

  6. Delphi完成的断点续传例子 转

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  7. 用自己的ID在appstore中更新app-黑苹果之路

    由于之前套用了别人的镜像,在appstore中更新XCode时总要输别人id的密码,id还不能改.网上有的说要把XCode删掉,然后再用自己的ID更新,找到另外一个方法,更简单: 1.打开引用程序目录 ...

  8. 后一个div无法遮挡住前一个有img的div

    这个标题实在是我无奈之下才取出来的,毕竟我文采有限~ 今天我遇到的一个eggpain的问题: 前提:当页面上有两个没有background的div,大小一样,绝对定位在同一个地方(让第二个遮挡住第一个 ...

  9. vs2013_arcgis_developer_kit_101_install

    1.修改注册表以安装AE101 在注册表中HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\10.0增加类型为REG_SZ的 ...

  10. leetcode 141

    141. Linked List Cycle Given a linked list, determine if it has a cycle in it. Follow up:Can you sol ...