企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持知识库和私有化部署方案 广告
# 标签显示display(重点) ![](https://img.kancloud.cn/c7/fc/c7fc484218e38982ecb01bf4c8ef07e2_1028x810.png) ## 块级元素(block-level)(可以调空间大小) ![](https://img.kancloud.cn/52/9c/529c4b35e2ec20ef71e4347d9a06c6aa_1099x411.png) ## 行内元素 inline-level (不能调空间大小) ![](https://img.kancloud.cn/79/4b/794bd8bc1fb8305db85a93bfdc7240bc_1171x535.png) ### 行内元素特点 ![](https://img.kancloud.cn/9d/f5/9df541c02858604f864f17c0e771170e_791x424.png) ##行内块元素(inline-block) ![](https://img.kancloud.cn/76/92/7692d5dc81b5f234f7efbd8cc591ea96_1228x451.png) ###行内块元素特点 ![](https://img.kancloud.cn/cf/9a/cf9a4b790b0116a1f5525219ed0e75fc_961x208.png) # 三种模式总结区别 ![](https://img.kancloud.cn/9e/25/9e257701e6bc3fbda76aceb1f9a4dbf3_1191x457.png) # 标签显示模式转换display (**重点**) ●块转行内:**display:inline**; 变成一行 ●行内转块:**display:block**; 空间改变**(常用 重点)** ●块、行内元素转换为行内块:**display: inline-block**; 行的宽度可以改变 ![](https://img.kancloud.cn/7b/91/7b91e06a7dc3cbe5d7cdd16f9c81fa18_715x282.png) ![](https://img.kancloud.cn/b6/cb/b6cb34f55808a0cd9c7f1a71b40fad6e_874x791.png) # **垂直居中**行高line-height (**行高=盒子高=垂直居中**) ![](https://img.kancloud.cn/18/1d/181dc72dc63185a334f5087e19d0efed_715x65.png) ![](https://img.kancloud.cn/a8/04/a804249b2ded1b2236d19eac34994e8e_992x633.png) ![](https://img.kancloud.cn/1e/50/1e502f5aa7d6b37018d701ca6bccc943_1056x730.png)