文档流

一、定位基本原理 对于前端开发工程师来说，编写CSS是前端开发工作中必不可少的一个内容，在CSS中的position属性又是非常重要的一个方面。顾名思义，所谓position，即是对HTML元素定位方式的一种设置。它是CSS定位技术的基石，看似很容易学习，很多的前端工程师也会说自己掌握得很好，但事实上是这样吗？作为一个在前端开发的道路上慢慢前行的新人，我不敢这么说，那么就通过这篇文章与大家一起，了解position的奥秘。 首先，既然是CSS中的属性之一，那么我们就有必要研究一下W3C的CSS文档，毕竟这才是对此属性说明最为详细的地方。在这里要插一句，目前市面上充斥着大量的教学书籍，网络上也有很多相关的学习资源，其中固然不乏精品，但是会花点时间，认真阅读官方文档的又有多少人呢，有的时候，最乏味的往往是最准确的。 好了，话不多说，官方文档中关于position属性的内容大致是这样的： In CSS 2.1, a box may be laid out according to three positioning schemes: Normal flow Floats Absolute positioning 1. 常规文档流。包括块级元素排版，行内元素排版以及对块级元素和行内元素相对位置的排版。 2. 浮动。在浮动模型中，元素先按照正常文档流定位，然后从文档流中移出

7.6 移除节点 removeChild() 是将父元素中的某个子节点移除掉；这个为彻底移除。 7.7 插入节点 insertBefore 不同于appendChild()，appendChild()为将指定的元素剪切至对象所有子元素的最后。而insertBefore(,)是将指定的元素插入到某个位置之前，第一个参数为指定的元素，第二个参数为父元素中某个子元素的位置，指定元素会插入到第二个参数位置之前。 8. JS设置样式 8.1 JS设置样式的两种方式 style：逐条获取样式属性，逐条改变对应样式。 className：只能获取页面通过style设置的类名，无法获取外联式引入的。 当然我们需要改变的样式较少时可以直接通过style的方式改变，可是如果样式较多就可以先在页面style标签中取个类名将所有的样式放在这个类名下，然后使用className的方法来调用这个类名。 8.2 JS设置样式时常有的style属性： backgroundColor：设置背景颜色 backgroundImage：设置背景图片 color：设置字体颜色 width：设置元素宽度 height：设置元素高度 border：设置元素边框 opacity：透明度设置取值范围为0-1，IE8及以前版本的只支持filter：alpha(opacity=XX);XX为0-100之间的值。 总结：由于JS中不识别

创建元素 1. document.write 不常用，使用后会覆盖原本的页面内容 document . write ( "<h1>我是标题</h1>" ) ; //添加的内容 覆盖原理： 默认情况下，页面加载会形成一个文档流，当页面所有内容加载完毕之后，这个文档流(默认的文档流)就会关闭， 当触发某个事件，调用document.write向页面添加内容的时候，就会形成新的文档流，就会覆盖原本的页面内容 不覆盖的情况：默认文档流里没有关闭 覆盖的情况：默认文档流已经关闭，形成了新的文档流 2. innerHTML 也不常用 console . log ( document . body . innerHTML ) ; document . body . innerHTML += "<h1>我是标题</h1>" 3. document.createElement(“标签名”) 特点： (1)默认创建的是空标签 (2)创建值存在于内存中，需要手动添加到页面上 添加步骤： a.创建一个空标签 var h1 = document . createElement ( "h1" ) ; b.设置标签属性 h1 . innerText = "我是标题" c.添加到页面上 document . body . appendChild ( h1 ) ; 性能比较：

重新认识float 2.1. 误解和“误用” 　　既然提到“误用”，各位看官就此想想，自己平日是怎么使用float的？另外，既然“误用”加了引号，就说明这样的使用并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。 　　这样一问大家，我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了float来实现的，并且在css3被普及之前，多列布局的最佳解决方案也是使用float——要不然你就用table。 　　但是，这样使用确实是对float的一种误解和“误用”，因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。 　　 　　但是，当时的多列布局和横向排版主要是依靠table实现，后来人们见见的发现，使用table将导致代码量大、混乱、不利于SEO，然后发现float+div是一个很不错的排版解决方案，于是乎——过去几年“css+div”页面排版一直是一个热门话题，也是各种高大上的面试题必考的一项。 　　初学float的同学，你如果没有从最基础的知识入手，而是从网络的零散之后或者同事同学的零散代码学起的话，你可能只知道float是用来排版的，但是你却不知道float的许多个特性，这就导致了你在使用float时的许多问题

