元素的显示模式

• 2.1 什么是元素显示模式
• 2.2块元素（最多）
• 2.2行内元素（较少）
• 2.3行内块元素（次多）
• 2.4元素显示模式总结
• 2.5元素显示模式转换
• 2.5.1行内元素转换为块级元素：
• 2.5.2块级元素转换成行内元素
• 2.5.3转换为行内块元素
• 案例：简洁小米侧边栏

2.1 什么是元素显示模式

div是块元素 span是行内元素

实例：
（行内元素）

块元素：

2.2块元素（最多）

一个占一行，可以设置宽高
③如果没有给div指定宽度，它就和它的父亲（在这里是body一样宽，而body的宽度就是浏览器的宽度）

2.2行内元素（较少）

一行放多个，不能设置宽高

③要么为此标签的默认宽度，要么随着内容而自动扩充，比如下面的两个span的宽度↓效果：

实例：《a》里放了块级元素↓

2.3行内块元素（次多）

一行可以放多个，且可以设置宽高

2.4元素显示模式总结

2.5元素显示模式转换

实际案例：（具有宽度和高度的链接）

2.5.1行内元素转换为块级元素：

宽高起效果了并且各自独占一行（且鼠标放在文字旁边也可以点）

2.5.2块级元素转换成行内元素

display：inline；

↓

2.5.3转换为行内块元素

效果（有宽度高度，且一行放多个）↓

案例：简洁小米侧边栏

效果：