<!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. 02 Linux 下安装JDK并测试开发“Hello World！”

    测试环境 主机系统:Win7 64位 虚拟机:VMware® Workstation 11.1.0 虚拟机系统:CentOS 6.5 64位   Kernel 2.6.32-431.e16.x86_6 ...

  2. HackerRank "Kitty and Katty"

    It's more of a brain-teaser than a Game Theory problem.. #!/bin/python3 T = int(input().strip()) for ...

  3. flash 自定义右键功能

    使用过程可能遇到的问题: MouseEvent.RIGHT_CLICK TypeError: Error #2007: 参数 type 不能为空. 首先在项目中设置编译参数. 如果是as项目,则在项目 ...

  4. 转，CV和resume的区别

    一直以来,BBS上的信息资料都传达给我一个网上“主流”的关于CV和resume的看法: CV约等于Resume,前者略倾向于学术,后者略倾向于工作经验,字数控制在1-2页内 说实话,一直以来我也就这么 ...

  5. view坐标_ _ Android应用坐标系统全面详解

    转:http://blog.csdn.net/yanbober/article/details/50419117 1 背景 去年有很多人私信告诉我让说说自定义控件,其实通观网络上的很多博客都在讲各种自 ...

  6. java内存溢出分析（二）

    我们继续java内存溢出分析(一)的分析,点击Details>按钮,显示如下图,我们发现有一个对象数量达到280370216个,再点击其中的List objects 点击后,显示下图 至此,我们 ...

  7. 【javascript基础】3、变量和作用域

    前言 这篇和大家说一下javascript中的变量和作用域,由于是将基础嘛,主要给大家捋一下知识,不想翻开书复习的道友可以看一下,打算刚开始学习javascript的同学可以扫一眼. PS:jQuer ...

  8. [CF245H] Queries for Number of Palindromes (容斥原理dp计数)

    题目链接:http://codeforces.com/problemset/problem/245/H 题目大意:给你一个字符串s,对于每次查询,输入为一个数对(i,j),输出s[i..j]之间回文串 ...

  9. input自动获取焦点

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

  10. JavaScript执行bat文件清理浏览器缓存

    function exec() { window.onerror = function (err) { if (err.indexOf('utomation') != -1) { alert('命令已 ...