文档流 一、什么是文档流？ “流”，我们在生活中经常听到这个词，比如水流，电流。就像水流从高处往低处流一样，我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头，浏览器的底部就是河流的尽头。 那么所谓的文档流（normal flow，也被称为“普通流”），指的是就是元素排版布局过程中，元素会自动从左往右，从上往下地遵守这种流式排列方式。 当浏览器渲染html文档时，从顶部开始开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。那么此时就不得不说一下块级元素和行内元素。 二、块级元素与行内元素 块级元素：顾名思义，这个元素是“一块”，那么作为一个块，它就应该有自己的宽度和高度。而且它比较霸道，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外），一般作为容器使用，常见的块级元素有：from、select、 textarea、h1-h6 、table 、button 、hr 、p 、ol 、ul等。 结合以上内容，块级元素拥有以下特点： 1.每个块级元素都是独自占一行。 2.元素的高度、宽度、行高和边距都是可以设置的。　　 3.元素的宽度如果不设置的话，默认为父元素的宽度。 行内元素：显然，这种元素存在于一行内

定位分为4种： 1：static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 (2)absolute元素框偏移某个距离。 http://www.w3cfuns.com/thread-258-1-1.html 　　无父级：参照浏览器左上角 　　有父级：父级无position，参照浏览器左上角 　　　　　　父级有position，参照父级左上角 (3)relative元素框从文档流完全删除，并相对于其包含块定位。 　　无父级：参照自身原来在文档流中位置的左上角 　　有父级：父级无position，参照自身原来在文档流中位置的左上角 　　　　　　父级有position：有padding，参照padding 　　　　　　　　　　　　　　无padding，参照自身原来在文档流中位置的左上角 (4)fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 　　始终不动 总结：如果用定位来布局来定位页面，父级元素的Position 的属性必须设置为relative,而位于父级内部的某个元素最好用absolute,因为他不会受父级元素padding的影响，当然你也可以用relative，但不要忘记计算padd的值 来源： https://www.cnblogs.com

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在一样： #box_relative { position: absolute; left: 30px; top: 20px; } 如下图所示： 绝对定位的元素的位置相对于 最近的已定位祖先元素 ，如果元素没有已定位的祖先元素，那么它的位置相对于 最初的包含块 。 对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。 注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。 提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。 新建一个前端学习qun438905713

浮动的简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用 float 属性来设置于元素的浮动 可选值： none 默认值 ，元素不浮动 left 元素向左浮动 right 元素向右浮动 注意 元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置所以， 元素下边的还在文档流中的元素会自动向上移动 浮动的特点： 1、浮动元素会完全脱离文档流，不再占据文档流中的位置 2、设置浮动以后元素会向父元素的左侧或右侧移动， 3、浮动元素默认不会从父元素中移出 4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移 6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高 简单总结： 浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局 例： float : left ; 浮动的其他特点 （1）浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果 （2） 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化 脱离文档流的特点： 块元素： 1、块元素不在独占页面的一行 2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开 行内元素：

一、CSS文档流 CSS 有三种基本的定位机制：普通流、浮动流、定位流。 1、普通：上下排列的布局 2、浮动：左右排列布局的时候 3、定位：层叠（叠加）排列布局（注：大部分情况） 定位属性：position：检索或设置对象的定位方式 1、static：默认值；没有定位效果；（可以用于取消元素之前的定位设置） 2、relative：相对定位（参照物：自己所在的位置） 特点：如果没有定位偏移量，对元素本身没有任何影响 不使元素脱离文档流，空间是会被保留。 不影响其它元素布局 left、top、right、bottom是相对于当前元素自身进行偏移的，不能独立存在，必须配合定位元素一起使用 3、absolute：绝对定位（参照物：包含块–该元素的祖先级元素） 使元素完全脱离文档 使用内联元素支持宽高（让内联具备块特性） 使块元素默认宽根据内容决定（让块具备内联的特性） 如果有定位的祖先元素相对定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定） 注：如果祖先元素中有多个元素具备定位模式，那么是离自己最近的祖先元素进行偏移。 注：默认情况下是相对可视窗口进行定位的。 绝对定位元素会根据包含块进行绝对定位，默认情况下，浏览器的可视窗口是一个大的包含块，默认情况下元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义了包含块

css三种定位机制： 普通流：上下排列类布局（大部分） 浮动流：左右排列的布局（大部分） 定位流：层叠/叠加排列布局（大部分） css定位的几种类型 属性为position：检索或设置对象的定位方式。 1:static 默认值，无定位 ； 可以取消元素之前的定位设置 2:relative（相对定位） 如果没有定位偏移量对元素本身没有影响 不脱离文档流，空间会完全保留 不影响其他元素的布局 需添加（left/botton/right/top）相对元素自身偏移， 3:absolute(绝对定位)（参照物：包含块―该元素的祖先级元素） 使元素完全脱离文档流 使内联元素支持宽高 （让内联具备块特性） 使块元素默认宽根据内容决定（让块具备内联的特性） 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定） 注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。默认情况下是相对可视窗口进行定位的。 包含块： 包含块绝对定位的基础，绝对定位元素会根据包含块进行绝对定位，默认情况下 ，浏览器的可视窗口是一个大的包含块，默认情况下，绝对定位元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义了包含块，那他就最近的祖先级元素进行绝对定位 绝对定位无祖先元素时： （默认body为祖先元素） 添加一个祖先元素时：