CSS定位

1.什么是CSS?

CSS(Cascading Style Sheets，层叠样式表)，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

2.定位

在网页布局中，需要用到浮动，我们用的最多的就是float:left或者float:right

使用它们时需要注意一些地方：

1、 浮动元素会被自动设置成块级元素，相当于给元素设置了display:block。

2、元素浮动后脱离了文档流

3、 多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。

4、子元素全为浮动元素的元素高度自适应问题。     

     由于元素浮动后脱离了文档流，所以父元素是无法根据元素来自适应的。解决此问题最常用的办法由两种，第一种就是在所有浮动元素后加:  <div style="clear:both;height:0px;"></div> 
页面除了这种布局之外，还有常用的定位。

用于定位的属性为position，告诉浏览器某个元素应该如何在页面上定位。默认情况为static,

但还有其它四种情况：relative、absolute、fixed、sticky。

在页面中，大多数都是一块一块的，最外层元素：<div></div>

默认情况static，则该元素将根据原始文档流中的位置按顺序呈现。

 设置为relative，就可以使用left、right、bottom、top属性，这样就可以设置偏移量，例如：left:20px，离左边远离了20px，-40px，离左边近了40px.

 设置为fixed,也可以使用top,left,right,bottom属性,而且这种情况下,元素相对于浏览器窗口的视口定位.

如果设置top:90px,left:20px,则元素将出现在距视口顶部90px和距视口左边缘20px处,还会脱离标准文档流,宽度也固定为内容的宽度.

 如果设置为absolute,它相对于最近的定位元素来定位,如果没有定位的父级,则相对于视口定位.

 如果父级设置了定位元素,例如:position:relative.

设置为Sticky,也可以使用top,left,right,bottom提供偏移量.在满足指定的偏移量之前，元素就像一个相对定位的元素，当滚动位置大于偏移量时，就切换到固定位置并相对于视口定位。