web前端基础——CSS定位装饰

一、 垂直对齐方式

1.1 基线

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

浏览器在解析行内标签以及行内块标签的时候，默认按照文字模式进行解析，所以有的标签排列是无法完全对齐的，因为是按照 基线对齐

1.2 垂直对齐方式

方法一

属性名：vertical-align

属性值：

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

但凡需要 行内标签与文字标签对齐、行内块与行内块对齐，想要居中都要使用vertical-align:middle

方法二
将标签转为 块标签
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	根据是否溢出，自动隐藏、显示滚动条

五、 元素本身隐藏

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

常见属性：

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

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