12赞
290
当前位置:  开发笔记 > 编程语言 > 正文

装饰

1.1 文字对齐问题场景:解决行内行内块元素垂直对齐问题问题:当图片和文字在一行中显示时,其实底部不是对齐的1.2 垂直对齐方式属性名:vertical-align属性值:属性值效

文章目录[隐藏]

  • 1.1 文字对齐问题
  • 1.2 垂直对齐方式
  • 2.1 光标类型
  •  3.1 边框圆角
  •  5.1 元素本身隐藏
  • (拓展)元素整体透明度


1.1 文字对齐问题

场景:解决行内/行内块元素垂直对齐问题

问题:当图片和文字在一行中显示时,其实底部不是对齐的

1.2 垂直对齐方式

属性名:vertical-align

属性值:

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

2.1 光标类型

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

属性名:cursor

常见属性值:

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

 3.1 边框圆角

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

属性名:border-radius

常见取值:数字+px、百分比

赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角!

4.1 溢出部分显示效果

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

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

属性名:overflow

常见属性值:

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

 5.1 元素本身隐藏

场景:让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏

常见属性:

1. display: none 不占位隐藏

2. visibility: hidden 占位隐藏

(拓展)元素整体透明度

场景:让某元素整体(包括内容)一起变透明

属性名:opacity

属性值:0~1之间的数字

  • 1:表示完全不透明
  • 0:表示完全透明

注意点:

  • opacity会让元素整体透明,包括里面的内容,如文字、子元素等......

推荐阅读
author-avatar
bale999_816
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有