认识CSS中absolute与relative

认识CSS中absolute与relative的相关文章

• 
  解读Absolute与Relative

  标签：Web开发

  很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。 Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的...[ 查看全文 ]

  阳光的黑脸哥

  31
• 
  运用 CSS 的 absolute 与 relative 制作的提示

  标签：Web开发

  实现 ToolTips 的方法有很多，大多数用 JS，下面是用纯 CSS 制作的，定位上运用了 absolute 与 relative。 详细代码： pText/p pa class="tooltips" href="#" LinkspanToolTips/span/a/p pText/p style type="text/css" .tooltips{ position:relative; z-index:1; text-decoration:none; } .tooltips:hover{ z-index:2; background:none; /* 没有这个在 IE 中不可用 */ } .tooltips span{ display:...[ 查看全文 ]

  sunny阿遒

  51
• 
  Absolute与Relative的运用

  标签：Web开发

  Div + CSS 进行网页布局，适当地运用 absolute 与 relative，能给布局带来意想不到的效果和方便，达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。 详细讲解两者的关系，需要配合例子，请先看例子： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta h...[ 查看全文 ]

  一个人旅行51

  31
• 
  Position:Relative/Absolute无法冲破的等级

  标签：Web开发

  前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题： ulli第一块/lilispan第二块/span/lili第三块/lili第四块/lili第五块/li/ul 如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。 *{margin:0; padding:0; list-style:none;}li {width:100px; height:100px; margin:0 5px 0 0; ...[ 查看全文 ]

  qrixchrg663902

  91
• 
  CSS中display与visibility的区别

  标签：Html CSS布局 Div+CSS XHTML

  起因： 前几天在做一个图片无间隙滚动的效果，要利用到一个隐藏的层。 问题： 之间复制以前文字滚动的效果代码（文字滚动时无错误），结果发现页面被拉长了一倍，也就是隐藏的层。 解决： 查CSS手册后发现了隐藏内容原来是有区别的，一种是保留对象的物理空间，一种是不保留。 ------------------------------- display:none CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保...[ 查看全文 ]

  weizhi1985

  461
• 
  CSS中 display 与 visibility 的区别

  标签：Web开发

  起因： 前几天在做一个图片无间隙滚动的效果，要利用到一个隐藏的层。 问题： 之间复制以前文字滚动的效果代码（文字滚动时无错误），结果发现页面被拉长了一倍，也就是隐藏的层。 解决： 查CSS手册后发现了隐藏内容原来是有区别的，一种是保留对象的物理空间，一种是不保留。 ------------------------------- display:none CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保...[ 查看全文 ]

  01扬帆远航

  31
• 
  css中block元素与inline元素详解

  标签：Web开发

  块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签’P”。“form”这个块元素比较非凡，它只能用来容纳其他块元素。 假如没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table...[ 查看全文 ]

  马克西姆1010

  21
• 
  HTML与CSS在Flash中的应用

  标签：Web开发

  HTML与CSS在Flash中的应用: 不小心看到同事Den在弄个小东西：在Flash里使用HTML和CSS，代码是这样：  Example Source Code var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); myStyle.load("sample.css"); content_txt.styleSheet = myStyle; content_txt.multiline= true; content_txt.wordWrap = true; content_txt.html = true; var story:XML = new XML(); story.ignoreW...[ 查看全文 ]

  Waidaxi

  111
• 
  CSS Div网页布局中的结构与表现

  标签：Web开发

  在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西，而且Web在浏览器中除内容外都应该由CSS表现，这包括布局与其它样式。一旦一个标准的XHTML代码写完之后，那么CSS可以实现其实百变面孔。其实XHTML是一个演员，CSS是编剧，XHTML演什么角色，都由CSS来决定的。 这听起来似乎有点理想主义，实现起来似乎就没有那么容易了。不过我还是想通过一个简单的...[ 查看全文 ]

  小孩不懂了

  71
• 
  外部引用CSS中 link与@import的区别

  标签：Web开发

  这两天刚写完XHTML加载CSS的几种方式，其中外部引用CSS分为两种方式link和@import。 本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。 差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 差别2：加载顺序的差别。当一个...[ 查看全文 ]

  我就是小太阳1

  31
• 
  CSS网页中的相对定位与绝对定位

  标签：Web开发

  在CSS中有这样的一个指令：(position)，在DreamWeaver中文版中翻译为“定位”，常用的属性有两个：relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚，这里做一些细致的讲解。 position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填...[ 查看全文 ]

  z291892042

  41
• 
  CSS技巧：我们一起认识CSS闭合浮动元素

  标签：Web开发

  按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的...[ 查看全文 ]

  gengliting3

  41
• 
  CSS教程:css组合与CSS嵌套的写法

  标签：Web开发

  CSS组合 你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。 比如，你有如下的代码： h2 { color: red; } .22333 { color: red; } .22333com { color: red; } 则你可以这样写： h2,.22333,.22333com { color: red; } 使用组合，你可以一次定义多个CSS，为你节省很多字节和时间。 CSS嵌套 CSS结构好的话，没有必要使用过多的类或者标识选择符。这是...[ 查看全文 ]

  乔林儿

  51
• 
  CSS应用基础教程(1) 基本认识

  标签：Web开发

  关 於 Ｃ Ｓ Ｓ 的 概 论 ＣＳＳ是『Cascading Style Sheets』的简称，中文翻为「串接样式表」，也有人只翻为「样式表」。ＣＳＳ用以作为网页的排版与风格设计，在所谓的「新式网页」里 ，ＣＳＳ不容置疑是相当重要的一环。ＣＳＳ是以既有的基础，用以弥补既存ＨＴＭＬ 规格里的不足，也让网页的设计更为灵活。 这份教学文件就要来为您介绍ＣＳＳ的应用罗！在这边并不介绍ＣＳＳ的所有...[ 查看全文 ]

  橙子爱程子

  31
• 
  学习CSS组合与CSS嵌套的写法

  标签：Web开发

        使用嵌套，可以让你的CSS代码读起来更清晰，能给你制定的元素定制CSS。       你不必重复有相同属性的多个选择符，你只要用英文逗号（,）隔开选择符就可以了。   比如，你有如下的代码： h2 { color: red; } .abc { color: red; } .abccom { color: red; } 则你可以这样写： h2,.abc,.abccom { color: red; } 使用组合，你...[ 查看全文 ]

  我是江采儿

  11
• 
  认识生产征兆与过程

  标签：孕妇 孕前

  了解医护程序帮助安心待产 准妈妈被推进产房待产之后，将度过一段漫长的等待时间。除了准妈妈本身以及陪产的丈夫要做有“长期抗战”的准备之外，了解待产时医疗上的所需程序，也能帮助准妈妈清楚地知道每个步骤的作用，并能确实配合医护人员进行分娩。 静脉注射 静脉注射的位置通常是手背或者手腕处，经由静脉注入点滴，进入母体的血液循环。 施打程序 通常由医护人员执行静脉注射。如果准妈妈平常...[ 查看全文 ]

  奇葩TMD朵朵开

  271
• 
  深入认识JavaScript中的函数

  标签：Web开发

  概述 函数是进行模块化程序设计的基础，编写复杂的Ajax应用程序，必须对函数有更深入的了解。JavaScript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法： function func1(…){…} var func2=function(…){…}; var func3=function ...[ 查看全文 ]

  鹏程万里露

  31
• 
  认识CorelDRAW中的颜色模式

  标签：Illustrator CorelDRAW

  在进行任何颜色的填充操作之前，首先应对最基础的理论知识有所了解。绘图软件使用的颜色与我们通常意义上使用的颜色存在很大的差异，使用它们调配颜色不需要加水(油)、不需要画笔均匀的搅拌、不需要用户有很熟练的目测颜色能力、不受温度与湿度的影响、颜色范围更为广阔，可随时使用并进行复制。以上这些是计算机颜色与传统颜色的不同之处。那么在绘图软件中用户怎么来调配需要的颜色，也就是如何精确定义每...[ 查看全文 ]

  朐山路

  31
• 
  div css与xhtml css是什么意思?

  标签：Web开发

  不知道从什么时候开始，在网络上到处可以看到div css，到底什么是div css呢？难道就是传说中的标准重构吗？标准从最简单的根源来说不是合理使用xhtml的标签吗？可为什么还是有这么多div css呢？既然可以div css，那为什么不可以叫span css ul css li css等等呢？ 疑问，满脑子的疑问!为了这个疑问，我把自己脑子里的东西从最底层翻了一遍。 在几年前大家都是用table来布局，一层套一层，没发现什么不妥，一直...[ 查看全文 ]

  dacldeya101411

  81
• 
  关于CSS组合与CSS嵌套的写法应用

  标签：Web开发

  比如，你有如下的代码： h2 { color: red; } .abc { color: red; } .abccom { color: red; } 则你可以这样写： h2,.abc,.abccom { color: red; } 使用组合，你可以一次定义多个CSS，为你节省很多字节和时间。 CSS嵌套 CSS结构好的话，没有必要使用过多的类或者标识选择符。这是因为你可以指定在选择符内的选择符。（或者更好的说法，上下文选择符--译者著...[ 查看全文 ]

  意念健身术

  91