昨天晚上进行了测试，真是一塌糊涂。戒骄戒躁，不惧前行。加油！

        学了定位总结：子绝父相 ，万事不行，开定位。

            当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

            比如淘宝的侧边栏，或者说让一个盒子固定到某一个位置，这时就需要定位了。

            定位跟浮动的区别：

                1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

                2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

            定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子

             定位也是用来布局的，它有两部分组成：

            定位 = 定位模式 + 边偏移

            定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

            边偏移（方位名词）

        边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离。

bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离。

leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离。

rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离

定位模式 (position)

选择器 {

    position: 属性值;

} //属性值有四种

static              静态定位

relative          相对定位

absolute        绝对定位

fixed              固定定位

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。

选择器 { position: static; }

静态定位 按照标准流特性摆放位置，它没有边偏移。静态定位在布局时我们几乎不用的

相对定位(relative) - 重要

选择器 { position: relative; }

1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

绝对定位(absolute) - 重要

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

选择器 { position: absolute; }

1.完全脱标 —— 完全不占位置；

2.父元素没有定位，则以浏览器为准定位（Document 文档）

3.元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点总结：（务必记住）

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

固定定位(fixed) - 重要

选择器 { position: fixed; }

以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系

不随滚动条滚动。

粘性定位(sticky) - 了解

选择器 { position: sticky; top: 10px; }

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效

跟页面滚动搭配使用。 兼容性较差，IE 不支持。

堆叠顺序（z-index）    

选择器 { z-index: 1; }

z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位特殊特性

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:

可以用inline-block  转换为行内块

可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）

绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位） 会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

通过CSS浮动、定位 可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

 标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。

 浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

元素的显示与隐藏

display: none 隐藏对象

display：block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： display 隐藏元素后，不再占有原来的位置。

visibility 可见性 （了解）

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 　元素可视

visibility：hidden; 　 元素隐藏

特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）

如果隐藏元素想要原来位置， 就用 visibility：hidden

如果隐藏元素不想要原来位置， 就用 display：none  (用处更多 重点）

overflow 溢出（重点）

属性值描述

visible不剪切内容也不添加滚动条

hidden不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll不管超出内容否，总是显示滚动条

auto超出自动显示滚动条，不超出不显示滚动条

显示与隐藏总结

display 显示 （重点）隐藏对象，不保留位置配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛

visibility 可见性 （了解）隐藏对象，保留位置使用较少

overflow 溢出（重点）只是隐藏超出大小的部分1. 可以清除浮动  2. 保证盒子里面的内容不会超出该盒子范围