文章目录

• 一、 垂直对齐方式
• • 1.1 基线
  • 1.2 垂直对齐方式
• 二、 光标类型
• 三、 边框圆角
• 四、overflow溢出部分显示效果
• 五、 元素本身隐藏

一、 垂直对齐方式

1.1 基线

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

1.2 垂直对齐方式

方法一

属性名：vertical-align

属性值：

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

图片居中实例

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

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

二、 光标类型

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

属性名：cursor:

常见的属性值：

三、 边框圆角

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

属性名：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

常见属性值：

五、 元素本身隐藏

场景：让某些元素本身在屏幕中不可见

常见属性：

1. visibility:hidden
2. display:none（常用）

区别：
visibility:hidden元素隐藏后仍然占有位置
display:none隐藏元素后不占用原来的位置