<!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. phonegap文件，目录操作以及网络上传，下载文件（含demo）

    正在做一个跨平台的应用,需要使用phonegap进行文件的一些基本操作. 需求如下:可以选择本地图片,或者从相机选择图片,并进行显示在本地,然后上传到服务器,以及可以从服务器下载图片显示出来,如果本地 ...

  2. C 和指针 学习随便

    ---恢复内容开始--- 对NULL的解引用访问,有可能报错,有可能不会,取决于编译器 指针数组以一个NULL指针结束 ######################################## ...

  3. [ActionScript 3.0] AS3.0 让一个视频无缝循环播放的一个偏方

    一个视频要循环播放,通常的办法都是播放完后再重新播放,但是不可避免的播放结束和重新开始播放这个时间点上会有停顿,如何解决这个问题,说个偏方吧! package com.views { import f ...

  4. Array,ArrayList、List<T>、HashSet<T>、LinkedList<T>与Dictionary<K,V>

    Array: 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. 但是数组存在一些不足的地方.在数组的两个数据间插入数据是很麻烦的,而且在声明数组的时候 ...

  5. SecureCRT 连接后一些会话选项配置修改

  6. 用递归方法求一个list的最大值

    极好的一张图,瞬间理解.然后留意一下边界条件直接搞定.

  7. RedHat5--yun源无法使用问题解决

    YUM是Redhat Linux在线安装更新及软件的工具,但是这是RHEL5的收费功能,如果没有购买Redhat的服务时不能使用RHEL5的更新源的,会提示注册. 由于CentOS是从Redhat演化 ...

  8. maven仓库介绍《本地仓库、远程仓库》

    在Maven中,任何一个依赖.插件或者项目构建的输出,都可以称之为构件.Maven在某个统一的位置存储所有项目的共享的构件,这个统一的位置,我们就称之为仓库.(仓库就是存放依赖和插件的地方)任何的构件 ...

  9. javascript立即执行函数 (function(){})()

    看到一段代码: (function(){ var outer = $('#subject'); outer.find('li').on('mouseover', mouseover); })() ( ...

  10. jexus

    Jexus web server V5.1 安装配置要点 一.Jexus简介:Jexus web server for linux 是一款基于.NET兼容环境,运行于Linux/unix操作系统之上, ...