2022/1/19

一、2D转换总结

　　1.其中单词的含义：transform： 改变  v.  、 translate：翻译，变为 v. 、rotate：旋转 v.  、scale：规模 n.

　　2.这三种变换都不会影响其他盒子

　　3.translate(50%,50%)是相对盒子本身的宽高移动的，配合绝对定位可以实现居中。position:absolute; top：50%； left：50%；前提是父盒子不是静态定位，其他的定位均可。

　　4.transform-origin属性可以设置旋转中心和缩放中心，单位可以是具体的像素值、方位名词（top，bottom，left，right）、百分数（相对本身的宽高）transform-origin： 50%,50%;指的是中心点。

　　5.综合写法：transform: translate() rotate() scale() ...；  切记必须是先写translate()，因为rotate会改变坐标轴方向；

二、定位总结

　　1.relative 是相对于他自己的位置移动的，相对定位移动之后不会脱标，依然占据之前的位置，不影响相邻的盒子（一般给absolute定位当父亲，所谓子绝父相）。

　　2.绝对定位是相对祖先元素来移动的，相对最近一级的有定位祖先元素（relative、absolute、fixed），若祖先元素没有定位，则相对于浏览器来移动。绝对定位不会占据原先的位置，会脱离标准。

　　3.固定定位是相对于浏览器可视区来移动的，和父元素没有关系，不会随着滚动条的滚动而滚动，不占有原先的位置。

　　4.粘性定位（sticky），也是相对浏览器的可视区进行移动的，会占有原先的位置。

　　5.只有定位的盒子才能有z-index属性，用于区分层叠的盒子的显示的优先级

　　6.加了绝对定位的盒子不能通过margin：0px, auto；来实现水平居中，固定定位是特殊的绝对定位，也不行。解决方法（left：50%；margin-left：本省盒子宽度的一半的负值）；垂直居中也是如此

　　7.绝对定位和固定定位也和浮动类似，行内元素加了绝对定位或者固定定位之后可以直接设置宽度和高度，块级元素添加绝对定位或者固定定位之后，若不指定宽度的话，宽度默认为元素内内容的宽度。

　　8.浮动元素，绝对定位（固定定位）元素不会触发外边距塌陷的问题。

　　9.固定定位（固定定位）拖标后，完全压住盒子的内容，包括文字。浮动的元素脱标后也会压住盒子，但是不会压住文字，文字会溢出，因为浮动的最初的功能就是为了做文字环绕的效果的。

　　10.display：none 和 visibility：hidden  都用于隐藏元素，区别在于，后者只是看不见，但是占有位置，前者看不见也不占有位置。display：block和visibility：visible都是表示元素可以看见

　　11.