position和margin的绝对定位和相对定位

  电脑桌面清理干净之后,果然快了很多,桌面上的东西会占用内存,导致电脑变慢,以前我看到表姐的电脑桌面堆满了东西,我就在心里默默的鄙视不懂玩电脑的人,现在我竟然也养成了这种坏毛病。。保存东西的时候放在桌面确实很方便快捷。

  开场白是题外话,不知道标题拟得准不准确,前天工作中遇到一个问题,就是两个div共用一条线,而且中间这条线要随着左右两边的div变长或变短,这个问题让我束手无策,如下图:

  后来领导教我解决了这个问题,代码如下:

<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>

.box { width:800px; padding:20px;}
.box1 { float:left; width:200px; height:200px;border:1px solid #666; position:relative;}
.box2 { float:left; width:300px;height:300px;border:1px solid #666;margin-left:-1px;}

  注意看后面红色css的部分,position:relative;和margin-left:-1px;同时使用,这让我有点晕,以前没碰到过。后来领导发了一篇文章让我看,我觉得写得不错,转载过来学习学习。

  那篇转载的文章现在我看有些地方还是有点晕,概念有点模糊,我希望两个月之后我再回来看那篇文章,仰天长笑三声:啊哈哈!原来这么简单啊!!

时间: 2024-12-14 18:11:53

position和margin的绝对定位和相对定位的相关文章

position属性中的绝对定位和相对定位

absolute(绝对定位):1.如果没有父级DIV,则会根据浏览器原始点去定位,而且跟他相邻的DIV会忽略它,定位后则可用TRBL(top,right,bottom,left)去布局.注意:TRBL必须在设定了position后方可用.2.如果有父级DIV,那还要看父级DIV是否有position和padding设置,如果有,则此DIV会根据父DIV去定位,且有“撑开或占据高度”的作用,如果没有,则跟上面没有区别.relative(相对定位):1.如果没有父级DIV,它和absolute没有区

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

position属性absolute(绝对定位),relatve(相对定位)

position:absolute这个是绝对定位:是相对于浏览器的定位. position:relative这个是相对定位:是居于上一个流体而言 position属性absolute(绝对定位),relatve(相对定位),布布扣,bubuko.com

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素

css中的绝对定位与相对定位

1.绝对定位 元素没有设定position属性,但依旧具有position属性,其值为static 绝对定位的元素从文档流中删除,并相对于其最近的position属性为absolute.relative.fixed的祖先元素定位,若没有这样的祖先元素,则根据浏览器定位,元素原来在文档流中的控件被关闭,其层叠通过z-index属性决定,此时对象不具有边距(margin) <div class="content"> <div class="redBlock&qu

深入浅出理解绝对定位和相对定位

原文地址:http://www.360doc.com/content/10/0814/18/1001775_46037316.shtml 概要: 本文主要描述XHTML中相对定位和绝对定位各自的本质.用法.区别和两者之间的关系.以及使用CSS的Left.Right.Top.Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法. 说明: 占位空间:元素在文档流中所占据的空间. 物理空间:元素本身所占据的空间. 下面分3种情况分别对相对定位和绝对定位进行讨论: 1.

【转载】CSS之绝对定位及相对定位

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

绝对定位与相对定位

1.层级关系为: <div ----------- position:relative; 不是最近的上一级定位元素,不是参照物 <div----------没有设置为定位元素,不是参照物 <div-------- position:relative 是最近的上级相对定位元素,所以是参照物 <div box1 <div box2 --–position:absolute; top:50px; left:120px; <div box3效果图: 为改变参照物(橘色框)后的效

css绝对定位、相对定位和文档流的那些事

前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是个事,所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系. 文档流的概念 确切的说应该是文档文档流模型的机制,html的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline).不独占一行 如块级元素(block) <div>div1</div&