margin 百分比是按參照物来计算滴 不知道吧?
<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 百分比是按參照物来计算滴 不知道吧?的更多相关文章
- margin百分比,重叠和auto
一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed) ...
- H5移动前端完美布局之-margin百分比的使用
一 ,背景 在移动端页面开发我们经常会遇到一件尴尬的事 我们所开发出来的页面跟设计师所给的页面差别很大 再加上移动设备屏幕的大小不一出来的效果更是参差不齐 然后.... 当然 现实情况没有这么糟糕.. ...
- margin百分比的相对值--宽度!
假设一个块级包含容器,宽1000px,高600px,块级子元素定义 margin:10% 5%; 那么 margin的 top, right, bottom, left 计算值最终是多少px? 不是1 ...
- css的margin
1.适合于没有设定width/height的普通block水平元素 2.只适用于水平方向尺寸 例子:一侧定宽的自适应布局 <html> <head> <meta name ...
- margin系列之百分比
本系列摘自 px; height: 600px; } #demo p{ margin: 10% 5%; } HTML: <div id="demo"> <p&g ...
- 当padding/margin的取值形式为百分比时。。。。。
一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/ ...
- CSS margin详解
以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...
- 理解margin
margin可以改变容器的尺寸 //元素尺寸分为可视尺寸,占据尺寸 margin与可视尺寸 1.适用于没有设定width/height的普通block水平元素 2.只适用于水平方向的尺寸 应用:一侧定 ...
- CSS深入理解之margin
前言 改变容器尺寸 margin改变容器尺寸有以下两个限制条件: 使用于没有设置宽高的普通block元素float/absolute/fixed元素 以及 inlines水平 table- ...
随机推荐
- Spring Boot (5) Spring Boot配置详解
application.properties application.properties是spring boot默认的配置文件,spring boot默认会在以下两个路径搜索并加载这个文件 src\ ...
- Laravel5.1学习笔记7 视图
视图 (View) 基本用法 传递数据到视图 在多个视图中分享数据 视图组件 #基本用法 视图里面包含了你应用程序所提供的 HTML 代码,并且提供一个简单的方式来分离控制器和网页呈现上的逻辑.视 ...
- background使用
background-position 有两个参数,定义背景图片起始位置可选值有: center top left right bottom px % background-size 可以用 px % ...
- akka框架——异步非阻塞高并发处理框架
akka actor, akka cluster akka是一系列框架,包括akka-actor, akka-remote, akka-cluster, akka-stream等,分别具有高并发处理模 ...
- <aop:aspectj-autoproxy />
通过配置织入@Aspectj切面 虽然可以通过编程的方式织入切面,但是一般情况下,我们还是使用spring的配置自动完成创建代理织入切面的工作. 通过aop命名空间的<aop:aspectj-a ...
- C# 判断字符串是否左包含
//测试字符串 左包含 //string str = "AAABBBCCC"; //char[] ss = str.ToArray(); //0-8 字符数组 //char[] s ...
- XML-20100: (Fatal Error) Expected ';'. xml转word 导出时异常
因为数据中包含特殊字符.需要进行转译. < < 小于号 > > 大于号 & & 和 ' ’ 单引号 " " 双引号 XML ...
- BZOJ 1060: [ZJOI2007]时态同步 树上问题 + 贪心
Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数 字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路 ...
- Emoji表情处理工具类
import java.util.regex.Matcher; import java.util.regex.Pattern; public class EmojiToString { /** * 将 ...
- ListUtil集合操作常用方法类
* 集合操作常用方法类. * <p> * * @author 柯 */ public class ListUtil { /** * 判断List不为空,非空返回true,空则返回false ...