display和浮动
块级元素：独占一行
h1-h6 p div 列表.....
行内元素：不独占一行
span a img strong....
行内元素 可以被包含在块级元素中，反之，则不可以
display
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <!-- block 块元素 8 inline 行内元素 9 inline-block 是块元素可以有内联，在一行 10 none 消失 11 12 float:left 左浮 13 clear：both 清除浮动 还可以当做块级元素 14 --> 15 16 <style> 17 div{ 18 width: 100px; 19 height: 100px; 20 border: 1px solid red; 21 display: inline; 22 float: right; 23 } 24 span{ 25 width: 100px; 26 height: 100px; 27 border: 1px solid red; 28 display: inline-block; 29 float: right; 30 clear: both; 31 } 32 p{ 33 float:right; 34 35 } 36 </style> 37 38 </head> 39 <body> 40 <div> 41 div块元素 42 </div> 43 44 <span>span行内元素</span> 45 <p>你好</p> 46 </body> 47 </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义