----转载自自己在牛人部落中的相关文章---

在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？

一、margin，padding的百分比

首先从css的设计意图说起，在浏览器默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式的定义宽度或者强制一行显示，都会遇到边界换行，而不是水平延展)，垂直方向可以无限延展。这也是为什么：

1. margin: auto; 无法在纵向上垂直居中，其实原因也是上面所说的，因为纵向是可以无限延展的，所以没有一个一定的值可以被参照被用来计算。

2.margin(包括margin-top,margin-bottom,margin-left,margin-right)：使用百分比时都是相对于父元素的宽度定位；

3.padding(包括padding-top,padding-left,padding-bottom,padding-right):使用百分比时也都是相对于父元素的宽度定位。

具体可参考这篇文章：

http://www.ituring.com.cn/article/64581

二、归纳如下：

相对于父元素宽度的，(如果自身已经是最外层元素，则相对于视口)

[max/min-]width、left、right、padding(包括padding-top,padding-bottom)、margin(包括margin-top,margin-bottom) 等；

相对于父元素高度的：(如果自身已经是最外层元素，则相对于视口)

[max/min-]height、top、bottom 等；

其中，关于height百分比定位的一个冷知识是：若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式。除非该元素已经是最外层元素，此时是相对于视口。

详情可参见：http://www.cnblogs.com/vajoy/p/3730014.html

相对于继承字号的：

font-size 等；

相对于自身字号的：

line-height 等；

相对于自身宽高的：

border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；

特殊算法的：

background-position(方向长度 / 该方向除背景图之外部分总长度 * 100)、

filter 系列函数等；

如果自身设置 position: absolute，相对于离它最近的那个 position 不为 static 的祖先元素，如果没有这样的元素，则相对于视口。

如果 position: fixed，“父元素”指视口。

深入理解CSS定位中的偏移

× 目录 [1]定位 [2]包含块 [3]偏移属性[4]绝对定位[5]格式化 [6]auto 前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位 ...

【转】深入理解CSS定位中的偏移

前面的话 CSS有三种基本的定位机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定 ...

css布局中的百分比布局

1.在说到百分比是前,先简单了解下基本的单位 英寸(inch) :in 1 in=2.54cm厘米(centimeter):cm毫米(millimeter):mm磅(point):pt 1pt=1/7 ...

CSS定位中“父相子绝”

一.定位的介绍 定位有三种:相对定位(position:relative).绝对定位(position:absolute).固定定位(position:fixed) 二.三种定位的用法,特点和实例 2 ...

有关CSS 定位中的盒装模型、position、z-index的学习心得

开始整体之前我需要说明两个概念: 第一个就是   一切皆为框  也就是说在HTML中的不管是是块级的还是内联的,都可以认为成块的,唯一的区别就是块的会独自占据一行 第二个文档流:  一个网页可以看作是 ...

深入理解CSS定位中的堆叠z-index

× 目录 [1]定义 [2]堆叠规则 [3]堆叠上下文[4]兼容 前面的话 对于所有定位,最后都不免遇到两个元素试图放在同一位置上的情况.显然,其中一个必须盖住另一个.但,如何控制哪个元素放在上层,这 ...

selenium - css 定位

前言: CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的表现. CSS 使用选择器来为页面元素绑定属性.这些选择器可以被 selenium ...

Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析

加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

CSS中属性百分比的基准点

1.属性百分比的基准点 1.1.基于包含块 以下的关于包含块(含块)的概念,不能简单地理解成是父元素. 如果是静态定位和相对定位,包含块一般就是其父元素.但是对于绝对定位的元素,包含块应该是离它最近的 ...

随机推荐

android camera 自定义开发

1.检测是否有摄像头 /** Check if this device has a camera */ private boolean checkCameraHardware(Context cont ...

Oozie和Azkaban的技术选型和对比

1 两种调度工具功能对比图 下面的表格对上述2种hadoop工作流调度器的关键特性进行了比较,尽管这些工作流调度器能够解决的需求场景基本一致,但在设计理念,目标用户,应用场景等方面还是存在区别 特性 ...

C# Http请求(GET/HTTP/HTTPS)

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

用Thread类创建线程-2

支持原创,本系列文章均转自:http://www.blogjava.net/nokiaguy/category/38172.html 在Java中创建线程有两种方法:使用Thread类和使用Runna ...

sql server 2005中IMAGE类型的BUG问题

目的:在sql server 2005数据库上筛选出那些有照片的员工 由于客户之前的数据库是sql server 2000,定义的photo字段的数据类型为image, 在sql 2005数据库上,用 ...

myeclipse笔记(3)：导入的项目切换jdk版本

有时候,从外面导入的javaweb项目会访问不了,这个时候改变jdk版本就是其中解决的方法之一. 右键点击项目 --> bulid path --> configure​ ​​​ 选择需要 ...

MocorDroid编译工程快速建立编译环境

function sprdLunch(){    declare -a arrProj    arrProj=`find out/target/product -name previous_build ...

numpy 基础操作

Numpy 基础操作¶ 以numpy的基本数据例子来学习numpy基本数据处理方法 主要内容有: 创建数组 数组维度转换 数据选区和切片 数组数据计算 随机数 数据合并 数据统计计算 In [1]: ...

Confluence 6 使用 JConsole 监控本地 Confluence

如果你遇到了一些特定的问题,或者你仅仅是希望在一个很短的时间内监控你 Confluence 的运行,你可以使用本地监控.本地监控将会对你的服务器性能产生影响,所以我们并不推荐你使用本地监控来长时间的监 ...

centos7执行umount提示：device is busy或者target is busy解决方法

问题描述: 因为挂载错了,想取消挂载,但是umount报告如下错误: [root@zabbix /]# umount /dev/sdc1 umount: /data1: target is busy. ...