绝对对位 position：absolute;
当一个元素设定了绝对对位，
如果他的父元素有设置定位（不管是绝对还是相对定位），那么他的坐标就是相当于父元素的左上角 进行定位（即 left:1px;top:2px;等都是相对于父元素的偏移）
如果他的父元素没有设置定位，那么他就向上找他的爷爷辈来进行偏移..

相对对位： position：relative;
当一个元素设定了相对对位，
他的坐标就是相当他原来的位置 进行的定位（即 left:1px;top:2px;等都是相对于他原来的位置的左上角的偏移）

HTML --- 盒模型的更多相关文章

  1. css_02之盒模型、渐变

    1.框模型:盒模型,①对象实际宽度=左右外边距+左右边框+左右内边距 + width:②对象实际高度=上下外边距+上下边框+上下内边距 + height: 2.外边距:margin:取值:①top(上 ...

  2. css3盒模型

    css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...

  3. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  4. css之盒模型

    盒模型由内容(content).填充(padding).边框(border).边界(margin)组成,一个盒子中主要的属性就5个:width.height.padding.border.margin ...

  5. 精通css 高级web标准解决方案——可视化格式模型-盒模型

    1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之 ...

  6. （转）详解css3弹性盒模型（Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  7. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  8. CSS3盒模型display:box;box-flex:3;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. 了解HTML 盒模型

    HTML在布局上, 有一个非常重要的模型, 那就是盒子模型, 在盒子模型中把标签内容理解为一个物品, 而css样式理解为包容着这个物品的盒子, 一般的块级标签都具有盒子模型的特征, 你可以在css中对 ...

  10. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

随机推荐

  1. 简单的背包问题（入门）HDU2602 HDU2546 HDU1864

    动态规划,我一直都不熟悉,因为体量不够,所以今天开始努力地学习学习. 当然背包从01开始,先选择了一个简单的经典的背包HDU2602. Many years ago , in Teddy's home ...

  2. C#winfrom中应用程序只启动一次代码

    static class Program    {        private const int WS_SHOWNORMAL = 1;        [DllImport("User32 ...

  3. DevExpress 控件使用之XtraReport

    DevExpress 系列控件,相信大家做WinForm开发已经再熟悉不过了.报表工具对大家来说,选择面很广,.net 本身也提供了非常好的设计工具.下面主要介绍通过DevExpress XtraRe ...

  4. Winbind authentication against active directory

    Winbind authentication against active directory Description This tip will describe how to configure ...

  5. C语言学习总结(三) 复杂类型

    第五章.复杂数据类型 (数组.字符串.指针.结构体.枚举.共同体) 1.什么是数组? 概念:把具有相同类型的若干变量按有序的形式组织起来,这些按序排列的同类数据元素的集合称为数组: 按数组元素的类型不 ...

  6. require.js 入门学习－备

    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...

  7. Map迭代器

            今天用到了,发现不会,随手谷歌之,整理如下. //Map是接口,刚才在那new Map,汗颜 Map<Character,Integer> mm = new HashMap ...

  8. Early 80386 CPUs

    Assembling a detailed and accurate history of the 80386, including a complete listing of all the &qu ...

  9. nodejs and socket.io and iisnode

    http://www.amazedsaint.com/2011/09/creating-10-minute-todo-listing-app-on.html http://www.cnblogs.co ...

  10. NOR FLASH与NAND FLASH

    整理自NOR FLASH 与NAND FLASH 1:NandFlash与NorFlash典型电路图 Nor Flash接原理图 从上图可以看出,该NorFlash采用并行地址和数据总线, 其中,21 ...