三种display的异同 三种常见display属性最重要的区别 独占一行 支持宽高 上下margin block Y Y Y
三种display的异同
三种常见display属性最重要的区别
| 独占一行 | 支持宽高 | 上下margin | |
| block | Y | Y | Y |
| inline-block | N | Y | Y |
| inline | N | N | N |
除此之外，内容区域的大小还有一些特点
block不指定宽度时，宽度将占满父级元素；不指定高度时，高度由内容撑开。
inline-block不指定宽度和高度时，都由内容撑开
inline不能指定宽高，只能由内容撑开
常用标签的默认display属性
block：<div>, <p>, <h1>, <form>, <ul> 和 <li>
inline：<span>, <a>, <label>, <input>, <img>, <strong> 和<em>
元素转换
当我们想改变这些默认属性时，我们就可以用display来进行元素之间的转换.
例如，将块元素div和内联元素span进行并排显示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div,span{ height: 100px; color: white; background: red; display:inline-block; } </style> </head> <body> <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span> </body></html>代码生成的效果图：
