文档流和定位的查漏补缺

文档流:自上而下分成一行一行,每行中从左至右的顺序排列元素。网页大部分对象都占用文档流。

定位:

float 浮动比较有用的是,前面的内容设置浮动后,如果不进行清除,后面的标签会跟上来,且标签里面的内容会排在设有浮动标签的后面,但其标签是占有整行的。

position position设置了absolute,不对其设置left或top的话是不会改变位置的。

如果设置top负值的话有以下几种方法

margin-top:-10px;

position:relative/absolute; top:-10px;

transform 变换元素改变了形状,但新的形状不会影响文档流动。

z-index 设置元素的堆叠顺序,通过position激活,脱离文档流后不设置z-index也会漂浮在上面。

时间: 2024-11-05 11:56:11

文档流和定位的查漏补缺的相关文章

文档流&浮动&定位

文档流指元素在文档中的位置由元素在html里的位置决定,块级元素独占一行,自上而下排列:内联元素从左到右排列脱离文档流的方式: 浮动,通过设置float属性 绝对定位,通过设置position:absolute 固定定位,通过设置position:fixed 定位 1  relative,relative元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留.它的主要效果是使元素偏离正常的位置,其他元素不会调整位置来弥补其偏离后留下来的空隙.其与 absolute 不同,其偏离对

脱离标准文档流(2)---定位

定位 三种定位 可以使标准流脱离的定位:绝对定位,固定定位. 相对定位 属性值:relative(相对的)----权当我复习了一边英语单词. 下面是我对于相对定位的理解: 绝对定位在某种程度上相当于灵魂出窍(脑洞大开),也就是说那些被我们通过偏移量所移动的元素,他们的灵魂仍在原来的位置,我们所看到的是实体. 但是客观一点来说的话,就是相对定位无法使标准流脱标,所以我们所移动的元素仍是标准流,标准流的特点就是独自占有一行,一个标签换一次行. 图示如下:       我们可以看出来蓝色块已经不再原处

前端(七)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 文档流本质是 nomal flow (普通流.常规流) 3.BFC(Block Formatting Contxt) 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干 4.BFC的规则

内联元素的盒子模型与文档流定位padding属性

        内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100px ; height:100px}   表现效果相同,由此可见内联元素不可以设置高度和宽度 2.内联元素可以设置水平方向的内边距padding-left或padding-right span{padding-left:20px ; padding-right:200px} 3.内联元素可以设置垂直

文档流、浮动 、定位的概念【转】

原文链接:https://blog.csdn.net/qq_40028324/article/details/80035129 1.文档流 - 所有的元素默认情况下都是在文档流中存在的- 文档流是网页的最底层- 元素在文档流中的特点:- 块元素1.默认宽度是父元素的全部2.默认高度被内容(子元素)撑开3.在页面中自上而下垂直排列- 内联元素1.默认高度和宽度都被内容撑开2.在页面中自左向右水平排列,如果一行不足以容下所有的元素则换到下一行继续从左向右 2.浮动- 使用float来设置元素的浮动-

DOM中关于脱离文档流的几种情况分析

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 当前所知的脱离文档流的方式有两种:浮动和定位. a.定位属性positon 先看一下定位.看一段对定位各个字段的描述,有助于理解 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top&q

标准文档流与脱离文档流

在网页当中,所有的元素都有自己的占位. 标准文档流指在没有CSS干预的前提下,块级元素独占一行,可以自行定义宽.高:而行内元素并排显示,宽.高为auto. 常见的块级元素有: <address>地址<caption>表格表格标题<div>划分区域.区块<dl>定义列表<dt>定义列表中的项<dd>列表中定义条目<form>创建一个表单<h>标题标记<hr>一条横线<li>定义列表项目&l

三种可视化格式模型:普通文档流、相对定位与绝对定位、浮动

在CSS中是有三种定位机制的:普通文档流.浮动和绝对定位.在未指定其它两种定位机制的情况下,所有框都是在普通文档流中定位的. 普通文档流: 普通文档流,顾名思义,就是根据块级元素的标签在HTML里的顺序,像水流一样,从上至下.当然对于行内元素而言,还是在一行中水平排列的. 这里插入一个积累的小知识点. 行内元素可 以在水平(内间距.边框.外边距)方向上修改它们水平尺寸,但是在垂直方向上对行内元素的高度是毫无影响的,还有就是直接定义行内元素的 width/height也是毫无影响.对与行内元素来说

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

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