display有三种值：inline、block、inline-block
display:block将元素显示为块级元素
<div><p><h1><form><ul><li>都属于块元素
block特点：
1. 总是在新的一行上开始
2. 高度 行高 以及顶和底边距都可控制
3. 宽度默认为容器的宽度 除非单独设置一个宽度
display：inline将元素显示为内联行内元素
<span><a><label><input><img><strong><em>都属于行内元素
inline特点：
1. 和其他行内元素都在一行上
2. 高 行高 以及顶和底边距不可改变
3. 宽度就是它的文字或者图片的宽度 不可改变
display：inline-block将对象呈递为内联块级对象
inline-block特点：
1. 将对象呈递为内联块级对象，但是对象的内容作为块对象呈递 旁边的内联对象会被呈
递在同一行内 允许空格
总结
inline：宽度、高度、边距不可控制（宽度、高度就是文本的宽度、高度）；不独占一行
block：宽度、高度、边距可控制；独占一行
inline-block：宽度、高度、边距可控制；不独占一行
网友评论