学习前端第七天笔记记录——定位及网页布局总结

16）定位
一、总体了解
1、定位的作用：可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子
2、定位组成：定位模式+边偏移
                      （定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终                              位置。）
3、定位模式：· 定位模式决定元素的定位方式，它通过CSS的position的属性来设置
                      · 值： static（静态定位）               relative（相对定位）
                               absolute（绝对定位）         fixed（固定定位）
                             （fixed前面在背景background-attachment：fixed固定背景里面提到了）
4、边偏移：· 定位的盒子移动到最终位置
                   · 属性：top             示例:top：80px      描述：顶端偏移量，定义元素相对于父元素上                                                                                              边线的距离
                               bottom       示例:bottom：80px  描述：底部偏移量，定义元素相对于父元素上                                                                                               边线的距离
                               left              示例:left：80px       描述：左侧偏移量，定义元素相对于父                                                                                                        元素上边线的距离
                               right            示例:right：80px     描述：右侧偏移量，定义元素相对于父元素上                                                                                               边线的距离
                   【注意是相对父级元素】

二、static静态定位
1、静态定位：是元素的默认定位方式，无定位的意思
2、语法：选择器 {position：static；}
3、  · 静态定位按照标准流特性摆放位置，他没有边偏移
       · 静态定位在布局时很少用到

三、relative相对定位
1、相对定位：元素在移动位置的时候，是相对于他原来的位置来说的（自恋型）
2、语法：选择器 {position：relative；}
3、特点：· 他是相对于自己原来的位置来移动的（移动位置的时候参照自己原来的位置）
               · 原来在标准流的位置继续占有，后面的盒子仍然用标准流的方式对待他（不脱标，继续                   保留原来的位置）
               · 因此，相对定位并没有脱标。他最典型的应用是给绝对定位当爹。

四、absolute绝对定位
1、绝对定位：元素在移动位置的时候，是相对于他祖先元素来说的（拼爹型）
2、语法：选择器 {position：absolute；}
3、特点：· 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
               · 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参                   考点移动位置
               · 绝对定位不在占有原先的位置（脱标）
4、小技巧：盒子居中
     加了绝对定位的盒子不能通过margin：0  auto；水平居中，但是可以通过一下计算方式实现水平居中和垂直居中
     · left：50%；：让盒子的左侧移动到父级元素的水平中心位置
     · margin-left：-100px；：让盒子向左移动自身宽度的一半

五、子绝父相
1、意思：子级是绝对定位的话，父级要用相对定位
2、· 子级绝对定位的话，父级要用相对定位
     · 父盒子需要加定位限制子盒子在父盒子内显示
     · 父盒子布局时，需要占有位置，因此父亲只能是相对定位
   【总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位】
[穿插其他知识点：出现在li里面的图片的宽度都这样表示：.box  ul  li  img{ width：100%}  ]

六、fixed固定定位
1、固定定位：元素固定于浏览器可视区域的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
2、语法：选择器 {position：fixed；}
3、特点：· 以浏览器的可视窗口为参照移动元素
                 （跟父元素没有任何关系。不随滚动条滚动）
               · 固定定位不占有原先的位置
                 （固定定位也是脱标的，其实固定定位特可以看作是一种特殊的绝对定位）
4、小技巧：固定在版心右侧位置
     小算法：· 让固定定位的盒子left：50%，走到浏览器可视区域（也可以看作版心）（就是大盒                       子）的一半位置
                  · 让固定定位的盒子margin-left：版心宽度的一半。多走版心宽度一半的位置（就是大                      盒子的一半）
                  就可以让固定定位的盒子贴着版心右侧对齐了

七、sticky粘性定位
1、粘性定位：可以被认为是相对定位和固定定位的结合
2、语法：选择器 {position：sticky；top：10px；}     （top：10px的意思是在距离可视窗口顶部                    10px是变成粘性定位）
3、特点：· 以浏览器的可视窗口为参照移动元素（固定定位的特点）
               · 粘性定位占有原先的位置（相对定位的特点）
               · 必须添加top、left、right、bottom其中一个才有效
               （跟页面滚动搭配使用。兼容性较差，IE不支持）

八、定位叠放次序
1、在使用定位布局时，可能会出现盒子重叠的情况。此时，可以用z-index来控制盒子的前后次序（z轴）
2、语法：选择器 {z-index：1；}
3、· 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子靠上
     · 如果属性值相同，则按照书写顺序，后来居上
     · 数字后面不能加单位
     · 只有定位的盒子才有z-index属性

九、定位的特殊性
· 绝对定位和固定定位，也和浮动，类似
 1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度
 2、块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
 3、脱标的盒子不会触发外边距塌陷（浮动元素、绝对定位（固定定位）元素的都不会触发外边距         合并的问题）
 4、绝对定位（固定定位）会完全压住盒子
      · 浮动元素不同，只会压住他先面标准流的盒子，但不会压住下面标准流盒子里面的文字（图           片）
      · 但是绝对定位（固定定位）会压住下面标准流的所有内容
      · 浮动之所以不会压住文字，因为浮动产生目的的最初是做文字环绕效果，文字会围绕浮动元            素

17）网页布局总结
· 通过盒子模型，清楚知道大部分html标签是一个盒子。通过CSS浮动、定位可以让每个盒子排列成为网页
· 一个完整的网页，是标准流、浮动、定位一起完成布局的，每个人都有自己专门的用法
1、标准流：
可以放盒子上下排列或者左右排列。垂直的块级盒子显示就用标准流布局
2、浮动：
可以让多个块级元素一行显示或者左右对齐盒子。多个块级盒子水平显示就用浮动布局
3、定位：
定位最大的特点就是层叠的概念，就是可以让多个盒子前后层叠来显示。如果元素自由在某个盒子内移动就用定位布局