绝对定位和固定定位都是元素脱离了普通文档流,不再占物理空间

前端必须了解的布局常识：普通流（normal flow）

目录一.概述二.块级元素和内联元素常见的块级元素 BFC 常见的行内元素 IFC 三.哪些情况会脱离普通流浮动绝对定位固定定位 display:none 四.总结五.参考资料一.概述普通流(normal flow,国内有人翻译为文档流):将窗体自上而下分成一行一行,块级元素从上至下. 行内元素在每行中按从左至右的挨次排放元素,即为文档流.了解文档流是css布局的基础.虽然普通流很基础, 但资料较少,之前对这个概念模糊,现总结如下,欢迎拍. 二.块级元素和内联元素 html元

CSS学习笔记10 相对定位，绝对定位与固定定位

文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position 属性,来重新决定元素在文档流中的位置. position 属性值 static:默认的文档流的布局的方式,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中.(忽略 top, bottom, left, right 或者 z-index 声明). relat

{03--CSS布局设置} 盒模型二 padding bode margin 标准文档流块级元素和行内元素浮动 margin的用法文本属性和字体属性超链接导航栏 background 定位 z-index

03--CSS布局设置本节目录一盒模型二 padding(内边距) 三 boder(边框) 四简单认识一下margin(外边距) 五标准文档流六块级元素和行内元素七浮动八 margin的用法九文本属性和字体属性十超链接导航栏案例十一 background(背景) 十二定位十三 z-index 一盒模型盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型.

CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来. 行内框在一行中水平布置.可以使用水平内边距.边框和外边距调整它们的间距.但是,垂直内边距.边框和外边距不影响行内框的高度.由一行形成的水平框称为行框(Line Box)

CSS文档流与块级元素和内联元素

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

CSS文档流与块级元素和内联元素（文档）

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

从文档流来看内联元素和块元素的css排版

veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理

python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 a LoVe HAte 必须要遵循这个准则 “爱恨准则” nth-child(3n+1) first-child last-child 继承性和层叠性继承性: 文本的属性: color text-*,line-*,font-* 盒子属性定位布局的元素层叠性: 1.先看标签元素有没有被选中,如果选中

padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 盒模型示意图盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离如果让你做一个宽高402*402的盒子,您如何来设计呢? 答案有

CSS文档流、块级元素、内联元素

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

浅谈，html\css脱离标准文档流相关

(个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相安无事,可突然有一天某个元素心想啊,我那么优秀,不该出现在这里啊,于是它成精了,它发现了一道大门走向另一个空间BFC. BFC:直译为"块级格式化上下文",这是一个独立的区域,这个区域与外部没有关系了,互不招惹,个人常用的会开启BFC空间的方式有 1.float的值不是none 2.pos

文档流&浮动&定位

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

前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

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

css盒子模型、文档流、相对与绝对定位、浮动与清除模型

一.CSS中的盒子模型标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. html元素一般分为块级元素和行内元素块级元素:块级元素排斥其他元素与其位于同一行,可以设定宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素, 常见的块级元素有div, p ,h1~h6,ul,table,form,hr等. 每一个块元素都可以分为cont

css脱离文档流

作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Q: 脱离文档流就不占据空间了吗?A: 可以这么说.更准确地一点说,是一个元素脱离文档流(out of normal flow)之后,其他的元素在定位的时候会当做没看见它,两者位置重叠都是可以的. Q: 脱离文档流是不是指该元素从dom树中脱离?A: 不是,用浏览器的审查元素就可以看到脱离文档

float,absolute脱离文档流的总结

dom元素脱离文档流,有如下几种方式: 1. float 脱离文档流,其他dom元素无视他,在其下方布局,但是其未脱离文本流,其他元素的文本会认为他存在,环绕他布局.父元素会无视他,因此无法获取其高度,这也就是浮动元素父元素高度塌陷的原因. 下面是一个例子:特别注意的是,浮动元素后面元素的文字虽然对浮动元素形成环绕,但其位置依然受后面元素的宽高的影响.如果后面元素的宽度过小,文字将不能在右侧环绕,而是显示在浮动元素下方. <!DOCTYPE html> <html lang="

CSS定位——文档流定位

关于CSS的定位机制Ⅰ ㈠概念对于盒子模型来说,也就是页面元素,这些盒子究竟在页面的什么位置,怎样排列它,那么找到它的位置,确定它的位置,这个就是定位机制所决定的. ㈡分类文档流, 浮动定位,层定位㈢三种类型定位的功能 ⑴文档流定位(normal flow) 默认我们不需要额外的设置,每种元素它们在当前的网页上面呈现出来的状态都不同,文档流定位就相当于我们平常写字一样,都是从上到下,从左到右,只是有的元素会单独占一行,有的元素跟其他元素在一行上显示. ⑵浮动定位(float) 改变默

关于css浮动框是否脱离文档流的分析

在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. 常见的html标签中如 span, font, a, b, em 都是内联元素. 所谓内联,简单理解就是不会换行的元素. <body> <b>bold element</b> <a href="http://www.google.com">g

CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

1.浮动浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描述:有两个盒子,一个盒子浮动,一个盒子不浮动.浮动的盒子会脱离标准文档流,不浮动的盒子会在标准文档流中成为第一个,所以两者出现覆盖现象. 1.1.2 大概描述:一个行内标签在标准文档流中是不能设置宽高的,但是使用float使其脱离文档流之后,就可以对其设置宽高了.所有浮动的标签不会去区分行内标签和块

WEB学习 -相对定位、绝对定位、固定定位、z-index

相对定位相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. .不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘. 3.相对定位用途相对定位有坑,所以一般不用于做“压盖”效果.页面中,效果极小.就两个作用: 1) 微调元素 2) 做绝对定位的参考,子绝父相(讲绝对定位的时候说) .相对定位的定位值可以用left.right来描述盒子右.左的移动: 可以用top.bottom来描述盒子的下.上的移动. 绝对定位 . 绝对定位

css定位:相对定位、绝对定位、固定定位的区别与特性

css定位:相对定位.绝对定位.固定定位的区别与特性原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三种定位可以设置四个值,但是通常只用到2个值就可以完成定位如果只写了定位没有设置偏移量,则元素位置都不会改变,默认值为原来的位置. 使用了定位,.元素会提升一个层级(如果与别的元素发生重叠,会在别的元素上面) 如果多个元素同时开启了定位.层级都一样的情况下.如果发生重叠.则后面的元素会盖住前面的元

绝对定位和固定定位都是元素脱离了普通文档流,不再占物理空间

热门专题