display:inline、block、inline-bloc
1.display:block将元素显示为块级元素
- 总是在新行上开始
- 高度，行高以及顶和底边距都可控制
- 宽度缺省是它的容器的100%，除非设定一个宽度
-
<div> <p> <h1> <form> <ul>和<li>是块元素的例子
2.display:inline将元素显示为行内元素
- 和其他元素都在一行上
- 高，行高及顶和底边距不可改变
- 宽度就是它的文字或图片的宽度，不可改变
-
<span> <a> <label> <input> <img> <strong> 和<em>是inline元素的例子
3.inline-block将块对象作为内联对象呈递
- 让块元素和其他元素保持在一行上
- 高度，行高以及顶和底边距都可控制
4.inline和block的转换情景
- 让一个inline元素从新行开始
- 让块元素和其他元素保持在一行上
- 控制inline元素的宽度（对导航条特别有用）
- 控制inline元素的高度
- 无须设定宽度即可为一个块元素设定与文字同宽的背景色
参考资料：display:inline、block、inline-block的区别
本文标题：display:inline、block、inline-bloc
本文链接：https://www.haomeiwen.com/subject/gfstottx.html
网友评论