CSS的三种定位机制
1.标准文档流（normal flow）:从上到下，从左到右，输出文档内容，由块级元素和行级元素组成；
块级元素：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行
常见的块级元素：div, p, h, ul, ol, li, dl, dt, body等
行级元素：能在同一行内显示，不会改变HTML文档结构
常见的行内元素：span, strong, a......
行内块状元素：img, input等（img一般看作行内元素）
可以使用display改变生成框类型。即设置display:block就可以将行内元素改成块状元素，display:none可以使生成的元素根本没有框，这样这个框及所有内容就不再显示，不占用文档的空间。
css有三种基本的定位机制：普通流、浮动和绝对定位。除非专门定义，否则所有元素都在普通流中，按HTML中元素顺序定位。
块级框从上到下垂直排列，框之间的垂直距离由框的垂直外边距计算出来。
行内框一行中水平排列，可以使用水平内边距、边框和外边距调整他们的水平间距。但是，垂直内边距，边框和外边距（margin-left/right）不影响行高。另外，显示地设置行内框的高度或宽度也没有什么影响。唯一修改行内框尺寸的方法是修改行高或者水平边框、内边距或外边距。
如果设置display：inline-block，会让元素像行内元素一样水平依次排列。但是，框的内容仍然符合块级框的行为，例如能够显示地设置宽度、高度、垂直外边距和内边距。
2.相对定位——仍处于普通流中
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平的位置，让这个元素相对于他的起点移动。
在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致覆盖其他框。
#mybox{
position:relative;
left:20px;
top:20px;
}```
###3.绝对定位(absolute positioning)——与普通文档流无关，不占据空间
普通流中其他元素的布局就像绝对定位的元素不存在一样。
>绝对定位是相对于最近的已定位祖先元素来定位，如果不存在已定位的祖先元素，那么就像对于body定位。
因为绝对定位与文档流无关，所以他会覆盖页面上其他元素。可以通过设置z-index属性来控制这些框的叠放次序。z-index值越高，框在栈中的位置就越高。
相对与最近的祖先元素来定位绝对定位的元素，能够使子安一些有意思的效果。例如：假设希望让一个文本段落对准一个大框的右下角，只需对包含框进行相对定位，然后相对于这个框对段落进行绝对定位：
branding{
width:70em;
height:10em;
position:relative;
}
branding .tel{
position:absolute;
right:1em;
bottom:1em;
text-align:right;
}
<div id="branding">
<p class="tel"> Tel:0845 8123 8836</p>
</div>```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Thimble</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
.container{
border:1px #999 solid;
padding:20px;
background-color:#eee;
position: absolute;
}
.left{
border:1px #999 solid;
width:200px;
position: absolute;
top:20px;
left:20px;
height: 200px;
}
.left>p{
float:right;
right:10px;
}
.left>img{
border: 1px pink solid;
float:left;
width: 80px;
height: 80px;
position: absolute;
top:10px;
left:10px;
}
.main_content{
border:1px solid #999;
position: absolute;
}
.right{
border: 1px solid #999;
position: absolute;
right: 20px;
top:20px;
}
.right>img{
border: 1px solid #999;
}
</style>
<body>
<div class="container">
<div class="left">
<img src="" align="left"><p>团队介绍</p><br>
</div>
<div class="main_content">
<p>关于你们团队的介绍</p>
<p>可以给我们解释一下团队名称的来历，或是分别介绍你们的团队成员</p>
<p>百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师，精心编写了数十个实践编码任务，将技术知识点系统有机地串联在各个充满趣味与挑战的任务中，同学们通过实际地编码练习来掌握知识，再辅以互相评价、学习笔记等方式，加深对于学习内容的理解。</p>
<p>2017年我们除了前端技术，还特别增设了iOS及Android移动端开发的学习任务内容，提供给有兴趣在移动端开发的同学。我们还专门开设了数据可视化、WebGL的班级，让大家能够参与到最新潮、炫酷的技术学习中来，体会通过技术创造美好的幸福体验。</p>
</div>
<div class="right">
<img src="">个人logo 80*80<br>
<img src="">个人logo 80*80<br>
<img src="">个人logo 80*80<br>
<img src="">个人logo 80*80<br>
</div>
</div>
</body>
</html>```
>固定定位是绝对定位的一种。差异在于固定元素的包含块是视口。这使我们能够闯进总是出现在窗口中相同为值的浮动元素。使得页面在滚动时一直出现在屏幕的固定位置。
###4.浮动——不在文档的普通流中
最后一种可视化格式模型是浮动模型。浮动的框可以左右移动，直到他的外边缘碰到包含框或者另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以普通流中的块框表现的像浮动框不存在一样。
如图3-13所示，当把框1向右浮动时，他脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。
在图3-14中，当把框1 向左浮动时，他脱离文档流并且向左移动，知道它的左边缘碰到包含框的左边缘。因为他不再属于文档流中，所以他不占据空间，实际上覆盖了框2，使框2从视图中消失。如果把所有3个框都向左浮动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动知道碰到前一个浮动框。
###行框和清理
前一节指出，浮动会让元素脱离文档流，不再影响不浮动元素，实际上，并不完全如此。如果浮动元素后面有一个文档流的元素，那么这个元素的框表现得像浮动根本不存在一样。但是，框的文本内容会受到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。实际上，创建浮动框使文本可以围绕图像。
要想组织行框未然在浮动框的外边，需要对包含这些行框的元素应用clear属性。clear属性的值可以是left，right，both或none，它表示框的哪个边不应该挨着浮动框。我以前总是以为clear属性会自动地抵消前面的浮动。但是，实际情况有意思的多。在清理元素时，浏览器在元素顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面。
>浮动元素脱离了文档流，不影响周围元素。但是，对元素进行清理实际上是为前面的浮动元素留出了垂直空间。
这是一个有用的布局工具，它让周围的元素为浮动元素流出空间，这解决了前面你看到的绝对定位的问题——垂直高度的改变不影响周围的元素，从而破坏了设计。
我们来更详细的看一下浮动和清理。假设有一个图片，你不希望让它浮动到一个文本块的左边。你想将这个图片和文本包含在另一个具有背景颜色和边框的元素中。你可能会编写下面的代码：
<div class="news">
微信图片_20170626115056.jpg
但是，因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用clear.可惜这个示例中没有现有的元素可以清理，所以需要在最后一个段落下面添加一个空元素并且清理它。
<div class="news">
<p>some text</p>
<br class="clear" />
</div>
.news{
background-color:gray;
border:solid 1px black;
}
.news img{
float:left;
}
.news p{
float:right;
}
.clear{
clear:both;
}
但是这种做法会添加不必要的代码。还可以不添加clear,而是选择浮动div容器：
<div class="news">
<p>some text</p>
</div>
.news{
background-color:gray;
border:solid 1px black;
float：left;
}
.news img{
float:left;
}
.news p{
float:right;
}
这样会产生我们想要的结果，但是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择浮动布局中的几乎所有东西，然后使用合适的元素（常常是站点的页脚）对这些浮动元素进行清理。
overflow属性定义在包含的内容对于指定的尺寸太大的情况下元素该怎样。在默认情况下，内容会溢出到框外，进入相邻的空间。应用值为hidden或者auto的overflow元素有一个副作用，就是自动清理包含的任何浮动元素。因此这是一种有用的元素清理方法，不需要添加额外的标记。这个方法并不适合所有的情况，因为设置框的overflow属性会影响它的表现。更具体地说，这种方法在某些情况下会产生滚动条或者截断内容。
网友评论