一、block的特点
① 总在新的一行开始(换行)
② 行高以及顶和底边距离都可控制
③ 如果用户不设置宽度,则会默认为整个容器的100%,设置就按设置的值显示
④ 常用的块元素:<div><p><h1><from><ul><li>等
a{
width: 100px;
height: 20px;
}
<p>
<a href="#">管理应用</a>
<a href="#">财务应用</a>
<a href="#">物流应用</a>
<a href="#">教育应用</a>
<a href="#">计算机应用</a>
</p>
此时的效果为:
因为<a>标签是行内元素,若加上display属性:
a{
display:block;
width: 100px;
height: 20px;
}
此时的效果为:
二、inline的特点
① 和其他元素都在一行上(不换行)
② 行高以及顶和底边距不可改变
③ 宽度就是它的文字或者图片的宽度,不可改变
④ 常用的行内元素:<span><a><label><input><img><strong>等
<p>轻轻的我走了,正如我轻轻地来</p>
<p>我挥一挥衣袖,不带走一片云彩</p>
此时的效果为:
因为<p>标签是块内元素,所以加上display:inline;则有如下效果:
三、inline-block的特点
① 和其它元素在一行上(不换行)
② 行高以及顶和底边距离都可控制
③ 可以设置宽和高
④ 默认它们的底部都将会在同一水平线上,为了让顶端对齐,可使用vertical-align:top;