<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. 5.20rieds切换数据库

  2. Beta冲刺-星期四

    这个作业属于哪个课程  <课程的链接>            这个作业要求在哪里 <作业要求的链接> 团队名称 Three cobblers 这个作业的目标 完成今天的冲刺 一 ...

  3. HTML5标签构成

    一个HTML5文件是由一些列的元素和标签组成的.元素是HTML5文件的重要组成部分,例如title(文件标题).img(图像)及table(表格)等.元素名不区分大小写,而HTML5用标签来规定元素的 ...

  4. mySQL用代码添加表格内容 删除数据方法

    通过代码对表格内容操作: 1.添加数据insert into Info values('p009','张三',1,'n001','2016-8-30 12:9:8') ; 给特定的列添加数据inser ...

  5. hibernate_09_关联映射_多对一

    多对一关联关系和上一篇讲的一对多关联关系的不同点主要体现在映射文件上. Student类: package com.imooc.entity; import java.io.Serializable; ...

  6. Yearning + Inception SQL审核平台搭建

    Yearning 安装: 安装Nginxyum install nginx -y 按照顺序安装MySQLmysql-community-common-5.7.22-1.el6.x86_64.rpmmy ...

  7. C#屏蔽Alt+F4,解决Alt+F4关闭窗体时对话框NO后,线程不退出问题

    //1.将窗体的属性KeyPrieview设置为true //keypreview属性为true的时候,就可以响应键盘事件v //2.在窗体KeyDown事件中加如下代码 private void F ...

  8. dubbo之事件通知

    事件通知 在调用之前.调用之后.出现异常时,会触发 oninvoke.onreturn.onthrow 三个事件,可以配置当事件发生时,通知哪个类的哪个方法 1. 服务提供者与消费者共享服务接口 in ...

  9. [Advanced Algorithm] - Inventory Update

    题目 依照一个存着新进货物的二维数组,更新存着现有库存(在 arr1 中)的二维数组. 如果货物已存在则更新数量 . 如果没有对应货物则把其加入到数组中,更新最新的数量. 返回当前的库存数组,且按货物 ...

  10. 前端面试题总结 -vue

    1.active-class是哪个组件的属性? vue-router模块的router-link组件. 2.嵌套路由怎么定义? 在 VueRouter 的参数中使用 children 配置,这样就可以 ...