【CSS3定位、变形transform、文字居中、区块元素居中】06

22. 定位

position_MDN

1. static：无定位(默认值)
   • 元素出现在正常的流中(忽略偏移值样式：top, bottom, left, right 和层级样式：z-index样式)
   • 按照文档的流式(flow)定位，将元素放到一个合适的地方。流式定位能很好的自适应各种布局，取得相对较好的布局效果
2. inherit：继承父元素的定位方式

---

22.1 相对定位

relative：相对定位

• 仍然在文档流中，占据他本来原本位置空间(无论是否偏移)，未偏移时该元素无任何影响
• 按照其原本位置进行偏移，根据偏移值样式值移动(水平和垂直各用1个)
• 根据层级样式决定于其他元素的覆盖关系，z-index大者在上，z-index值可以为负

.parent{
    width: 500px;
    height: 500px;
    background-color: blanchedalmond;
    margin: 0 auto;
}
.child{
    width: 200px;
    height: 200px;
    background-color: rgba(173, 173, 228, 0.5);
    /* 相对定位的元素在没有设置偏移值时，对元素没有影响 */
    position: relative;
    /* 参考其原本位置 */
    /* left: 100px; */
    right: 100px;
    top: 50px;
    z-index: 1;
}
/* 相对定位的元素仍然占据原来的位置 */
.next{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    position: relative;
    /* 没有设置z-index元素的层级默认值为0 */
}

22.2 绝对定位

absolute：绝对定位

• 元素脱离文档流，宽高等样式不再按照默认值方式设置(无论其原来是内联元素还是区块元素)
• 参照祖先元素中距离最近的position的值不为static的元素定位，否则参照html定位
• 层级覆盖关系同上

.parent{
    width: 500px;
    height: 400px;
    background-color: rgb(175, 206, 118);
    margin: 0 auto;
    border: 1px solid black;

    position: relative;
    z-index: -2;
}

.child{
    width: 200px;
    height: 200px;
    background-color: rgba(0, 17, 255, 0.835);

    /* 绝对定位但未设置偏移值时，元素默认出现在其原本位置 */
    /* 脱离文档流 在文档流中不在占位 */
    position: absolute;


    /* 有父元素有定位样式时，在设置偏移值时，元素按照父元素进行偏移 */
    /* left: 100px; */
    left: 110px;

    /* 元素按照祖先元素中最近的一个，有定位样式的元素进行偏移，如果没有祖先元素有定位样式，则参照Html根元素进行偏移 */

}
.next{
    width: 150px;
    height: 150px;
    background-color: red;
    position: relative;
    z-index: -1;
}

fixed: 固定定位，除了参照物为视窗window外，其他同绝对定位

body{
    height: 2000px;
}
.parent{
    width: 500px;
    height: 400px;
    background-color: blueviolet;
    margin: 0 auto;
    border: 1px solid black;
}

.child{
    width: 100px;
    height: 100px;
    background-color: rgb(255, 0, 242);

    /* 参照窗口定位 */
    position: fixed;

    /* 弹窗广告 */
    top: 0;
    right: 0;

}

.next{
    width: 100px;
    height: 100px;
    background-color: red;
}

22.3 粘性定位

sticky:

• 元素根据正常文档流进行定位，然后相对它的**最近滚动祖先（nearest scrolling ancestor）**和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

• 该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有**“滚动机制”**的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。

23. 变形

1. 变形transform，改变元素尺寸、形状或位置，但是依然保留其原本文档流中的位置(类似相对定位)
2. css3变形transform：translate位移函数
   • transform:translate()位移取值(像素值)
   • transform:translateX/Y() 水平/垂直方向位移
3. css3变形transform：scale缩放函数
   • transform:scale() 缩放取值(正数、负数和小数)
   • transform:scaleX/Y() 水平/垂直方向缩放
4. css3变形transform：skew斜切函数
   • transform:skew() 斜切度数(deg)
   • transform:skewX/Y() 水平/垂直方向倾斜
5. css3变形transform：rotate旋转函数
   • transform:rotate() 旋转度数(deg)

<div></div>
<div style="background-color: red;">div</div>

div{
    width: 300px;
    height: 300px;
    background-color: blue;
    margin: 0px auto;

    /* 将过渡过程展示出来 */
    transition: 0.4s all;
}
div:hover{
    /* 移动: 左负右正 上负下正 */
    /* transform: translate(10px,20px); */

    /* 放大 负值表示对称后放大 【翻转】 */
    transform: scale(-1.2,0.5);

    /* 斜贴：水平 垂直 */
    /* transform: skew(10deg,3deg); */
}

