定位、修饰样式

定位

定位方式

属性值	参考系	特点	备注
static	position的默认值	无	设置偏移值无效
relative (相对定位)	自身	不脱标	通常用于子绝父相结构中,此时不需偏移值
absolute (绝对定位)	最近的外层定位元素或文档(浏览器窗口)	完全脱标	通常配合偏移值使用
fixed (固定定位)	浏览器可视区窗口	完全脱标	通常配合偏移值使用，不会跟随滚动条滚动，需要设置宽高
sticky (粘性定位)	自身及浏览器窗口	部份脱标	需页面出现滚动条，需设置至少一个偏移值

注意：

1. 元素不设定left、top、right、bottom时无效
2. left 和 top 的优先级比 right 和 bottom 要高些
3. 定位元素都有会变成 类似 行内块元素 的特点，可以设置宽高 ，不会独占一行
4. position对所有元素均有效
5. 定位元素的层级一样，有层叠性，后面的定位元素会盖在前面的定位元素上，使用 固定定位 时需要注意

偏移值

类型	取值	备注
left	px或百分比	通常和right只用一个,同时使用时left优先
top	px或百分比	通常和bottom二者只用一个,同时使用时top优先
right	px或百分比
bottom	px或百分比

z-indx 显示层级

格式： z-index: 整数;

注意:

1. 取值越大, 显示顺序越靠上, z-index 的默认值是0,可以设置 负值
2. z-index必须配合定位才生效,默认情况下, 定位的盒子 后来者居上

定位的应用(垂直居中)

/*绝对定位元素水平垂直居中*/
.box{
position: absolute;

/*思路1:left:50%  top:50% 然后 margin-left:-自身宽度的一半;  margin-top:-自身高度的一半; */

left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;


/* 思路2: left:0;top:0;right:0;bottom:0;margin:auto; */

left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: pink;


/* 思路3 left:50% top:50%  transform:translate(-50%,-50%) */

left: 50%;
top: 50%;
transform: translate(-50%, -50%);  
}

修饰性样式

vertical-align设置垂直对齐

应用场景：应用于解决垂直方向 的对齐问题

有效范围: 仅对行内元素或行内块元素有效

属性值:

• middle(垂直居中)
• top (垂直靠上对齐)
• bottom(垂直靠下对齐)
• xxxpx(基于baseline)
• 默认 基线对齐

典型场景: 解决img外未设置高度的div底部与img底部存在空隙的问题(产生原因：基线对齐)

<style>
    解决方案1:
    img {
        display:block;
    }
    解决方案2：
    img {
        vertical-align:middle;
    }
    解决方案3:
    div {
        font-size:0;
    }
    
</style>

<div class="father"><img src="./images/1.jpg" alt=""></div>

cursor 设置鼠标光标

常用取值:

• default 箭头
• pointer 小手
• text 编辑
• move 十字架
• not-allowed 禁止

border-radius设置圆角边框

设置方式:

/*设置四个圆角半径 均为10px*/
border-radius:10px;
/*设置四个圆角半径 均为宽的50%/高的50% 当盒子为正方形时能实现圆形 当为长方形时实现椭圆 */
border-radius:50%;
/*分别设置 左上 右上 右下 左下(顺时针)四个圆角半径 为 10px 20px 30px 40px*/
border-radius: 10px 20px 30px 40px;
/*单独设置左上角圆角半径 为10px*/
border-top-left-radius:20px;

隐藏元素

显示隐藏：

• overflow:hidden：溢出隐藏

  • overflow:auto：溢出时出现滚动条
  • overflow:scroll：一直有滚动条
  • overflow:visible：溢出显示 (默认状态)

• opacity：1完全不透明 0 完全透明 0.5半透明

隐式隐藏：

• display:none：完全隐藏，不占空间

• visibility:hidden ：占据空间

border-collapse设置 边框合并

table {border-collapse:collapse;/*设置边框合并实现细线边框*/}

border实现小三角

<style>
    .box {
      width: 0;
      height: 0;
      margin:50px auto;
      border:20px solid;
      /* 实现箭头向右的等腰直角三角形 */
      border-color: transparent transparent transparent pink;
    }
    .box1 {
      width: 0;
      height: 0;
      margin:50px auto;
      border-style:solid;
      border-width:0 150px 50px 150px;
        /* 实现箭头向右的两直角边分别为50 150的直角三角形 */
      border-color:transparent transparent transparent red;
    }
</style>
<div class="box"></div>
<div class="box1"></div>