`
explore
  • 浏览: 80961 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

css 文档流 父级对象 同级对象

    博客分类:
  • J2EE
阅读更多

转自:

http://apps.hi.baidu.com/share/detail/5763924

http://www.360doc.com/content/10/0319/17/315430_19419865.shtml

 

1. 文档流

关于“文档流”有位网友这样解释:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。我能理解这位网友的意思,其实他的理解和我是一样的,只是他有一点小的失误,就是他把“文档流”定义成一种“行为” 了——如何摆放元素。但很明显,“文档流”是个名词,实质上它指“通过这种行为而产生的一个实体,即展现在浏览者眼前的页面。”
那么,我们经常看到“正常文档流”和“脱离正常文档流”的字样。我想要想很清晰的理解这个问题,要从理解“div+css布局”与“table 布局”的一个和大的不同说起。从我的理解而言,table布局是一个二维空间的布局(即一个平面上的布局);而“div+css布局”是个三维空间的布局(即一个空间上的布局)。
那么“div+css”是如何将平面转换为空间的呢?这要归功于以下五个属性:left、right、top、bottom、z-index,可以将right(left)、top(bottom)、z-index(正负值)想象成三维坐标轴中的x、y、z轴。“正常文档流”可以想象成x、y平面。“脱离正常文档流”就是跳出了x、y平面,独立开辟新的层面。
 
2. 父级对象 同级对象
如果说要找块div1的父级对象,那么简单的说就是谁直接包含了div1,谁就是他的父级对象。同级对象,是指具有同一父级对象的两个或两个以上的对象。例如:
<div id=”out”>
  <div id=”in1”>
    <div id=”in2”></div>
    <div id=”in3”></div>
  </div>
</div>
其中in1的父级对象是out,而in2、和in3的父级对象是in1,不是out。in2和in3为同级对象。 
 
3. position abloulte 和relative属性

<div id="parent">
     <div id="sub1">sub1</id>
     <div id="sub2">sub2</id>
</div>

 
3.1 relative属性

relative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性比如设置如下CSS代码:

#sub1
{
  
  position: relative;
    padding: 5px;
    top: 5px;
    left: 5px;

}


我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,relative的“相对的”意思也正体现于此。

对于此,只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。

随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。

如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。

 

3.2 absolute属性

这个属性总是有人给出误导。说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。

当sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:

(1)当sub1的父对象parent也设置了position属性,且position的属性值为absolute或者relative时,也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。

注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。

接下来的问题是,sub2的位置到哪里去了呢 由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始。

(2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。

分享到:
评论
1 楼 cfczdws 2014-10-12  
唉,还有好多要学~~

相关推荐

    css的选择器

    - **一般兄弟选择器**:使用`~`来选择紧跟在另一元素后的一系列同级元素。 - **例子**: - `p ~ ul`:选择前面有`&lt;p&gt;`元素的每个`&lt;ul&gt;`元素。 ##### 3. **属性选择器** 这些选择器允许我们根据元素的属性及其值...

    jquery帮助文档

    - `children()`, `find()`, `siblings()`: 查找元素的子级、后代或同级元素。 9. **插件和扩展** - jQuery生态系统中有大量的插件,如:Bootstrap、jQuery UI等,它们扩展了jQuery的功能,如表单验证、日期选择器...

    CSS的相邻兄弟选择器用法简单讲解

    它的主要作用是选取紧接在另一个元素后的元素,且这两个元素必须拥有同一个父级元素。相邻兄弟选择器的用法相对简单,只需要理解几个关键点就可以轻松运用。 首先,我们来明确什么是相邻兄弟元素。在HTML文档中,...

    css选中父元素下的第一个子元素(:first-child)

    在CSS(层叠样式表)中,`:first-child`伪类选择器是一个非常有用的工具,它允许我们选择并应用样式给父元素下的第一个子元素。然而,在实际使用中,可能会出现一些误解,导致预期效果与实际效果有所偏差。本文将...

    CSS教程:网页布局定位及z-index解释

    CSS定位系统基于`position`属性,它允许开发者对网页元素进行精确控制,使其脱离正常文档流。`position`属性有四个可能的值: - **static**(默认值):元素按照正常的文档流排列。 - **relative**:元素保持其原始...

    vue+element开发手册.docx

    本文档是当前项目中用到的web前端开发的标准规范,主要介绍vue+elementui项目的架构、目录结构和开发规范。以下是从手册中提炼出的知识点: 一、前端架构 * 使用Vue(v2.6.10)作为前端框架 * 使用Vue-router(v3.0.2...

    jQuery在线b帮助文档

    - **选择与遍历**:`.find()`用于查找后代元素,`.parent()`和`.parents()`用于查找父级元素,`.siblings()`查找同级元素。 4. **动画效果** - **基本动画**:`.fadeIn()`、`.fadeOut()`、`.slideToggle()`等用于...

    前端关键字(打字练习)共1347个字符.docx

    - `parent`、`closest`: 获取父级或最近的匹配元素。 - `function`: 定义函数。 - `setInterval`、`clearInterval`: 定时执行和清除定时器。 - `event`: 事件对象,包含与事件相关的属性和方法。 - `focus`、`...

    M2-D7-HW:M2 Day7作业-CSS选择器练习

    - **理解继承与层叠**:CSS样式会向下继承,但后代可以选择覆盖父级的样式。层叠规则决定了当多个规则应用于同一元素时,哪个规则生效。 通过这个作业,你应该能熟练运用CSS选择器,为HTML文档创建丰富多彩的样式,...

    jQuery多层次的手风琴代码

    为了实现多层次的嵌套,我们需要检查当前点击的元素与已展开的元素的关系,如果存在嵌套,就需要先折叠其父级或同级的其他子元素。 以下是一个简单的示例代码框架: ```javascript $(document).ready(function() {...

    jQuery树形菜单插件多级菜单选中代码

    在IT领域,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本话题中,我们将探讨如何利用jQuery实现树形菜单插件,特别是针对多级菜单的选中状态管理。树形菜单在...

    Python中使用Beautiful Soup库的超详细教程

    - 使用CSS选择器可以更方便地定位元素,如`soup.select('.class_name')`。 5. **导航文档树** - `parent`和`children`属性允许遍历元素的父级和子级。 - `next_sibling`和`previous_sibling`帮助导航同级元素。 ...

    网页模板——jQuery实现多层次的手风琴效果源码.zip

    4. **CSS样式控制**: jQuery可以改变元素的CSS属性,如`display`属性,以实现元素的显示与隐藏。在手风琴效果中,通常设置`display:none`隐藏内容,`display:block`展示内容。 5. **动画效果**: jQuery的`....

    jQuery实现表格展开与折叠的方法

    它利用jQuery的`siblings()`方法选取点击的父级行的同级元素,并通过`not()`方法排除其他父级行,只对其他子级行应用`hide()`方法,达到隐藏的效果。 ### 知识点七:完整的代码结构 为了确保功能的完整性和可用性...

    jQuery资料

    4. **DOM遍历**: `parent()`, `children()`, `siblings()`等方法用于查找元素的父级、子级或同级元素。 5. **数据绑定`: `.data()`, `.removeData()`用于在元素上存储和检索数据。 ### 三、jQuery与现代JavaScript...

    Expandable &quot;Detail&quot; Table Rows

    1. **为每个父级行添加特定类名(Class)**:在父级行(tr标签)上使用“parent”作为类名,以便能够通过CSS和JavaScript选择并操作这些行。 2. **为每个父级行赋予唯一标识符(ID)**:通过为父级行设置ID,能够...

    emmet快捷键使用

    - Sibling(同级元素):`+` 用于在同级位置创建新的元素。例如,`div+p+bq` 将会生成一个 div 元素,其后紧跟着一个 p 元素和一个 bq 元素。 - Climb-up(向上爬升):`^` 用于跳转到父级元素。在嵌套很深的结构中...

    jquery实现带二级菜单的导航示例

    这些菜单项和二级菜单项都应被包含在相应的父级元素中,比如导航容器或者标签里,以便于通过CSS和JavaScript进行操作。 在CSS中,我们需要定义一些样式来控制导航条和二级菜单的显示状态。通常二级菜单在默认情况下...

    position:relative/absolute无法冲破的等级

    元素相对于其正常位置进行定位,即相对于自身原来的位置偏移,不会脱离标准文档流,不影响其他元素布局。 - **position:absolute**:绝对定位。元素相对于最近的已定位祖先元素(指position不是static的父级)进行...

Global site tag (gtag.js) - Google Analytics