24. 居中

1. 文字、内联元素在父元素中居中

   • 父元素将text-align的值设置为text，文字、内联元素和内联块元素在该元素中水平居中
   • 父元素将line-height的值设置为其height的值，文字和内联元素在该元素中垂直居中

   /* 文字居中 */
   div{
       width: 200px;
       height: 200px;
       background-color: brown;
       /* 水平居中 */
       text-align: center;
       /* 垂直居中 */
       line-height: 200px;
   }
   

   <div>
       <span>我是文字</span>
   </div>
   

2. 内联块元素在父元素中居中

   • 给该元素设置vertical-align:middle(文字和内联元素居中对齐)，为其父元素中设置after伪类，高度为100%并设置居中对齐，内联块元素在其父元素中垂直居中
   • 父元素将text-align的值设置为text，文字、内联元素和内联块元素在该元素中水平居中

   div{
       width: 400px;
       height: 300px;
       background-color: red;
   
       /* 内敛块元素水平居中 */
       text-align: center;
   
       line-height: 300px;
       /* 内敛块元素垂直居中 */
   }
   div::after{
       display: inline-block;
       content: "";
       height: 100%;
       width: 0;
       vertical-align: middle;
   }
   span{
       display: inline-block;
       width: 150px;
       height: 100px;
       background-color: royalblue;
   
       /* 与父元素中线对齐 */
       vertical-align: middle;
   }
   

3. 区块元素在父元素中居中

   • 如果“margin-left”和“margin-right”都是“auto”，那么它们的使用值是相等的。它将元素相对于包含块的边缘水平居中(要求子元素比父元素小，且只能做水平方向的居中)。
   • 设置为参照父元素的绝对定位，并将left或top的值设置为50%，然后将变形transform的位置函数translateX(-50%)或translateY(-50%)，translate中的百分比为自己宽高的百分比，从而做到水平或垂直的居中
   • 将上面的居中方法中的变形函数替换成margin：margin-left:-1/2自己宽或margin-top:-1/2自己高，因为margin的所有方向百分比为父元素的宽度，因为这里不能用百分比
   • 设置为参照父元素的绝对定位或固定定位，将左右或上下偏移值设置为0，并将左右或上下margin设置为auto，从而做到水平或垂直的居中

way1:

.parent{
    width: 400px;
    height: 300px;
    background-color: blueviolet;
    /* 水平居中 */
    margin: 0 auto;

    position: relative;
}
.child{
    width: 450px;
    height: 100px;
    background-color: burlywood;
    margin: 0 auto; 
    /* way1. 只能做水平方向的居中，不能做垂直方向；如果子元素比父元素大了，就不居中了 */
}

way2:

.parent{
    width: 400px;
    height: 300px;
    background-color: blueviolet;
    /* 水平居中 */
    margin: 0 auto;

    position: relative;
}
.child{
    width: 450px;
    height: 100px;
    background-color: burlywood;
    /*子元素的margin-top 会和父元素的 margin-top 发生折叠 */
    /* way2: 只能做水平,不能做垂直 */
    position: relative;
    left: 50%; 
    margin-left: -225px; 
}

way3:

.parent{
    width: 400px;
    height: 300px;
    background-color: blueviolet;
    /* 水平居中 */
    margin: 0 auto;
    position: relative;
}
.child{
    width: 450px;
    height: 100px;
    background-color: burlywood;
    /* 水平居中 */
    /*  way3: 让元素左边界移到中线位置，然后让子元素左移自己的一半 */
    position: absolute;
    left: 50%;
    margin-left: -225px; */
    /* 垂直居中 */
    top: 50%;
    margin-top: -50px; 
}

way4:

.parent{
    width: 400px;
    height: 300px;
    background-color: blueviolet;
    /* 水平居中 */
    margin: 0 auto;
    position: relative;
}
.child{
    width: 450px;
    height: 100px;
    background-color: burlywood;
    /* 水平居中 */
    /*  way3: 让元素左边界移到中线位置，然后让子元素左移自己的一半 */
    position: absolute;
    left: 50%;
    /* 垂直居中 */
    top: 50%;
    /* 变形元素参考当前元素的百分比 */
    transform: translate(-50%, -50%);
}