<!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. 黄聪：WordPress: 使用 wp_insert_attachment 上传附件

    我们来研究一下如何在主题或者插件的开发中上传附件: 主要参考这个函数:https://codex.wordpress.org/Function_Reference/wp_insert_attachme ...

  2. HBase使用场景和成功案例 (转)

    HBase 使用场景和成功案例 有时候了解软件产品的最好方法是看看它是怎么用的.它可以解决什么问题和这些解决方案如何适用于大型应用架构,能够告诉你很多.因为HBase有许多公开的产品部署,我们正好可以 ...

  3. 读CopyOnWriteArrayList有感

    除了加锁外,其实还有一种方式可以防止并发修改异常,这就是将读写分离技术(不是数据库上的). 先回顾一下一个常识: 1.JAVA中“=”操作只是将引用和某个对象关联,假如同时有一个线程将引用指向另外一个 ...

  4. xml与json 介绍

    一.JSON数据格式 1)概念:json是一种网络数据传输格式,有值/对象:{“A”:1,”B”:”2”…}词典:对象的序列:[,,,,,]数组两种数据类型 2)URLWithString 将字符串网 ...

  5. EditText----

    ==============01   editText属性 1.输入法Enter键图标的设置: 软件盘的界面替换只有一个属性android:imeOptions,这个属性的可以取的值有normal,a ...

  6. PHP截断函数mb_substr()详细介绍

    [导读] 在php中mb_substr()函数是用来截中文与英文的函数,可以方便快速的解决截取指定字符长度的问题,下面我来给大家介绍介绍.提示:mb_substr在于php中是默认不被支持的我们需要在 ...

  7. X5 内核浏览器对json格式支持的一个小区别

    var json1 = { "data": [{ "type": "pic", "filename": "P6 ...

  8. 19. Palindrome Partitioning && Palindrome Partitioning II （回文分割）

    Palindrome Partitioning Given a string s, partition s such that every substring of the partition is ...

  9. HEAP CORRUPTION 错误

    一般是new一块内存过小,  在这个内存块上写入的内容过大, delete时出现的错误; 如: char* ptr = new char[2]; //申请了两个字节 *ptr = "1234 ...

  10. ES6中的Class

    对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重 ...