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- ...
随机推荐
- xml之基本操作
XML:Extensible Markup Language(可扩展标记语言)的缩写,是用来定义其它语言的一种元语言,其前身是SGML(Standard Generalized Markup Lang ...
- JavaScript中比较运算符的使用
比较运算符的基本操作过程是:首先对操作数进行比较,这个操作数可以是数字也可以是字符串,然后返回一个布尔值true或false. 在JavaScript中常用的比较运算符如下表所示. 例如,某商场店庆搞 ...
- 1、Visual Studio Code安装及Hello Word
一.环境初始化 1.下载 Visual Studio Code对应版本安装 2.下载.NET Core 2.0 SDK安装 3.安装Mono Debug 完成后界面如下: 二.创建控制 ...
- ThreadPoolExecutor理解
ThreadPoolExecutor组成 ThreadPoolExecutor的核心构造函数: public ThreadPoolExecutor(int corePoolSize, int maxi ...
- 新书《计算机图形学基础(OpenGL版)》PPT已发布
为方便有些老师提前备课,1-10章所有章节已发布到本博客中. 欢迎大家下载使用,也欢迎大家给我们的新书反馈与意见,谢谢!
- Java中面向对象三大特性之——继承
继承的概述 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那一个类即可. 现实生活中继承:子承父业,用来描述事物之间的关系 代码中继承:就是用 ...
- style 使用lang = ‘scss’ 报错
<style lang="scss" rel="stylesheet/scss" scoped> .export-wrapper{ } </s ...
- hadoop 安装问题总结
安装启动步骤 [英语好的,直接手把手跟着来] http://hadoop.apache.org/docs/current/hadoop-project-dist/hadoop-common/Sing ...
- 【Android】进程间通信IPC——AIDL
AIDL官网定义AIDL(Android 接口定义语言)与您可能使用过的其他 IDL 类似. 您可以利用它定义客户端与服务使用进程间通信 (IPC) 进行相互通信时都认可的编程接口. 在 Androi ...
- ecshop中{$lang.}标签的修改
{$lang.}之类的文字都是在语言包里边定义的,所以要修改这些文字的话,我们只需要修改语言包里的文件.首先需要看一下你使用的语言是哪种,如果是中文的话,修改 languages/zh_cn/com ...