CSS基础（6）CSS布局-定位+装饰-2

装饰

目标：能够完成元素的装饰效果

学习路径：
1. 垂直对齐方式
2. 光标类型
3. 边框圆角
4. overflow溢出部分显示效果
5. 元素本身隐藏

1.1 认识基线（了解）

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

1.3 垂直对齐方式

➢ 属性名：vertical-align

➢ 属性值：

浏览器遇到行内或者行内块标签会当作文字处理，默认文字是基线对齐，需要在标签css中一个标签中添加 vertical align

（拓展）项目中 vertical-align 可以解决的问题

1. 文本框和表单按钮无法对齐问题
2. input和img无法对齐问题
3. div中的文本框，文本框无法贴顶问题
4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5. 使用line-height让img标签垂直居中问题
➢ 注意点：
• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果

光标的样式

➢ 场景：设置鼠标光标在元素上时显示的样式
➢ 属性名：cursor
➢ 常见属性值：

边框圆角

➢ 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
➢ 属性名：border-radius
➢ 常见取值：数字+px 、百分比
➢ 原理：

➢ 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

3.2 边框圆角的常见应用

➢ 画一个正圆：
1. 盒子必须是正方形
2. 设置边框圆角为盒子宽高的一半 → border-radius:50%
➢ 胶囊按钮：
1. 盒子要求是长方形
2. 设置 → border-radius：盒子高度的一半

4.1 溢出部分显示效果

➢ 溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
➢ 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
➢ 属性名：overflow
➢ 常见属性值：

元素本身隐藏

➢ 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
➢ 常见属性：
1. visibility：hidden
2. display：none
➢ 区别：
1. visibility：hidden 隐藏元素本身，并且在网页中 占位置
2. display：none 隐藏元素本身，并且在网页中 不占位置
➢ 注意点：
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）

（拓展）元素整体透明度

➢ 场景：让某元素整体（包括内容）一起变透明
➢ 属性名：opacity
➢ 属性值：0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
➢ 注意点：
• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

（拓展）边框合并

➢ 场景：让相邻表格边框进行合并，得到细线边框效果
➢ 代码：border-collapse：collapse；

边框合并必须加到table里面。

（拓展）用CSS画三角形技巧（面试题）

➢ 实现步骤：
1. 设置一个盒子
2. 设置四周不同颜色的边框

border-top:
border-right:
border-bottom:
border-ledt:

3. 将盒子宽高设置为0，仅保留边框
4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明(transparent)

（拓展）用CSS画三角形技巧（面试题）

➢ 拓展：通过调整不同边框的宽度，可以调整三角形的形态

三角形底部的宽度等于，三角形左右两个边框的宽度，三角形的高度等于其本身的宽度。

选择器拓展

1.1 链接伪类选择器

➢ 场景：常用于选中超链接的不同状态
➢ 选择器语法：

➢ 注意点：
• 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑
• 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态

2.1 焦点伪类选择器

➢ 场景：用于选中元素获取焦点时状态，常用于表单控件
➢ 选择器语法：

input：focus{
background-color：skyblue
}

➢ 效果：
• 表单控件获取焦点时默认会显示外部轮廓线

3.1 属性选择器

➢ 场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
➢ 选择器语法：

不想起类目时可以用属性选择器

例如：