CSS快速记忆笔记（四）

版权声明：知识改变命运，科技改变生活，学习适应改变！ https://blog.csdn.net/superaistar/article/details/81266794

知识点34：CSS定位及特点---position
    为什么要用定位？       定位=定位模式+边偏移（重点记忆）
    将盒子定位在指定的某一个位置，自由的漂浮在其他盒子（包括标准流和浮动）的上面。
    标准流在最底层，浮动在中间，定位在最高层
    
    能说出为什么常用的   子绝父相   布局？
    ①边偏移：
    定位的盒子，是通过边偏移来移动位置的，一般情况下，凡是有定位的地方就有边偏移，定位的盒子有了边偏移才有价值。
    不是所有的定位模式都有边偏移。
    ②定位模式：
    语法: 选择器{ position：属性值；}
    有四种模式：static（静态定位）、absolute（绝对定位）、relative（相对定位）、fixed（固定定位）。
    静态定位：是元素的默认的定位方式，实际上就相当于无定位的意思，即未脱标。
    静态定位按照标准流特性摆放位置，它没有边偏移哦！
知识点35：相对定位---relative
    相对于它原来的标准流的位置而言的，未脱标；
    原来在标准流的区域继续占有，后面的盒子任然以标准流的方式对待它。
知识点36：绝对定位 ---absolute
    绝对定位是元素以带有定位的父级元素来移动位置。
    标准流的子盒子总是以父级为准移动位置。
    绝对定位子盒子 如果父级没有任何定位（除了静态默认的），绝对定位盒子，则以浏览器 文档 为准移动定位位置；如果父级有定位，绝对定位盒子，则以父级为准。
    总结：绝对定位元素依据最近的已经定位（relative、absolute、fixed，除静态static外）的父级盒子为准来进行自己的定位；
    不占有原来的标准流位置，完全脱离标准流。
知识点37：子绝父相的由来
    父级要占有位置，则用相对定位；
    子级任意摆放在其他元素的上面，所以不能占有，并且定位参考父盒子的位置，则用绝对定位
知识点38：固定定位---fixed
    固定定位是绝对定位的一种特殊形式，
    完全脱离标准流，完全不占位置；    
    跟父级没有任何关系，只认浏览器的可视窗口；（浏览器可视窗口+边偏移）
    根据浏览器可视窗口参考来设置位置
    不随滚动条滚动；和绝对定位的区别在于，绝对定位在以浏览器为准时会跟着浏览器文档滚动而滚动。
知识点39：绝对定位的盒子居中对齐（重点理解自身算法）
    盒子以自己的左上角为定位点，定位居中走父盒子的一般left50%, top50%;
    而这时出现的是超过居中点了，原因是定位盒子的中心点需要和父盒子中心点重合，所以这时需要定位盒子退回自身的一半，则用到margin-left：-width/2px，margin-top：-top/2px;这里的left和top是自身的宽和高，不是父元素的；取值方向与浏览器的坐标值有关联。
    浏览器坐标是以右为正方向，以下为正方向。
知识点40：z-index堆叠顺序
    旧版火狐浏览器3D渲染效果工具Titl可以清晰的查看。
    定位的堆叠顺序遵循后来者居上原则，默认顺序为书写位置显示；
    z-index的数值越大，元素的层级越靠上（前），默认值为0，没有单位。
    只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
知识点41：定位改变display属性
    块级元素不给width，默认通栏显示；
    行内块元素不给width，默认的宽度就是内容的宽度；
    浮动转换时宽度也是内容的宽度
    绝对定位和固定定位转化的类型和浮动相似，也是类似行内块，宽度也是内容的宽度；考点记忆：没有内容是无法显示出来的；
    浮动、绝对定位、固定定位三种模式都是完全脱离标准流，不占原有标准流中的位置。
    如果元素属于行内元素，则不用转换，直接给设置高、宽等属性，首先需要确定为是否是行内元素。
    定位的盒子，在很多情况下，如果需要给通栏，则需要给盒子单设置宽度；
    定位是完全脱表，会遮盖标准流的内容，这是需要给标准流给个margin外边距，以解决这个问题；
    当元素设置了定位模式（相对定位，绝对定位，固定定位），没有设置边偏移，则这时定位相当于静态定位，定位无效，元素还是属于标准流。
    只要设置了浮动，绝对定位、固定定位，则给子盒子外边距margin，咋不会出现触发外边距合并的问题。以前塌陷常用padding，border来解决。
    浮动压不住图片和文字。只有定位，才能压住盒子。
知识点42：矩形圆角写法
    /*标准单个写法,是四个角半径不同时就用这个*/
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    简写：border-radius: 0 15px 15px 0;
    依然遵循顺时针顺序
知识点43：定位移动位置基准
    相对定位relative：相对自身位置移动；
    绝对定位absolute：相对已经 定位 的父级元素进行移动；
    固定定位fixed：相对浏览器可视窗口进行移动。