CSS基础知识------浮动及定位网页元素

标准文档流及其组成

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。

标准文档流的组成：
块级元素（block）：h1~h6、p、div、列表
内联元素（inline）：span、a、img、strong……

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。

display属性

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被现实

注：块级元素与行集元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）

浮动

float属性

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动，并会显示在其文本中出现的位置

溢出处理

overflow属性

属性值	说明
visible	默认值，内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余剩余内容

解决父级边框塌陷的方法

浮动元素后面加空div

简单，空div会造成HTML代码冗余

设置父元素的高度

简单，元素固定高会降低扩展性

父级添加overflow属性

简单，下拉列表的场景不能用

父类添加伪类after

写法比上面稍微复杂一点，但是没有副作用，推荐使用

css定位概述

css定位（positioning）属性允许对元素进行定位

css定位和浮动

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

css position属性

通过使用position属性，我们可以选择四种不同的类型的定位，这会影响元素框生成的方式。
position属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

css相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

相对定位概念

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
代码：

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

如下图所示：

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

css绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

css绝对定位概述

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如图所示：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

z-index属性

调整元素定位时重叠层的上下位置
1.z-index属性值：整数，默认为0
2.设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系
3.z-index值大的层位于其值小的层上方

网页元素透明度

属性	说明	举例
opacity	x值为0~1，值越小越透明	opacity：0.4；
filter:alpha(opacity=x)	x的值为0~100，值越小越透明	filter：alpha(opacity=40);