CSS的进阶

CSS的进阶

CSS的装饰

1 垂直对齐方式

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

当图片和文字在一行中显示时，其实底部不是对齐的，解决行内/行内块元素垂直对齐问题时，使用垂直对齐方式。

属性名：vertical-align。

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

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

• 文本框和表单按钮无法对齐问题
• input和img无法对齐问题
• div中的文本框，文本框无法贴顶问题
• div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
• 使用line-height让img标签垂直居中问题

2 光标类型

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

属性名：cursor。

3 边框圆角

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

属性名：border-radius。
常见取值：数字+px 、百分比。

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

边框圆角的常见应用：

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

4 overflow溢出部分显示效果

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