----从牛人部落中自己的相关文章转载----
前端css定位中经常遇到的一个问题是,百分比定位是针对谁的?
一. margin、padding的比例
首先从css的设计意图说起,在浏览器中默认的writing-mode: horizontal-tb; 和direction: ltr; 的情况下,CSS的基本需求是排版,但通常我们看到的水平文字,其水平宽度是一定的(请仔细回忆。 如果未明确定义宽度或强制显示在一行中,则会遇到边界换行而不是水平换行),则可以在垂直方向无限扩展。 所以:
1.margin :自动; 不能垂直于纵向居中对齐,其实也是上述原因。 因为纵向无限扩展,所以没有固定的值可用于计算。
2 .如果使用边距(包括边距顶、边距底、边距左和边距右)百分比,则相对于父元素的宽度放置。
3 .填充(包括填充顶、填充左、填充底、填充右) :使用率也相对于父元素的宽度定位。
具体请参考这篇文章:
33558 www.I turing.com.cn/article/64581
二、总结如下。
相对于父元素的宽度() (如果自身已经是最外层元素,则相对于视口) )。
[max/min-]width、left、right、padding (包括padding-top、padding-bottom )、margin-top、margin-bobot
相对于父元素的高度((如果自己已经是最外层元素,则相对于视口) ) ) ) ) ) )。
[max/min-]height、top、bottom等;
在此,关于height定位的一个冷漠的知识是,如果包容的核桃仁元素的亲元素没有决定高度,就不能有效地使用height=XX%的样式。 此时,它基于视口,除非此元素已经是最外层的元素。
有关详细信息,请访问http://www.cn blogs.com/vajoy/p/3730014.html
相对于继承大小:
字体大小等;
相对于自身尺寸:
线路-高度等;
相对于自己的宽度高:
border-radius、background-size、transform: translate (、transform-origin、zoom、clip-path等;
特殊算法的:
背景位置(方向长度/除该方向背景图以外的部分的全长* 100 ),
filter系列函数等;
如果您自己设置position: absolute,最接近它的position将相对于视口,而不是静态的祖先元素。
对于position :固定,“父元素”指向视口。
深刻理解CSS定位中的偏移
目录(1)对齐)2)块)3)偏移属性)4)绝对对齐)5)格式)6) auto前面的CSS有三种基本对齐机制:的常规流程。 浮动和绝对对齐。 通过利用对位,可以对要素框的正常位置进行正确的定义.
【转】深刻理解CSS对准中的偏差
在前一个故事里,CSS有三种基本的定位机制:普通流。 浮动和绝对定位。 利用定位,可以准确定义元素框应该相对于其正常位置出现的位置,或者相对于父元素的位置。 另一个元素也是浏览器窗口本身的位置。 但是,要素如何定位,还要决定.
css布局中的百分比布局
1 .在说百分比之前,首先基本单位英寸(英寸) :英寸1英寸1英寸=2.54厘米(厘米) :厘米(磅) point ) :pt 1pt=1/7 .
CSS定位中的OpenCurlyDoubleQuote; 父子俩断绝了”
一、定位介绍定位有三种:相对定位(定位: relative )、绝对定位(定位: absolute )、固定定位(定位: fixed )2. 3种定位用法.
CSS配准中的盒模型、定点、z索引学习体会
在开始整体之前需要说明两个概念: 第一,一切都是框架。 这意味着,在HTML中,无论是块级别还是内联,都可以将其视为块。 唯一的区别是块单独占一行。 第二个文档流:的网页是.
了解CSS定位中的堆栈z索引
目录(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. ...