文档流 | 易学教程

position笔记

阅读更多关于 position笔记

page1 css3对position属性的相关定义： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。*/ page2 static(无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的，但也不会报错) 　　　　　* { margin: 0; padding: 0; } .static-test { width: 100px; height: 60px; border: 1px solid red; display: inline-block; left

css 高度塌陷问题解析

阅读更多关于 css 高度塌陷问题解析

css 高度塌陷产生的原理：在解决这个问题之前首先我们要了解下什么是浮动，然后还需要知道高度塌陷产生的原因，最后才能根据我们的实际需求解决css的高度塌陷问题。浮动 float : left ; /*float属性具有left和right两个值分别表示左浮动和右浮动*/ 对于设置了float属性的页面元素将脱离文档流在容器中处于一种漂浮的状态。高度塌陷产生的原因通常在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当其子元素设置浮动属性之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。如下图所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css高度塌陷</title> <style> div { width : 200px ; border : 3px solid red } #son { height : 200px ; width : 200px ; border : 3px solid green ; float : left ; /*left：左浮动*/ } </style> </head> <body> <div> <div id= "son" >子代div</div> </div> <

CSS position属性

阅读更多关于 CSS position属性

一、定义专为设置标签位置的属笥二、详解 static： static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。 position: relative／absolute： relative: 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。 absolute: 绝对定位。定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position

css 定位属性：position

阅读更多关于 css 定位属性：position

对于position一直存有一些疑惑,特别是相关联的z-index属性,更是有些摸不着头脑,今天好好学习一下position属性的各个值不同的表现形式语法： position：static | relative | absolute | fixed 默认值：static 取值： static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6及以下不支持此参数值说明：检索对象的定位方式。对应的脚本特性为position。兼容性：都支持，除IE6不支持fixed取值参数上面的说法比较全面，但是不易理解，我做了一个demo页面，从实例出发，一目了然，代码如下： View Code <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8" />

绝对定位和相对定位的内幕

阅读更多关于绝对定位和相对定位的内幕

css有5种不同的position属性值我们不会讨论inherit，因为顾名思义，它就是继承了父元素的值，而且在比较老的IE版本中，支持情况也不好。任何元素的position属性的默认值都是static。所谓的static定位就是元素在文档流中。当然了，这完全取决于你的HTML结构。另一个值你肯定见过，它就是fixed。说白了，它就是把一个对象钉在背景上，因此无论你把它放在哪，它就会一直在那。我们经常在sidebar的导航元素中看到它的身影，当页面向下滚动了很远的距离，这时候我们想回到顶部，如果没有一个fixed的导航，这种用户体验是很差的。前面这三个值都很浅显易懂，接下来是绝对定位和相对定位。我们会单独的解释这些值，并且会讨论它们如何配合使用。绝对定位使用绝对定位，你可以让一个元素脱离文档流，并且把它放在页面上某个指定的位置。为了了解它如何工作，我们创建了一个简单的无序列表。正如我们说过的，列表项（list item）默认的定位方式是static，这就意味着它们会跟随标准的文档流。下面我对其中一项使用绝对定位。如你所见，第4项完全脱离了文档流，并且位于浏览器窗口的左上角。请注意，即使有其他内容占据了这个位置，这个元素也不在乎。当我们使用绝对定位时，它不会影响文档流中的其他元素，也不会被别的元素影响。使用绝对定位的原因是我们想精确的定位，通过top、bottom

css浮动(float)及如何清除浮动

阅读更多关于 css浮动(float)及如何清除浮动

前言： CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流自窗体自上而下分成一行一行，并在每行中按从左到右的顺序排放元素。 (2)网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position、float、display来控制。默认情况下，所有元素都处在文档流中，四种情况将使得元素离开文档流：浮动float、绝对定位absolute、相对定位fixed、元素不显示display:none，这种情况不占文档流的空间，而普通元素的位置基于文档流。（了解）浮动float用于设置标签的居左浮动和居右浮动，浮动后的元素不属于html文档流，需要用清除浮动把文档拽回到文档流中。浮动值： left：向左浮动 right：向右浮动特征：块元素可以在一行显示浮动特征： 1.按照一个指定的方向移动，遇到父级的边界或者其他的元素停下来 2.块元素可以在一行显示，宽由内容撑起来 3.行内元素支持设置宽高 4.脱离文档流 float不是完全脱离文档流的块元素：对于块元素，后面未浮动的元素所占的位置是浮动元素的位置注意：内容会把浮动元素的位置保留，行内元素

IT兄弟连 HTML5教程使用盒子模型的浮动布局

阅读更多关于 IT兄弟连 HTML5教程使用盒子模型的浮动布局

虽然使用绝对定位可以实现页面布局，但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变，所以并不是布局的首选方式。而使用浮动的盒子模型可以向左或向右移动，直到它的外边缘碰到包含它的盒子模型边框或另一个浮动盒子模型的边框为止。并且由于浮动的盒子模型不在文档的普通流中，所以文档的普通流中的盒子模型表现得就像浮动的盒子模型不存在一样。 1 设置浮动在CSS中，我们通过float属性实现盒子区块框向左或向右浮动。其实任何元素都可以浮动，而浮动元素会生成一个块级框，而不论它本身是何种元素。但浮动的元素要指定一个明确的宽度，否则它们会尽可能地窄。在图1所示的两张图片中，左边图片是按普通的文档流布局的三个盒子区块框，它们从上到下一个接一个地排列，位置由元素在HTML中的位置决定。而在右边的图片中，当把第一个区块框向右浮动时，它脱离普通文档流并且向右移动，直到它的右边缘碰到包含框的右边缘，而其他两个区块框就会在普通流中上移。图1 CSS浮动属性的应用另外，在图2.4所示的两张图片中，当将第一个区块框设置向左浮动时，它就会脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。这样，第一个区块框就不再处于文档流中，所以它也不占据空间，则第二个区块框就会在文档流中自动上移，但被设置左浮动的第一个区块框覆盖住了，从而使第二个区块框从视图中消失。解决这种情况可以对布局中的所有东西进行浮动

IT兄弟连 HTML5教程使用盒子模型的浮动布局

阅读更多关于 IT兄弟连 HTML5教程使用盒子模型的浮动布局

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 虽然使用绝对定位可以实现页面布局，但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变，所以并不是布局的首选方式。而使用浮动的盒子模型可以向左或向右移动，直到它的外边缘碰到包含它的盒子模型边框或另一个浮动盒子模型的边框为止。并且由于浮动的盒子模型不在文档的普通流中，所以文档的普通流中的盒子模型表现得就像浮动的盒子模型不存在一样。 1 设置浮动在CSS中，我们通过float属性实现盒子区块框向左或向右浮动。其实任何元素都可以浮动，而浮动元素会生成一个块级框，而不论它本身是何种元素。但浮动的元素要指定一个明确的宽度，否则它们会尽可能地窄。在图1所示的两张图片中，左边图片是按普通的文档流布局的三个盒子区块框，它们从上到下一个接一个地排列，位置由元素在HTML中的位置决定。而在右边的图片中，当把第一个区块框向右浮动时，它脱离普通文档流并且向右移动，直到它的右边缘碰到包含框的右边缘，而其他两个区块框就会在普通流中上移。图1 CSS浮动属性的应用另外，在图2.4所示的两张图片中，当将第一个区块框设置向左浮动时，它就会脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。这样，第一个区块框就不再处于文档流中，所以它也不占据空间，则第二个区块框就会在文档流中自动上移，但被设置左浮动的第一个区块框覆盖住了

前端css基础（二）布局定位三种方式文档流,浮动,层定位 clear

阅读更多关于前端css基础（二）布局定位三种方式文档流,浮动,层定位 clear

对盒子进行定位定位方式分为三类：（1）文档流（2）浮动定位（3）层定位文档流flow 默认的方式，相当于平常写字一样，从上到下，从左到右浮动定位float 想要盒子并列排列一般采用浮动定位层定位layer 使用position属性设定，像图层一样前后层叠在一起一.文档流flow 文档元素分类 block,inline,inline-block 1.block元素独占一行元素的height、width、margin、padding都是可以设置的常见的block元素： div、段落、列表、标题、表格、表单等 <div>div标签</div> <p>p标签</p> <h1>h标签</xmp></h1> <ul>ul标签</ul> <table>table标签</table> <form>form标签</form> 2.inline 不单独占一行 width、height不可设置 width是由元素里面的文字和图片的宽度决定的，不能改变常见的inline元素：<span>、<a> <a>a标签</a> <span>span标签</span> 3.inline-block元素：不单独占一行元素的height、width、margin、padding都可以设置常见元素：<image> display属性二.浮动定位float 1.float属性 float属性

css position：static 的使用

阅读更多关于 css position：static 的使用

relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级 absolute(绝对定位) 脱离文档流，通过top,bottom,left,right定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性， absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。 fixed（固定定位）这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。 static:无特殊定位,对象遵循正常文档流 Adiv是放在Bdiv上面的，并且屏幕小的时候各个文本框就单独占一行如下：这时需要用到position ：relatic实现， <div class="row searchRow" style=""> <div class="col-lg-4 margin_b20" style=""> <div class="floatLeft zhangdan-time-title ">开始时间：</div> <div class="zhangdan-time" style=""><input type="text" value="" class="form-control" id="appDate1" >

订阅文档流