css百分比参照大总结
最近做PC端项目，由于要自适应到800*600，所以免不了要使用百分比的布局方式，但是一开始有点搞不清楚百分比的参照，于是页面的布局怎么调也调不好。
事后我进行了一下总结，希望能够帮到大家：
参照父元素宽度的元素：padding margin width text-indent
参照父元素高度的元素：height
参照父元素属性:font-size line-height
特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度
下面给一个demo：
先上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
margin-bottom: 10%;
width: 100px;
height: 100px;
padding: 20px;
border: 4px solid blue;
background: red;
}
.box>.relative-ele{
z-index: 1;
position: relative;
top: 100%;
left: 100%;
width: 10%;
height: 10%;
padding: 10%;
border: 4px solid yellow;
background: blue;
}
.box>.absolute-ele{
z-index: 1;
position: absolute;
top: 100%;
left: 100%;
width: 10%;
height: 10%;
padding: 10%;
border: 4px solid yellow;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="relative-ele"></div>
</div>
<div class="box">
<div class="absolute-ele"></div>
</div>
</body>
</html>
父盒子盒模型与相对定位的子盒子的盒模型：
可以看出来相对定位的盒子的百分比定位的top和left值是参照父元素内容的宽度和高度，而不包括padding
父盒子盒模型与绝对定位的子盒子的盒模型：
可以看出来绝对定位后，盒子大小都发生了改变，也就是说子盒子绝对定位之后top和left值会参照最近的定位盒子的padding-box来进行计算，所有大小的计算都要包括父盒子的padding值
附带一点：就是ie7相对定位的参照点不太一样，它参照的是父元素内容的左上角，不包含padding
css百分比参照大总结的更多相关文章
- CSS 百分比 margin & padding
前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- CSS用足够大的纯色内阴影去覆盖掉谷歌input记住账号或密码时默认出现的黄色背景
在谷歌浏览器会默认记住账号,而记住账号之后其input的背景会变成黄色,解决的办法如下: input:-webkit-autofill { -webkit-box-shadow: 0px 1000px ...
- [文章存档]Azure .net WebAPP的js/css文件过大导致访问慢的解决办法
https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-qa-j ...
- 浏览器对DIV+CSS兼容性问题大总结
浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- css中的宽高以及百分比参照
百分比数参照物 父元素宽度:padding,margin,width,text-indent 父元素高度:height 自身:transform中的translate() 其他单位 vh ...
- css百分比问题——`top`、`left`、'translate'的百分比参照谁？
比如 top.left.transform属性的translate方法,他们的百分比都是相较谁而言的? top.left是基于父元素的: .parent { position: relative; b ...
随机推荐
- windows系统，优化C盘空间的方法
C盘在使用过程中,内容会越来越多,剩余空间越来越小.如何清理出更多空间呢?以windows7为例 转载请保留 http://www.cnblogs.com/lion-zheng/ cleanmgr w ...
- ！Web云笔记--HTML基础
Web自学笔记第一阶段笔记综合汇总 参考资料:<Head First HTML&CSS>(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出版社 全部阶段: ...
- 201521123020《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 运用到了equ ...
- 201521123076 《JAVA程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容 初步了解了接口的概念,学会使用接口,强化面向对象思想 Comparable,Com ...
- 201521123051 《Java程序设计》 第二周学习总结
1. 本周学习总结 1.学会使用码云:学会如何将项目同步到码云中以及从码云上的项目保存到本地. 2.各数据类型的使用. 3.运算符和表达式的使用. 4.string创建之后不可在修改. 5.Java程 ...
- 201521123012 《Java程序设计》第二周学习总结
1. 本章学习总结 1.Java中String和StringBuilder的区别. 2.Arrays()的用法. 2.课后作业 1.使用Eclipse关联jdk源代码(截图),并查看String对象的 ...
- ArrayList和LinkedList区别及性能测试
ArrayList和LinkedList是Java Lis接口的2个实现.它们的区别如下表所示: 底层结构 强项 弱项 ArrayList 数组 随机访问get和set 插入删除 LinkedList ...
- 201521123073 《Java程序设计》第11周学习总结
1. 本周学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...
- 201521123114 《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 1.数据库的定义:是为了实现一定目的按某种规则组织起来的"数据"的"集合" ...
- 201521123040《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...