元素类型的分类
在网页布局中有的标签可以直接设置宽高大小，但有的标签不可以直接设置，因为每个标签都有自己的类型。在css中根据显示分类可以分为：块级元素、行内元素、可变元素。
块元素、行内元素、行内块元素
可变元素根据上下文语境决定该元素为块元素或行内元素，因此现在的css元素将可变元素考虑为行内块元素。
（如果提问两种元素类型，回答块元素和行内元素即可）
块元素
别名：块级元素、块状元素
- 常见的块元素：div、h、p、ul>li
- 块元素的特点
- 块元素可以直接设置宽高大小，通常是以一个盒子的形状在浏览器中显示的
- 块元素默认独占一行，后面的空间也是属于当前元素的
- 作用：块元素可以嵌套行内元素或者其他元素作为盒子实现网页布局
行内元素
别名：内联元素
- 常见的行内元素：a、span、i、em、b、strong
- 行内元素的特点
- 不可以直接设置宽高大小，元素的大小是由文本内容决定的
- 行内元素默认在一行内逐个显示
- 注意：行内元素在设置margin-top/margin-bottom会失效（存在Bug）
行内块元素
可以理解为是从行内元素中分出来的一种元素类型。
- 常见的行内块元素：img、input
- 行内块元素特点
- 可以直接设置宽高大小 => 拥有块元素的特点
- 在一行内逐个显示 => 拥有行内元素的特点
- 同时拥有两个元素类型的特点叫做行内块元素
- 问题：所有的行内块元素都是以基线对齐的（布局问题）
- 解决：使用css属性 vertical-align:top/bottom/middle
-
行高line-height：本质是基线对齐
4.png
-
常见的置换元素与非置换元素有哪些？
置换元素概念：
有自己的初始宽高大小
可以跟随标签内的属性和属性值的改变而有不同的样式
常见置换元素：img、input
非置换元素：其他标签
元素类型的转换属性
属性：display（控制、显示方式）
-
属性值：官方提供了19个
- block 块，可以将其他元素转换为块元素，使其拥有块元素的特点
- inline 行内，可以将其他元素转换为行内元素，使其具有行内元素的特点
- inline-block 行内块元素，可以将其他元素转换成行内块元素，使其具有行内块元素的特点
- 【了解】list-item 列表项目，本质是块元素
-
【重点】none 表示隐藏/删除元素（不占位置了）
- list-style:none 清除列表的默认样式
- text-decoration:none 清除a标签的默认下划线
- border:none 清除边框
- background:none 清除背景
- outline:none 点击表单控件外面的边框
-
拓展：关于浮动的设置
- 浮动可以让元素脱离文档流，改变元素的排列位置（垂直 => 水平）
- 改变元素类型，改为行内块元素
【重点】none和block之间的应用(表示显示和隐藏)
改变鼠标样式cursor -- 障眼法
pointer 手型；help 问号；wait 等待沙漏
/* 改变鼠标的样式 */ cursor: pointer;
动态伪类选择器
可以改变元素的样式
a:link{color: red;} /* 未访问的链接状态，必须给a */
a:visited{color:green} /* 已访问的链接状态，必须给a */
a:hover{color:blue} /* 鼠标滑过链接状态，可以随便给 */
a:active{color:yellow} /* 鼠标按下去时的状态，必须给a */
注意点：伪类选择器有常见的四个，如果四个要使用的话必须按照当前的顺序去写，其中最为重要的是hover选择器。
hover选择器
表示当鼠标移入时候可以改变的一种状态
-
hover改变自己的状态 => 自己的选择器:hover{}
div:hover{ color:red; } -
hover改变子级状态 => 父级选择器：hover 子级选择器{}
<div> A <p> B </p> </div>div:hover p{ color:green; font-size:30px; }
拓展 -- hover不常见的情况
通过自己改变相邻一个兄弟 +
<h1>AA</h1> <h2>BB</h2> <h2>CC</h2>h1:hover+h2{ color:green; }通过自己改变相邻所有兄弟 ~
h1:hover~h2{ color:red; }
案例1：鼠标移出移入控制二维码的显示与隐藏
https://www.jianshu.com/p/bfa55e6ae057
案例2：中英文切换导航的实现
https://www.jianshu.com/p/437ebc0409e5
案例3：电商页面商品的聚焦效果展示
https://www.jianshu.com/p/a25ddb494c1c
