文档流在页面的放置以及position的定位

CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 1.2 浮动层 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框. 而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素.内联元素

文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. (自己的理解是从头到尾按照文档的顺序,该在什么位置就在什么位置,也可以按照上面的意思理解,自上而下,自左到右的顺序) 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流 将窗

文本流,概括地说其实就是一系列字符,是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而position属性可以将元素从文本流脱离出来显示. 文档流,英文原版文档为"normal flow",翻译成常规流.普通流也就更好理解它了. 从直观上理解,常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下(块级元素),一行接一行,每一行从左至右(行内元素). 定位类型包括三种: 常规

文档流:将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为文档流. 我们在排列元素时,遵循"流式结构",即元素遵循从上向下,从左向右堆叠的规则,所以我们在排列元素时如果每行从左往右的元素的总宽度大于窗口的宽度时,就会默认换行. 有三种状况将使得元素离开文档流而存在,分别是浮动.绝对定位.固定定位. 浮动时,离开文档流后的元素,不占用文档流的空间,不会被文档流中的元素发现,离开文档流元素后面的还在文档流上元素会自动上来填补位置接上文档流.此时,离开文档流的元素如同浮在文

文档流 先说说什么是公文流转  什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:ye

文档流 先说说什么是文档流  流是什么 就是一串连续的东西 <div style="background-color:pink;width:40px;height:80px;">第一个框 </div> <div style="background-color:red;width:40px;height:80px;">第二个框 </div> <div style="background-color:yel

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

        内联元素的盒子模型 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.内联元素可以设置垂直