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 标签
➢ 选择器语法:
不想起类目时可以用属性选择器
例如:
版权声明:
作者:zhuim521
链接:https://zhuimwl.com/57.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论