定位及部分属性

Posted 2020-12-29 shangxr

一、Position定位：

1. Relative：相对定位，定位之后原始位置保留，新位置不占位，相对于自己定位。
2. Absolute：绝对定位，相对最近的父级定位定位，不占位置。
3. Fixed：固定定位，相对于视窗（body）定位。

注意：定位后会使用：top、left、right、bottom。且定位后四个方向决定位置（两个就足够，水平和垂直各选一个。）定位建议必要时再使用以免出现不必要的麻烦。

定位或者浮动之后都会脱离普通流，这时就要涉及到层级,设置z-index属性即可。

二、C3特性居中不知宽高的嵌套盒子：

　　使用定位，先使图片移动宽、高各移动50%，定位后使用transform属性，值为translate（各移动嵌套内盒子的-50%），即可居中。

三、C3transform：

　　(1) Rotate：翻转。

　　(2) Translate：平移。（translatex/translatey）

　　(3) Scale：放大。

　　(4) Skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

四、部分属性：

1. background-position: 0 -28px;（背景图定位）
2. text-align: center;（文本居中，也适用于父级元素设置本属性居中行内块子元素）
3. Outline （轮廓）；
4. Outline-color
5. Outline-style
6. Border：none；（取消边框所有设置）