<style>
#demo{
margin: 0 auto;
width: 1000px;
height: 500px;
background: #eee;
overflow: hidden;
/*垂直显示,改变參照物*/
/*-webkit-writing-mode: vertical-rl;*/
/*writing-mode: tb-rl;*/
}
#demo p{
margin:10% 1%;
background: #ccc;
}
</style>
<div id="demo">
<p>我是一个p哦</p>
</div>

margin:10% 1%;

横向显示的按宽度算

垂直显示是按高度算

留作纪念。多解释。

margin 百分比是按參照物来计算滴 不知道吧?的更多相关文章

  1. margin百分比,重叠和auto

    一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed) ...

  2. H5移动前端完美布局之-margin百分比的使用

    一 ,背景 在移动端页面开发我们经常会遇到一件尴尬的事 我们所开发出来的页面跟设计师所给的页面差别很大 再加上移动设备屏幕的大小不一出来的效果更是参差不齐 然后.... 当然 现实情况没有这么糟糕.. ...

  3. margin百分比的相对值--宽度!

    假设一个块级包含容器,宽1000px,高600px,块级子元素定义 margin:10% 5%; 那么 margin的 top, right, bottom, left 计算值最终是多少px? 不是1 ...

  4. css的margin

    1.适合于没有设定width/height的普通block水平元素 2.只适用于水平方向尺寸 例子:一侧定宽的自适应布局 <html> <head> <meta name ...

  5. margin系列之百分比

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

  6. 当padding/margin的取值形式为百分比时。。。。。

    一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/ ...

  7. CSS margin详解

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...

  8. 理解margin

    margin可以改变容器的尺寸 //元素尺寸分为可视尺寸,占据尺寸 margin与可视尺寸 1.适用于没有设定width/height的普通block水平元素 2.只适用于水平方向的尺寸 应用:一侧定 ...

  9. CSS深入理解之margin

      前言   改变容器尺寸   margin改变容器尺寸有以下两个限制条件: 使用于没有设置宽高的普通block元素float/absolute/fixed元素 以及 inlines水平 table- ...

随机推荐

  1. Python生成器(yield)

    对于调用一个普通的Python函数,一般是从函数的第一行代码开始执行,结束于return语句.异常或者函数所有语句执行完毕.一旦函数将控制权交还给调用者,就意味着全部结束.函数中做的所有工作以及保存在 ...

  2. java编译器和java解释器、JVM

    作用: JVM:JVM有自己完善的硬件架构,如处理器.堆栈(Stack).寄存器等,还具有相应的指令系统(字节码就是一种指令格式).JVM屏蔽了与具体操作系统平台相关的信息,使得Java程序只需要生成 ...

  3. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  4. 两款工作流JBPM和CCBPM的对比

    以国外流行的工作流jbpm4的模式与当今中国开源的ccbpm(ccflow和jflow的总称)流程引擎对照.以便让各位能够了解到中国国情的工作流引擎与国际流行的设计规则的差别.不同.与优缺点. 国外工 ...

  5. error C3859: 超过了PCH的虚拟内存范围;请使用“-Zm33”或更大的命令行选项重新编译

    编译 ORB_SLAM的Release版本时,出现了此问题: 错误 2 error C3859: 超过了 PCH 的虚拟内存范围;请使用"-Zm465"或更大的命令行 修改方法: ...

  6. 【sqli-labs】 less6 GET - Double Injection - Double Quotes - String (双注入GET双引号字符型注入)

    同less5 单引号改成双引号就行 http://localhost/sqli/Less-6/?id=a" union select 1,count(*),concat((select ta ...

  7. (转)C#开发微信门户及应用(1)--开始使用微信接口

    http://www.cnblogs.com/wuhuacong/p/3613826.html 微信应用如火如荼,很多公司都希望搭上信息快车,这个是一个商机,也是一个技术的方向,因此,有空研究下.学习 ...

  8. PAT_A1151#LCA in a Binary Tree

    Source: PAT A1151 LCA in a Binary Tree (30 分) Description: The lowest common ancestor (LCA) of two n ...

  9. 教你如何检查一个函数是否为JavaScript运行时环境内建函数

    在开发过程中,对于某些API在现有的JavaScript运行时环境不支持的时候,我们大都会采用加入polyfill来解决这个问题.但有些时候我们可能需要知道现在某个API到底是否为运行时环境所原生支持 ...

  10. COOKIE, SESSION, JSESSION

    http://www.360doc.com/content/11/1027/10/7472437_159535413.shtml