前端HTML5 +CSS3 5.CSS布局 6 装饰 && 7 选择器拓展

前端HTML5 +CSS3

老师：黑马程序员

四. CSS布局

6 装饰

6.1 垂直对齐方式

6.1.1 认识基线

基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

6.1.2 文字对齐问题

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

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

6.1.3 垂直对齐方式

属性名:vertical-align

属性值:

6.1.4 项目中vertical-align可以解决的问题

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

注意点：

• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果

6.2 光标类型

6.2.1 光标类型

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

属性名: cursor

常见属性值:

6.3 边框圆角

6.3.1 边框圆角

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

属性名: border-radius

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

原理：

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

6.4 overflow溢出部分显示效果

6.4.1 溢出部分显示效果

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

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

属性名: overflow

常见属性值:

6.5 元素本身隐藏

6.5.1 元素本身隐藏

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

常见属性:

1. visibility: hidden
2. display: none

区别：

1. visibility: hidden 隐藏元素本身，并且在网页中占位置

2. display: none 隐藏元素本身，并且在网页中不占位置

注意点:

开发中经常会通过display属性完成元素的显示隐藏切换.。

display: none;(隐藏)、display: block;(显示)。

7 选择器拓展

7.1 链接伪类选择器

7.1.1 链接伪类选择器

场景:常用于选中超链接的不同状态选择器

语法:

注意点：

如果需要同时实现以上四种伪类状态效果，需要按照LVHA顺序书写

其中:hover伪类选择器使用更为频繁，常用于选择各类元素的悬停状态

7.2 焦点伪类选择器

7.2.1 焦点伪类选择器

场景:用于选中元素获取焦点时状态，常用于表单控件

选择器语法:

效果：

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

7.3 属性选择器

7.3.1 属性选择器

场景:通过元素上的HTML属性来选择元素，常用于选择input标签

选择器语法: