这里写目录标题
css知识点
浮动（float）
浮动的特点：
浮动多用于网页菜单栏
1.css浮动只能在水平方向，即right或left
2.浮动元素会生成一个块级框，而不论它本身是何种元素。
3.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
4.浮动元素会脱离文档流（网页最基层，如果不设置一些特殊的属性，所有元素都在文档流中），不会占用文档流中的位置。
5.元素浮动之后，浮动元素下的块元素会自动向上移动
6.浮动元素不会超过其相邻的浮动元素
7.浮动元素上面如果有块元素，浮动元素师不会上移
8.浮动元素不会覆盖文字，用于文字环绕图片
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
9.浮动的clear属性
图像的左侧和右侧均不允许出现浮动元素：
<html>
<head>
<style type="text/css">
.img1
{
float:left;
clear:both;
}
</style>
</head>
<body>
<img src="/i/eg_smile.gif" class="img1"/>
<img src="/i/eg_smile.gif" class="img1" />
<img src="/i/eg_smile.gif" class="img1"></img>
<div>clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。</div>
</body>
</html>
定位（position）
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
1.static：元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
2.relative： 元素相对于其原始位置进行定位。
3.fixed
4.absolute：相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
当元素设置绝对定位后，元素会脱离文档流，不占用文档流的位置
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动
5.sticky：元素根据用户的滚动位置进行定位。
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，然后结合这几个属性值，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。
用这种方法可以将图片作为背景图
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<img src="/i/logo/w3logo-1.png" width="188" height="267">
<p>由于图像的 z-index 为 -1，它将被置于文本之后。</p>
</body>
</html>
元素脱离文档流的特点：
1.块元素脱离文档流后不会独占一行，如果没有给块元素设置宽高，默认宽高被内容撑开
2.行内元素（本身不能设置宽高），但是脱离文档流后，效果和块元素一样
块元素脱离文档流后不会独占一行，如果没有给块元素设置宽高，默认宽高被内容撑开
行内元素（本身不能设置宽高），但是脱离文档流后，效果和块元素一样
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
