一、垂直对齐方式

1.1 基线

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

在这里插入图片描述

1.2 垂直对齐方式

方法一

属性名：vertical-align

属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

方法二
将标签转为块标签
display:block

图片居中实例

.father {
    width: 600px;
    height: 600px;
    background-color: pink;
    line-height: 600px;
    /* 水平居中 */
    text-align: center;
}

img {
    /* 垂直居中 */
    vertical-align: middle;
}

在这里插入图片描述

二、光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor:

常见的属性值：

属性值	效果
default	默认值，箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

三、边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数值+px、百分比

原理：
在这里插入图片描述

.box{
    margin-top: 50px auto;
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 一个值：表示四个角是相同的 */
    /* border-radius: 10px; */

    /* 四个值： 左上  右上  右下  左下，从左上顺时针转 */
    border-radius: 10px 20px 40px 80px;
}

四、overflow溢出部分显示效果

在这里插入图片描述

溢出部分：指的是盒子内容所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条

属性名：overflow

常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动隐藏、显示滚动条