<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. 可变长度参数列表(Stering...aaa)

  2. [转]Java web 开发 获取用户ip

    如果通过了多级反向代理的话,X-Forwarded-For的值并不止一个,而是一串IP值,那么真正的用户端的真实IP则是取X-Forwarded-For中第一个非unknown的有效IP字符串. pu ...

  3. css中background-clip属性的作用

    background-clip属性的通俗作用就是指定元素背景所在的区域,有四种取值 1.border-box border-box是默认值,表示元素的背景从border区域(包括border)以内开始 ...

  4. android黑科技系列——Android中新型安全防护策略

    一.前言 最近有一个同学,发给我一个设备流量访问检测工具,但是奇怪的是,他从GP上下载下来之后安装就没有数据了,而在GP上直接安装就可以.二次打包也会有问题.所以这里就可以判断这个app应该是有签名校 ...

  5. Leetcode0002--Add Two Numbers 链表求和

    [转载请注明]http://www.cnblogs.com/igoslly/p/8672467.html 来看一下题目: You are given two non-empty linked list ...

  6. 【Oracle】append

    我们在生产环境中经常遇到需要往表中插入大量数据的情况,怎么样才能让插入数据的速度变快呢?Oracle中的append简直就是神器!!没图说个**,直接上图: 是不是看晕了?哈哈,莫慌,请看下面总结: ...

  7. NLP:单词嵌入Word Embeddings

    深度学习.自然语言处理和表征方法 原文链接:http://blog.jobbole.com/77709/ 一个感知器网络(perceptron network).感知器 (perceptron)是非常 ...

  8. 3D模型在UI上显示的方法(Unity)

    方法:使用RawImage通过Render Texter将摄像机下的物体渲染纹理记录并显示在RawImage上面 具体实现:新建一个模型(Cube),新建一个摄像机,将Clear Flags设置为So ...

  9. case when用法小结

    case 对比字段 when 值 then 输出结果 when 值 then 输出结果 ....else 输出结果 end 对比字段可以不在case后面确定 可以把条件直接写在when后面,如果对比字 ...

  10. 混合元素app的H5元素定位

    问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...