css定位中的固定定位

固定定位是比较重要的一个所以单独来讲。

固定定位（fixed）-重要

固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么
固定定位就类似于正方形。

1. 完全脱标–完全不占位置；
2. 只认浏览器的可是窗口 — 浏览器可视窗口 + 边偏移属性 来设置位置；
   1. 根腐元素没有任何关系；
   2. 不随滚动条滚动

命令显示图：

网页示例图：

注意：

1. 绝对定位/固定定位的盒子 不能通过设置 margin：auto 设置水平居中。
2. 堆叠顺序 (z-index)

    堆叠顺序  (z-index)
         在使用定位布局时，可能会出现盒子重叠的情况。
         加了点位的盒子，默认后来居上，后面的盒子会压住前面的盒子。
         应用z-index层叠等级属性可以调整盒子的堆叠顺序。
      z-index 的特性如下：
          1. 属性值：正整数、负整数或0、默认值是0、数值越大，盒子越靠上；
          2. 如果属性值相同，则按照书写顺序，后来居上；
          3. 数字后面不能加单位
     注意： 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、
         浮动和静态定位无效。

命令显示图：

网页示例图：

3. 定位改变display属性

display是显示模式，可以改变显示模式有以下方式；

1. 可以用inline-block转换为行内块。
2. 可以用浮动float默认转换为行内块（类似，并不完全一样，因为浮动是
  脱标的）。
3. 绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

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

同时注意：

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

命令显示图：

网页示例图：

圆角矩形设置4个角：

圆角矩形可以为4个角设置圆度，但是是有顺序的

 border-top-left-radius:20px;
 border-top-tight-radius:20px;
 border-bottom-right-radius:20px;
 border-bottom-left-radius:20px;

如果4个角，数量相同：

border-redius：15px；

里面数值不同，我们也可以按照简写的形式，具体格式如下：

border-radius: 左上角，右上角，右下角，左下角；
还是遵循的顺时针。

注意：

1. 变偏移需要和定位模式联合使用，单独使用无效；
2. top和bottom不要同时使用；
3. left和right不要同时使用。

网页布局总结

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

可以让合资上下排列或者左右排列的。

2. 浮动

可以让多个块级元素一行显示或者左右对齐盒子浮动的盒子就是按照顺序左右排列。

3. 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，但是每个盒子需要测量数值。

好了今天更新完了。。。