<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. [转]line-height1.5和line-height:150%的区别

    line-height1.5和line-height:150%的区别   一.区别 区别体现在子元素继承时,如下: 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font ...

  2. Activity生命周期(待整理)

    1. 定义 有一些方法共同定义生命周期,如下图示:(图片来自于官网文档) 2. onStart()——在Activity即将对用户可见之前调用 (1)Activity启动动画.二维动画在onStart ...

  3. PL/SQL之基础篇

    参考文献:<Oracle完全学习手册>第11章 1.PL/SQL概述 PL/SQL(Procedure Language/Structuer Query Language)是Oracle对 ...

  4. AI:模式识别的数学表示(集合—函数观点)

    前言: 模式识别的定义,参考:模式识别两种方法:知识和数据 .百科定义:模式识别(英语:Pattern Recognition),就是通过计算机用数学技术方法来研究模式的自动处理和判读.我们把环境与客 ...

  5. python 生成测试报告并发送邮件

    前言: 使用unittest编写自动化测试脚本,执行脚本后可以很方便看到测试用例的执行情况. 但如果想向领导汇报工作,就需要提供更直观的测试报告. 思路: 使用unittest编写测试用例,HTMLT ...

  6. 连接(JOIN)运算

    内连接--INNER JOIN 此处用商品表(product)和商店商品表(ShopProduct)测试,外键:product_id select sp.shop_id, sp.shop_name, ...

  7. 团体程序设计天梯赛-练习集-L1-040. 最佳情侣身高差

    L1-040. 最佳情侣身高差 专家通过多组情侣研究数据发现,最佳的情侣身高差遵循着一个公式:(女方的身高)×1.09=(男方的身高).如果符合,你俩的身高差不管是牵手.拥抱.接吻,都是最和谐的差度. ...

  8. 【剑指Offer】25、复杂链表的复制

      题目描述:   输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节 ...

  9. css实现多行文字限制显示&编译失效解决方案

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

  10. 洛谷 P1068 分数线划定【排序+模拟】

    世博会志愿者的选拔工作正在 A 市如火如荼的进行.为了选拔最合适的人才,AA市对 所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试.面试分数线根 据计划录取人数的150\%150%划 ...