最近做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百分比参照大总结的更多相关文章

  1. CSS 百分比 margin & padding

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

  2. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  3. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  4. CSS用足够大的纯色内阴影去覆盖掉谷歌input记住账号或密码时默认出现的黄色背景

    在谷歌浏览器会默认记住账号,而记住账号之后其input的背景会变成黄色,解决的办法如下: input:-webkit-autofill { -webkit-box-shadow: 0px 1000px ...

  5. [文章存档]Azure .net WebAPP的js/css文件过大导致访问慢的解决办法

    https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-qa-j ...

  6. 浏览器对DIV+CSS兼容性问题大总结

    浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...

  7. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  8. css中的宽高以及百分比参照

    百分比数参照物    父元素宽度:padding,margin,width,text-indent 父元素高度:height 自身:transform中的translate() 其他单位     vh ...

  9. css百分比问题——`top`、`left`、'translate'的百分比参照谁？

    比如 top.left.transform属性的translate方法,他们的百分比都是相较谁而言的? top.left是基于父元素的: .parent { position: relative; b ...

随机推荐

  1. [Vue安装教程]十分钟学会vue 安装

    Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...

  2. NHibernate教程(14)--使用视图

    本节内容 引入 1.持久化类 2.映射文件 3.测试 结语 引入 在数据库操作中,我们除了对表操作,还有视图.存储过程等操作,这一篇和下篇来学习这些内容.这篇我们来学习如何在NHibernate中使用 ...

  3. NHibernate教程(11)--多对多关联查询

    本节内容 多对多关系引入 多对多映射关系 多对多关联查询 1.原生SQL关联查询 2.HQL关联查询 3.Criteria API关联查询 结语 多对多关系引入 让我们再次回顾在第二篇中建立的数据模型 ...

  4. 团队作业8——Beta 阶段冲刺4th day

    团队作业8--Beta 阶段冲刺4rd day 一.当天站立式会议   二.每个人的工作 (1)昨天已完成的工作(具体在表格中) 添加了支付功能,并且对支付功能进行了测试 (2)今天计划完成的工作(具 ...

  5. 201521123008《Java程序设计》第五周实验总结

    1.本章学习总结 2.书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能.Sy ...

  6. 201521123006 《java程序设计》 第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  7. 201521123018 《Java程序设计》第11周学习总结

    1. 本章学习总结 你对于本章知识的学习总结 2. 书面作业 一.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...

  8. Markdown例

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  9. 基于socket.io的实时在线选座系统

    基于socket.io的实时在线选座系统(demo) 前言 前段时间公司做一个关于剧院的项目,遇到了这样一种情况. 在高并发多用户同时选座的情况下,假设A用户进入选座页面,正在选择座位,此时还没有提交 ...

  10. Spring - 运行时获取bean（ApplicationContextAware接口）

    默认情况下,我们的bean都是单例模式(即从容器初始化到销毁只保持一个实例).当一个bean需要引用另外一个bean,我们往往会通过bean属性的方式通过依赖注入来引用另外一个bean.那么问题就来了 ...