绝对对位 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. java_反射_及其简单应用（2016-11-16）

    话不多说直接上代码 接口: package bean; /** * user接口 */ public interface User { public String getName(); public ...

  2. Lucene索引的初步创建

    从百度上知道的,Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的 ...

  3. 24种设计模式--桥梁模式【Bridge Pattern】

    今天我要说说我自己,梦想中的我自己,我身价过亿,有两个大公司,一个是房地产公司,一个是服装制造业,这两个公司都很赚钱,天天帮我在累加财富,其实是什么公司我倒是不关心,我关心的是是不是在赚钱,赚了多少, ...

  4. Centos6.5最小化安装：配置网络和自启动服务

    参考http://www.111cn.net/sys/CentOS/56456.htm 1.开启网络连接,禁止IPV6启用 1.开启网络连接 vi  /etc/sysconfig/network-sc ...

  5. UVA 10763 Foreign Exchange

      Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   Description Your non- ...

  6. pragma指令简介

    整理日:2015年3月12日 资源来来自己网络 在编写程序的时候,我们经常要用到#pragma指令来设定编译器的状态或者是指示编译器完成一些特定的动作. 下面介绍了一下该指令的一些常用参数,希望对大家 ...

  7. [BZOJ 1502] [NOI2005] 月下柠檬树 【Simpson积分】

    题目链接: BZOJ - 1502 题目分析 这是我做的第一道 Simpson 积分的题目.Simpson 积分是一种用 (fl + 4*fmid + fr) / 6 * (r - l) 来拟合 fl ...

  8. OpenJDK与HashMap

    OpenJDK的非堆JDK增强提议(JDK Enhancement-Proposal,JEP)试图标准化一项基础设施,它从Java6开始,只能在HotSpot和OpenJDK内部使用.这种设施能够像管 ...

  9. 解除網頁無法選取文字、鎖右鍵限制：Enable Copy（Chrome 擴充套件）

    有些网页因会因为某些因素而禁止浏览者直接复制网页上的内容,虽然我们了解站方的意思,不过有些时候会造成一些不必要的困扰. Enable Copy 这款Chrome 扩充套件可以帮你一键解除封锁右键和选取 ...

  10. Sqoop安装与使用(sqoop-1.4.5 on hadoop 1.0.4)

    1.什么是Sqoop Sqoop即 SQL to Hadoop ,是一款方便的在传统型数据库与Hadoop之间进行数据迁移的工具,充分利用MapReduce并行特点以批处理的方式加快数据传输,发展至今 ...